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 [Link]
import { createStore } from "redux";
import { Provider } from "react-redux";
import Employereducer from "./Redux/Employereducer";
const Store =createStore(Employereducer);
[Link](
<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 [Link] 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'
[Link](
<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:'
[Link]
40d01e341c9d_o2switch-[Link]'},
{nom:"Empl2",prenom:'Prenom2',fonction:'dev
Back',image:'[Link]
-[Link]'},
]
}
// declaration des actions à executer sur le state
function Employereducer(state=INITIAL_STATE,action)
{
// action ADD : Ajouter un nouveau livre
if([Link]==='ADD')
{
let nempl={};
[Link]=[Link];
[Link]=[Link];
[Link]=[Link];
[Link]=[Link];
let nemployes=[...[Link]];
[Link](nempl);
return {employes:nemployes}
}
return state
}
export default Employereducer;
7-Ecrire le code du composant [Link] et [Link] 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) :
/ /
****************[Link]************** ****************[Link]*************
**/ */
import React from 'react' h1 {
import './[Link]' text-align: center; /* Alignement du
export default function texte au centre */
Employe({nom,image}) { }
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 [Link] et [Link] 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)
/****************[Link]**************************/
import React from 'react' /
import { useSelector } from 'react-redux' *****[Link]***
import Employe from './Employe' /
import './[Link]'
export default function ListEmployes() { ul li {
//1- recupérer le states employes depuis le Reducer( en utilisant
useSelector) display: inline-
const employes=useSelector(state=> [Link]) block;
return ( }
<div>
<h2>Liste des Employés:</h2>
<ul>
{
[Link]((emp)=>{
return <li>
<Employe nom={[Link]} prenom={[Link]} fonction={[Link]}
image={[Link]} />
</li>
})
}
</ul>
</div>
)
}
-Pour Rendre l’image cliquable , on va modifier le code du component [Link] :
/****************[Link]****************/
import React from 'react'
import './[Link]'
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 [Link]
/*****************[Link]****************/
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 [Link] qui permet d’ajouter un employe :
/***************** [Link]****************/
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([Link])} /> <br/>
Prenom : <input type="text" value={prenoma} onChange={(e)=>setPrenom([Link])} />
<br/>
Fonction : <input type="text" value={fonctiona}
onChange={(e)=>setFonction([Link])} /> <br/>
Image : <input type="text" value={imagea} onChange={(e)=>setImage([Link])} />
<br/>
<input type="button" value='Ajouter' onClick={addE} />
</div>
)
11-Ecrire le code du composant [Link] et [Link]
/***************** [Link]****************/ /*********
[Link]****************/
import React from 'react'
import {Link} from 'react-router-dom' .nav-top {
import './[Link]' margin: 75px auto 50px;
export default function Header() { display: flex;
return ( justify-content: center;
<div className='nav-top'> align-items: center;
<Link to="/">Accueil</Link> width: 100%;
<Link to="/add">Ajouter Un Employe</Link> background: #333;
}
/* dans css a et non pas link */
</div> .nav-top a {
) font-size: 22px;
} text-decoration: none;
color: #f1f1f1;
padding: 20px 20px;
}
12-Ecrire le code du composant [Link]
/***************** [Link]****************/
import './[Link]';
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 [Link] :**********
import { Provider } from "react-redux";
import Store from './Redux/store'
import {BrowserRouter} from 'react-router-dom'
const root = [Link]([Link]('root'));
[Link](
<Provider store={Store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
13-Code du composant EmployesApi pour afficher les Employés à Partir une API :
[Link] dans un tableau :
/*****************[Link]****************/
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(() => {
[Link]('[Link] => setEmployes([Link]));
}, []);
return (
<div>
<h1>Call Api :</h1>
<table>
<tr> <th>Nom</th><th>Prenom</th><th>Fonction</th><th>Image</th> </tr>
{
[Link]((emp)=>{
return
<tr>
<td> { [Link]}</td> <td> {[Link]}</td><td> {[Link]}</td><td> <img
src={[Link]}> </td>
</tr>
})
}
</table>
</div> )
}