Installer le projet React

npx create-react-app ns_front

Ouvrir le projet React

cd ns_front

npm install

lancer le projet

npm start

 

---

 

Installer les dépendances essentielles

Installer react-router-dom qui va simplifier la gestion des routes et Sass qui va nous permettre de l’utiliser

npm i -s react-router-dom sass react-bootstrap bootstrap axios

• react-router-dom → Gestion des routes
• axios → Requêtes HTTP vers l’API Laravel
• @reduxjs/toolkit & react-redux → Gestion de l’état

 

---

Suppression des fichiers inutile – Ne Garder les fichiers essentiels index.js et App.js

---

Importez Bootstrap dans le fichier index.js

import 'bootstrap/dist/css/bootstrap.min.css';

---

## Mettre en place un système de routage dans le fichier App.js

## Définir les routes à l’intérieur de la balise

## Créer le premier composant « barre de navigation ». Dans le dossier « components » – src « fichier Navbar.js ».

Dépendances essentielles pour le projet React 19

React et React DOM  « bibliothèques de base pour créer des applications Reac »t.

npm install react react-dom

React Router DOM « Pour la gestion des routes dans votre application ».

npm install react-router-dom

Axios « Pour effectuer des requêtes HTTP vers votre API backend ».

npm install axios

Material UI (ou Bootstrap)  » Une bibliothèque d’interface utilisateur et de cohérence visuelle.

Installation de Material UI

npm install @mui/material @emotion/react @emotion/styled

Installation de Bootstrap

npm install react-bootstrap bootstrap

Formik ou React Hook Form « Pour simplifier la gestion des formulaires ».

Installation de Formik :

npm install formik

Installation de React Hook Form

npm install react-hook-form

Gestionnaires d’état

Installation de Redux :

npm install redux react-redux

Installation de Zustand

npm install zustand

npm install @mui/icons-material

Drag & Drop

npm install @atlaskit/pragmatic-drag-and-drop
npm install @atlaskit/pragmatic-drag-and-drop-auto-scroll
npm install @atlaskit/pragmatic-drag-and-drop-hitbox

Formulaires et Validation

npm install react-hook-form
npm install @hookform/resolvers
npm install yup

UI et Animation

npm install @headlessui/react
npm install @heroicons/react
npm install @formkit/auto-animate
npm install react-confetti
npm install react-fast-marquee
npm install swiper

Requêtes HTTP

npm install axios

Dates et Formatage

npm install dayjs

Graphiques et Visualisation

npm install apexcharts
npm install react-apexcharts
npm install react-syntax-highlighter

Gestion des fichiers

npm install filepond
npm install filepond-plugin-image-preview
npm install react-filepond

Gestion de texte

npm install react-markdown
npm install react-textarea-autosize

Internationalisation

npm install i18next
npm install react-i18next
npm install i18next-browser-languagedetector

Authentification et Sécurité

npm install jwt-decode

Tableaux et Recherche

npm install @tanstack/react-table
npm install @tanstack/match-sorter-utils
npm install fuse.js

Autres

npm install html-react-parser
npm install react-router
npm install react-tooltip
npm install simplebar-react
npm install sonner
npm install tiny-invariant

Développement (devDependencies)

Vite et Plugins
npm install vite -D
npm install @vitejs/plugin-react -D
npm install vite-plugin-eslint -D
npm install vite-plugin-svgr -D
npm install vite-jsconfig-paths -D

Linting et Formatage

npm install eslint -D
npm install eslint-plugin-react -D
npm install eslint-plugin-react-hooks -D
npm install eslint-plugin-react-refresh -D
npm install eslint-config-prettier -D
npm install eslint-define-config -D
npm install prettier -D
npm install prettier-plugin-tailwindcss -D

 CSS et Post-Processing

npm install tailwindcss -D
npm install autoprefixer -D
npm install postcss -D

Types et Proptypes

npm install @types/react -D
npm install @types/react-dom -D
npm install prop-types -D

Vérification

npm run dev

Doc ### React-Admin Tutorial.

Installation

npm install react-admin ra-data-json-server @mui/material @emotion/react @emotion/styled

Ce qui va être installé – à verifier – :

• react-admin : Le framework principal.
• ra-data-json-server : Un provider de données qui se connecte à une API REST (JSONPlaceholder en exemple).
• @mui/material : Matérial UI, la bibliothèque UI utilisée par react-admin.
• @emotion/react  @emotion/styled : Outils de stylisation nécessaires pour Material UI.

Ajout

Organiser dans un nouveau dossier sous src/admin

Nouvelle arborescence avec React-Admin css

src 
├── admin
 │ ├── AdminApp.jsx
 │ ├── dataProvider.js
 │ ├── resources
 │ │ ├── users.js
 │ │ ├── roles.js
 │ │ └── workouts.js
 │ └── authProvider.js

 

