1-Commande pour créer le squelette d’une application React :
npx create-react-app nom_application
2-Commande pour exécuter une application React :
Il faut se placer dans la racine du dossier de l’application et executer la commande :
npm start
3-Commandes pour installer Redux dans une application React :
npm install redux
npm install react-redux
-Commande pour installer React-router-dom :
npm install react-router-dom
- Commande pour installer axios (Appel API) :
npm install axios
4-Ecrire le code du programme pour créer un store Redux :
-On suppose que l’on a déjà créé le Reducer Employereducer :
import { createStore } from "redux";
import Employereducer from "./Employereducer";
const store=createStore(Livresreducer)
export default store
-On peut créer le Store dans le fichier index.js
import { createStore } from "redux";
import { Provider } from "react-redux";
import Employereducer from "./Redux/Employereducer";
const Store =createStore(Employereducer);
root.render(
<Provider store={Store}>
<App />
</Provider>
);
-Si l’application contient plusieurs Reducers :
import { createStore, combineReducers } from "redux";
import Reducer1 from '../Reducers/Reducer1'
import Reducer2 from '../Reducers/Reducer2'
const rootReducer = combineReducers({Reducer1, Reducer2})
const store = createStore(rootReducer);
export default store;
5-Réecrire le code du programme index.js pour prendre en compte le store de Redux créé
dans la question précédente :
import { Provider } from "react-redux";
import Store from './Redux/store'
root.render(
<Provider store={Store}>
<App />
</Provider>
);
6-Ecrire le code du store(Reducer) qui va contenir un tableau des employés :
-Ajouter une action pour ajouter un nouvel Employe :
// declaration du state :
const INITIAL_STATE={
employes:[
{nom:"Empl1",prenom:'Prenom1',fonction:'dev Front',image:'
https://uploads-ssl.webflow.com/634855b161cb7a8f0fc31260/6464a77d9d3c40d01e3
41c9d_o2switch-deployer-react.png'},
{nom:"Empl2",prenom:'Prenom2',fonction:'dev
Back',image:'https://zonetuto.fr/wp-content/uploads/2023/01/framework-php-
laravel-logo-2048x594.png'},
]
}
// declaration des actions à executer sur le state
function Employereducer(state=INITIAL_STATE,action)
{
// action ADD : Ajouter un nouveau livre
if(action.type==='ADD')
{
let nempl={};
nempl.nom=action.payload.nom;
nempl.prenom=action.payload.prenom;
nempl.fonction=action.payload.fonction;
nempl.image=action.payload.image;
let nemployes=[...state.employes];
nemployes.push(nempl);
return {employes:nemployes}
}
return state
}
export default Employereducer;
7-Ecrire le code du composant Employe.js et Employe.css pour afficher les données d’un
Employe sous forme d’une image et un titre (les données à afficher sont passées via les
props) :
/****************Employe.js****************/ /****************Employe.css**************/
import React from 'react' h1 {
import './Employe.css' text-align: center; /* Alignement du
export default function Employe({nom,image}) texte au centre */
{ }
return ( img {
<div className="container"> width: 300px;
height: 300px; }
<img src={image} alt="" /> .container{
<h1>{nom}</h1> width:300px;
border: 1px solid #ddd;
</div> padding: 20px;
) }
}
8-Ecrire le code du composant ListEmployes.js et ListEmployes.css pour afficher la liste des
employés (le clique sur l’image de l’employe permet d’ouvrir la page detail en passant le
nom de l’employe comme parametre)
/****************ListEmployes.js**************************/
import React from 'react'
import { useSelector } from 'react-redux'
/*****ListEmployes.csss***/
import Employe from './Employe'
import './ListEmployes.css' ul li {
export default function ListEmployes() {
//1- recupérer le states employes depuis le Reducer( en utilisant display: inline-block;
useSelector) }
const employes=useSelector(state=> state.employes)
return (
<div>
<h2>Liste des Employés:</h2>
<ul>
{
employes.map((emp)=>{
return <li>
<Employe nom={emp.nom} prenom={emp.prenom} fonction={emp.fonction}
image={emp.image} />
</li>
})
}
</ul>
</div>
)
}
-Pour Rendre l’image cliquable , on va modifier le code du component Employe.js :
/****************Employe.js****************/
import React from 'react'
import './Employe.css'
import {Link} from 'react-router-dom'
export default function Employe({nom,prenom,fonction,image}) {
return (
<div className="container">
<Link to={`Details/${nom}/${prenom}/${fonction}/${encodeURIComponent(image)}`}><img src={image} </Link>
<h1>{nom}</h1>
</div>
)
}
}
9-Ecrire le code du composant Detailsemploye.js
/*****************Detailsemploye.js****************/
import React from 'react'
import { useParams } from 'react-router-dom';
export default function Detailsemploye() {
// 1-recupérer les parametres en utilisant useParams
const {nom,prenom,fonction,image}=useParams();
return (
<div>
<h1> Details Employe: </h1>
<h3>Nom :{nom} </h3>
<h3>Prenom:{prenom}</h3>
<h3>Fonction:{fonction}</h3>
<img src={image} width={400} height={250} />
</div>
)
}
10-Ecrire le code du composant Addemploye.js qui permet d’ajouter un employe :
/***************** Addemploye.js****************/
import React, { useContext, useState } from 'react'
import { useDispatch } from 'react-redux';
export default function Addemploye() {
// 1-declaration des states :
const[noma,setNom]=useState('');
const[prenoma,setPrenom]=useState('');
const[fonctiona,setFonction]=useState('');
const[imagea,setImage]=useState('');
// 2-Créer un objet usedispatch pour pouvoir appeler le traitement ADD
const dispatch=useDispatch();
const addE = () => {
dispatch({
type: "ADD",
payload: {nom:noma,prenom:prenoma,fonction:fonctiona,image:imagea}
})
setNom('');setPrenom('');setFonction('');setImage('');
}
return (
<div>
<h1>Nouvel Employe : </h1>
Nom : <input type="text" value={noma} onChange={(e)=>setNom(e.target.value)} /> <br/>
Prenom : <input type="text" value={prenoma} onChange={(e)=>setPrenom(e.target.value)} /> <br/>
Fonction : <input type="text" value={fonctiona} onChange={(e)=>setFonction(e.target.value)} />
<br/>
Image : <input type="text" value={imagea} onChange={(e)=>setImage(e.target.value)} /> <br/>
<input type="button" value='Ajouter' onClick={addE} />
</div>
)
}
11-Ecrire le code du composant Header.js et Header.css
/***************** Header.js****************/ /********* Header.css****************/
import React from 'react' .nav-top {
import {Link} from 'react-router-dom' margin: 75px auto 50px;
import './Header.css' display: flex;
export default function Header() { justify-content: center;
return ( align-items: center;
<div className='nav-top'> width: 100%;
<Link to="/">Accueil</Link> background: #333;
<Link to="/add">Ajouter Un Employe</Link> }
/* dans css a et non pas link */
.nav-top a {
</div> font-size: 22px;
) text-decoration: none;
} color: #f1f1f1;
padding: 20px 20px;
}
12-Ecrire le code du composant App.js
/***************** App.js****************/
import './App.css';
import ListEmployes from './Employe/ListEmployes';
import Detailsemploye from './Employe/Detailsemploye';
import Addemploye from './Employe/Addemploye';
import Header from './Header/Header';
import {Routes,Route} from 'react-router-dom'
function App() {
return (
<div className="App">
<Header/>
<Routes>
<Route path="/" element={<ListEmployes />} />
<Route path="/Details/:nom/:prenom/:fonction/:image/" element={<Detailsemploye />} />
<Route path="/add" element={<Addemploye/>} />
</Routes>
</div>
);
}
export default App;
/******** Ajouter BrowserRouter au fichier index.js :**********
import { Provider } from "react-redux";
import Store from './Redux/store'
import {BrowserRouter} from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={Store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
13-Code du composant EmployesApi pour afficher les Employés à Partir une API :
http://www.ofppt.ma/api/employes dans un tableau :
/*****************EmployesApi.js****************/
import React, { useEffect, useState } from 'react'
import axios from 'axios';
export default function Api() {
// declaration du state :
const [employes, setEmployes] = useState([]);
// appel api axios (useEffect)
useEffect(() => {
axios.get('http://www.ofppt.ma/api/employes').then(response => setEmployes(response.data));
}, []);
return (
<div>
<h1>Call Api :</h1>
<table>
<tr> <th>Nom</th><th>Prenom</th><th>Fonction</th><th>Image</th> </tr>
{
employes.map((emp)=>{
return
<tr>
<td> { emp.nom}</td> <td> {emp.prenom}</td><td> {emp.fonction}</td><td> <img src={emp.image}> </td>
</tr>
})
}
</table>
</div> )
}