Configuration

Dans src/admin/dataProvider.js

Ajout dataProvider basé sur API REST

import jsonServerProvider from 'ra-data-json-server';

const dataProvider = jsonServerProvider('https://ADRESSE API PROJET');

export default dataProvider;

 

Ajout Auth Provider

Dans src/admin/authProvider.js

Définir la gestion d’authentification

const authProvider = {
    login: ({ username }) => {
        localStorage.setItem('username', username);
        return Promise.resolve();
    },
    logout: () => {
        localStorage.removeItem('username');
        return Promise.resolve();
    },
    checkAuth: () => {
        return localStorage.getItem('username') ? Promise.resolve() : Promise.reject();
    },
    checkError: () => Promise.resolve(),
    getPermissions: () => Promise.resolve(),
};

export default authProvider;

JWT (comme. système d’authentification ).

 

Création page Admin

Dans src/admin/AdminApp.jsx
Initialiser React-Admin

import { Admin, Resource, ListGuesser } from 'react-admin';
import dataProvider from './dataProvider';
import authProvider from './authProvider';

// Importation des ressources
import { UserList } from './resources/users';
import { RoleList } from './resources/roles';
import { WorkoutList } from './resources/workouts';

const AdminApp = () => (
 <Admin dataProvider={dataProvider} authProvider={authProvider}>
<Resource name="users" list={UserList} />
<Resource name="roles" list={RoleList} />
<Resource name="workouts" list={WorkoutList} />
</Admin>

);

export default AdminApp;

ListGuesser ==>> permet d’afficher rapidement une liste sans définir les colonnes

 

Définir les Ressources

Créer des composants de liste pour les entités : — users roles workouts dans src/admin/resources/ .

Fichier src/admin/resources/users.js :

import { List, Datagrid, TextField, EmailField } from 'react-admin';

export const UserList = () => (
<List>
<Datagrid>
<TextField source="id" />
<TextField source="name" />
<EmailField source="email" />
</Datagrid>
</List>
);

Idem pour les fichiers similaires roles.js – workouts.js – …

---

 

Intégrer AdminPanel dans projet

Injection dans src/App.js ==>> pour inclure une route dédiée au tableau de bord admin

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AdminApp from './admin/AdminApp';

const App = () => {
    return (
<Router>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/admin/*" element={<AdminApp />} />
</Routes>
</Router>
    );
};

export default App;

Pour Accéder à l’admin

http://localhost:3000/admin

 

Personnaliser

Ajout menu personnalisé dans src/admin/Menu.jsx :

import { Menu } from 'react-admin';
import DashboardIcon from '@mui/icons-material/Dashboard';
import PeopleIcon from '@mui/icons-material/People';

export const CustomMenu = (props) => ( <Menu {...props}>
<Menu.Item to="/users" primaryText="Utilisateurs" leftIcon={<PeopleIcon />} />
<Menu.Item to="/roles" primaryText="Rôles" leftIcon={<DashboardIcon />} />
</Menu>
);

 

Dans AdminApp.jsx :

import { Admin } from 'react-admin';
import { CustomMenu } from './Menu';

const AdminApp = () => (
<Admin dataProvider={dataProvider} authProvider={authProvider} menu={CustomMenu}>
{/* Resources */}
</Admin>
);

Tester

Tester l’interface d’administration

http://localhost:3000/admin

Material UI

==>> Components Installation Getting started Templates

https://mui.com/material-ui/

Material UI est une bibliothèque de composants React open source qui implémente Material Design de Google. Il est complet et peut être utilisé en production. واجهة المستخدم المادية هي مكتبة مكونات React مفتوحة المصدر تنفذ تصميم المواد من Google. إنه شامل ويمكن استخدامه في الإنتاج خارج الصندوق.

Installer une dépendance

npm install package-xxxxxx

Installer une dépendance en mode développement

npm install package-xxxx --save-dev

Supprimer une dépendance

npm uninstall package-xxxx

Mettre à jour toutes les dépendances

npm update

Vérifier les dépendances obsolètes

npm outdated

Créer une version optimisée pour la production

npm run build

Prévisualiser la build avant le déploiement

npm run preview

Lancer les tests unitaires

npm test

Lancer les tests avec couverture

npm test -- --coverage

Tester le linting du projet

npm run lint

Déploiement sur Vercel

npm install -g vercel

Déploiement sur Netlify

npm install -g netlify-cli
netlify deploy

Déploiement manuel sur un serveur

npm run build
scp -r build/ user@server:/path/to/deployment

Réinstaller toutes les dépendances

rm -rf node_modules package-lock.json && npm install

Nettoyer le cache npm

npm cache clean --force