Cours React Vs

OFPPT/ISGI Khouribga Module : développement Front-End (ReactJS)
I. Généralité ReactJS ........................................................................................................................... 2

1- Présentation React.js:.................................................................................................................. 2
2- Installation ReactJS: ..................................................................................................................... 2
3- Lier React au DOM....................................................................................................................... 4
4- Le virtual DOM............................................................................................................................. 4
a- Le DOM .................................................................................................................................... 4
- Tout d’abord, qu’est-ce que le DOM ? ................................................................................ 4
- Les limites ............................................................................................................................ 4
b- React/JSX ................................................................................................................................. 4
c- Utiliser JSX ............................................................................................................................... 5
5- Éléments imbriqués ..................................................................................................................... 6
6- Les attributs ................................................................................................................................. 7
7- Expressions JavaScript ................................................................................................................. 7
8- Commentaires ............................................................................................................................. 9
9- Convention de nommage .......................................................................................................... 10
II. ReactJS - Composants.................................................................................................................... 11
1- Exemple sans état...................................................................................................................... 11
III. Hooks ......................................................................................................................................... 12
1- useState ..................................................................................................................................... 12
2- UseEffect : ................................................................................................................................. 13
3- useRef : ...................................................................................................................................... 14
4- useReducer ................................................................................................................................ 16
5- useContext................................................................................................................................. 17
IV. ReactJS - Props........................................................................................................................... 17
V. ReactJS - Router............................................................................................................................. 18
VI. ReactJS & Redux ........................................................................................................................ 19
1- Présentation : ............................................................................................................................ 19
a- Qu'est-ce qu'un état? ............................................................................................................ 20
b- Qu'est-ce qu'une action?....................................................................................................... 20
c- Installation : ........................................................................................................................... 21
d- Exemple 01: ........................................................................................................................... 21
Par : Hassan IBNOEL FATA Page : 1 Filière : FullStack

I. Généralité ReactJS
1- Présentation React.js:
React n’est pas à proprement parler un Framework mais se présente comme une bibliothèque
JavaScript pour créer des interfaces utilisateurs. React est la réponse de Facebook à un
problème récurrent : créer des interfaces réutilisables et stateful.
Tout d’abord, React est basé sur virtual-dom : un composant React ne crée pas de HTML mais
une représentation sous forme d’objets et de nœuds de ce à quoi le HTML final doit ressembler.
Virtual-dom va prendre en compte cette représentation, la comparer au DOM réel et en
déduire les opérations minimales à exécuter pour que le DOM réel soit conforme au virtuel.
C’est grâce à cet outil que React peut partir du principe qu’il est plus simple de “remplacer”
toute l’interface quand elle doit être modifiée plutôt que de modifier au fur et à mesure le DOM
comme jQuery ou Angular/ AngularJS pouvaient le faire.
L’intérêt de cette approche est assez simple. On reproche souvent à JavaScript d’être lent alors
que c’est DOM qui l’est. Avoir une représentation sous forme d’arbre en JavaScript permet de
réaliser beaucoup plus d’opérations, d’utiliser les meilleurs algorithmes de comparaison
d’arbres et, cerise sur le gâteau, de faire toutes les modifications du DOM en une opération
plutôt qu’au fur et à mesure. Virtual-dom est également bien plus facile à mettre à jour et à
améliorer que les différentes implémentations de DOM dans les navigateurs.
2- Installation ReactJS:
• Télécharger le NodeJS

• Installer NodeJS
• Installer la commande : create-react-app
Dans l’invite de commande
npm install -g create-react-app
Pour créer un projet appelé premiertest, Veuillez exécuter cette commande:
create-react-app premiertest
cd premiertest
npm start
✓ Consulter http://localhost:3000
✓ Structure du projet
npm, npx et Yarn
- npm (Node package Management) sert à installer toutes les dépendances et les
packages dont le projet a besoin
- npx (Node Package eXecute)
npm install
yarn

Pour lier une application React au DOM, il faut utiliser le package ReactDOM et la fonction
render() avec en paramètres, le composant racine de l’application et le nœud du DOM auquel
il sera rattaché.
3- Lier React au DOM

Pour que notre application soit effectivement affichée dans le DOM, nous allons utiliser le
package ReactDOM.
Ce package va tout simplement nous permettre de “monter” notre application React sur un
élément du DOM (ici un élément qui possède l’id “root”) :
La méthode render prend donc 2 paramètres, l’élément React, racine de notre application et
le nœud du DOM sur lequel est attaché l’élément React.
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
4- Le virtual DOM
React implémente un concept très intéressant : le virtualDOM. Un concept qui va nous
permettre de réaliser des applications web complexes et rapides !
a- Le DOM
- Tout d’abord, qu’est-ce que le DOM ?
Le DOM est l’API qui permet de manipuler le contenu hiérarchisé de notre page web
(du HTML donc) sous forme d’arbre. Les éléments HTML constituent les nœuds de cet
arbre.
- Les limites
Un arbre, c’est pratique à parcourir, un peu moins à modifier (supprimer, ajouter des
éléments) mais surtout, modifier le DOM implique le recalcule de la disposition et style
de chacun des éléments de la page, conduisant à de sérieux problèmes de
performance lorsque l’on réalise de nombreuses modifications.
b- React/JSX :

React utilise JSX pour la création de modèles au lieu de JavaScript classique. Il n'est pas
nécessaire de l'utiliser, cependant, voici quelques avantages qui vont avec.
✓ Il est plus rapide car il effectue une optimisation lors de la compilation du code en
JavaScript.
✓ Il est également compatible avec le type et la plupart des erreurs peuvent être
interceptées lors de la compilation.
✓ Il est plus facile et plus rapide d’écrire des modèles si vous maîtrisez le langage HTML.
c- Utiliser JSX
JSX ressemble à un HTML normal dans la plupart des cas. Nous l'avons déjà utilisé dans le
chapitre Configuration de l'environnement. Regardez le code de App.jsx où nous
retournons div.
Code source App.jsx

function App(){
return (
<div>
Hello World!!!
</div>
)
}
export default App;
ou
export default function App(){
return (
<div>
Hello World!!!
</div>
)
}
Ou
const App = () => {
return (
<div>
<h1>Hello World</h1>
</div>
);
};
export default App;
ou
import React from 'react';
class App extends React.Component {

render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
Dans le fichier index.js, Ajouter la composante App
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Dans la console, Taper la commande : npm start
Même si cela ressemble au HTML, nous devons garder à l’esprit quelques points lorsque nous
travaillons avec JSX.
5- Éléments imbriqués
Si nous voulons renvoyer plus d'éléments, nous devons l'envelopper avec un seul élément
conteneur. Remarquez comment nous utilisons div comme wrapper pour les
éléments h1 , h2 et p .
Code source App.jsx

return (
<div>
<h1>Chapitre 1: ReactJS</h1>
<h2>Présentation</h2>
<p>React n’est pas à proprement parler un Framework mais
se présente comme une bibliothèque JavaScript pour créer des
interfaces utilisateurs. React est la réponse de Facebook à un
problème récurrent : créer des interfaces réutilisables et
stateful.</p>
</div>

);
}
Résultat :
6- Les attributs
Nous pouvons utiliser nos propres attributs personnalisés en plus des propriétés et attributs
HTML normaux. Lorsque nous voulons ajouter un attribut personnalisé, nous devons utiliser
le préfixe de données. Dans l'exemple suivant, nous avons ajouté data-myattribute en tant
qu'attribut de l’élément p.
Code source App.jsx

return (
<div>
<h1>Chapitre 1: ReactJS</h1>
<h2>Présentation</h2>
<p data="presentation">React n’est pas …</p>
</div>
);
}
7- Expressions JavaScript
Les expressions JavaScript peuvent être utilisées dans JSX. Nous avons juste besoin de
l'envelopper avec des accolades {} . L'exemple suivant rendra 2 .
Code source App.jsx

return (
<div>
<h1>Expression:</h1>

<p>Résultat:{1+1}</p>
</div>
);
}
Résultat :
Nous ne pouvons pas utiliser les instructions if else dans JSX, mais utiliser
des expressions conditionnelles (ternaires) . Dans l'exemple suivant, la variable i est égale
à 1 pour que le navigateur rende la valeur true . Si nous la changeons en une autre valeur, elle
rendra la valeur false .
Code source App.jsx

var moyenne = 16.7;
var i = 1;
return (
<div>
<h1>Expression:</h1>
<p>Résultat:{1+1}</p>
<p>Décision:{moyenne>10?'Admin':'nomAdmin'}</p>
<p>Valeur:{i==1?"true":"false"}</p>
</div>
);
}
Résultat :

React recommande d'utiliser des styles en ligne. Lorsque nous voulons définir des styles en
ligne, nous devons utiliser la syntaxe :
React ajoutera aussi automatiquement px après le nombre sur des éléments spécifiques.
L'exemple suivant montre comment ajouter myStyle inline à l’élément h1.
Code source App.jsx

var myStyle = {
fontSize: 100,
color: '#FF0000'
}
return (
<div>
<h1 style={myStyle}>Bonjour mes stagiaires</h1>
</div>
);
}
Résultat :
8- Commentaires
Lorsque vous écrivez des commentaires, nous devons mettre des accolades {} lorsque nous
voulons écrire des commentaires dans la section enfants d'une balise. Il est recommandé de
toujours utiliser {} lors de la rédaction des commentaires, car nous souhaitons être cohérents
lors de la rédaction de l'application.
Syntaxe :
{//End of the line Comment...}
{/*Multi line comment...*/}


var myStyle = {
fontSize: 30,
color: '#FF0000'
}
return (
<div>
{/*
.-.-.-.-.-.-.-.-.-
.- commentaries .-
.-.-.-.-.-.-.-.-.-
*/}
<h1 style={myStyle}>Bonjour mes stagiaires</h1>
</div>
);
}
Résultat
9- Convention de nommage
Les balises HTML utilisent toujours des noms de balises minuscules, tandis que les composants
de React commencent par Uppercase .
Remarque - Vous devez utiliser className et htmlFor en tant que noms d'attributs XML au lieu
de class et pour.
Ceci est expliqué sur la page officielle de React comme -
Comme JSX est JavaScript, les identificateurs tels que class et for sont déconseillés en tant que
noms d'attributs XML. Au lieu de cela, les composants DOM de React attend des noms de
propriété DOM tels que className et htmlFor, respectivement.
Exemple :
Créer le fichier App.css
.style1 {
color: red;
font-size: 40px;
}
Code source App.jsx
import './App.css'


return (
<div>
<h1 className='style1'>Bonjour mes stagiaires</h1>
</div>
);
}
Résultat :
II. ReactJS - Composants

Dans ce chapitre, nous allons apprendre à combiner des composants pour faciliter la
maintenance de l'application. Cette approche permet de mettre à jour et de modifier vos
composants sans affecter le reste de la page.
1- Exemple sans état

Notre premier composant dans l'exemple suivant est App. Ce composant est propriétaire de
l'en- tête et du contenu. Nous créons l'en- tête et le contenu séparément et nous les ajoutons
simplement dans l'arborescence JSX dans notre composant App. Seul le composant
d’application doit être exporté.
Code source App.jsx

import './App.css'
return (
<div>
<Header />
<Contenu />
</div>
);
}
function Header(){
return <h1>Chapitre 01: Présentation ReactJS</h1>
}
function Contenu(){
return(
<p>Dans ce chapitre, nous allons apprendre ....</p>
)
}
Résultat :

III. Hooks
Les hooks en React sont des fonctions qui vous permettent d'ajouter des fonctionnalités de
composant à vos fonctions de composant. Ils vous permettent de gérer l'état et les effets de
composant sans écrire une classe. Les hooks populaires incluent useState, useEffect,
useContext, useReducer et useRef. Les hooks sont une fonctionnalité introduite dans React 16.8
et ont été conçues pour rendre la programmation plus facile et plus cohérente en vous
permettant de partager du code entre les composants.
1- useState
useState est un hook en React qui permet de gérer l'état local d'un composant. Il retourne un
tableau avec deux éléments, la première valeur étant la variable d'état actuelle et la seconde
étant une fonction pour la mettre à jour. Cette fonction de mise à jour peut être appelée pour
changer la valeur d'état, ce qui déclenchera une ré-rendu du composant. useState est souvent
utilisé pour stocker et gérer les données interactives d'un composant, telles que les entrées de
formulaire, les valeurs de sélection, etc.
Exemple :
Code source App.jsx

import React, { useState } from 'react';
export default function App() {
// Déclaration d'une variable d'état nommée "cp" avec une valeur
initiale de 0
const [cp, setCp] = useState(0);
return (
<div>
<p>Nombre de clic est: {cp} </p>
<button onClick={() => setCp(cp + 1)}>
Clic ICI
</button>
</div>
);
}
Résultat :

2- UseEffect :
useEffect est un hook en React qui permet de gérer les effets de composant. Les effets de
composant sont des opérations que vous souhaitez effectuer lorsque le rendu d'un composant
est terminé, telles que des mises à jour dans le DOM, des requêtes réseau, des temporisations,
etc.
L'utilisation de useEffect dans un composant permet de spécifier les effets de composant

associés à celui-ci. Chaque fois que le composant se rend, useEffect est appelé et exécute le
code spécifié dans la fonction de rappel. De plus, useEffect peut prendre un deuxième
argument qui contrôle la fréquence à laquelle l'effet est exécuté, ce qui peut aider à optimiser
les performances de l'application.
En utilisant useEffect, vous pouvez éviter de devoir écrire des méthodes de cycle de vie telles
que componentDidMount ou componentDidUpdate pour gérer les effets de
Exemple :
Code source App.jsx

import React, { useState, useEffect } from 'react';

// Déclaration d'une variable d'état nommée "cp" avec une valeur
initiale de 0
const [cp, setCp] = useState(0);
// Effet pour mettre à jour le titre du document lorsque le

compteur change
useEffect(() => {
document.title = `Clic numéro: ${cp} `;
}, [cp]); // Le deuxième argument [cp] spécifie que l'effet doit
être exécuté uniquement lorsque la valeur de count change
return (
<div>

<p>Clic numéro : {cp}</p>

<button onClick={() => setCp(cp + 1)}>
Clic ICI
</button>
</div>
);
}
Résultat :
Description :
Dans cet exemple, nous déclarons une variable d'état cp avec une valeur initiale de 0 en utilisant
useState. Nous passons également une fonction setCp qui peut être utilisée pour mettre à jour
la valeur d'état. Dans notre rendu, nous affichons la valeur actuelle de cp et attachons une
fonction de gestion d'événement à notre bouton pour incrémenter la valeur de cp lorsqu'il est
cliqué.
3- useRef :
useRef est un hook en React qui permet de stocker des références mutables (des valeurs qui
peuvent être modifiées) au fil du temps. Il est souvent utilisé pour stocker des références à des
éléments du DOM, des objets d'animation, des timers, etc.
import React, { useState, useRef } from 'react';

const [a, setA] = useState(0);
const [b, setB] = useState(0);
const [r, setR] = useState(0);
const va = useRef(null);
const vb = useRef(null);
const Calculer = event => {

event.preventDefault();
setR(+va.current.value + +vb.current.value);

};
return (
<form onSubmit={Calculer}>
<label>
a:<input type="number"
value={a} onChange={event => setA(event.target.value)}
ref={va}
/>
</label>
<br />
<br />
<label>
Second number:
<input type="number"
value={b}
onChange={event => setB(event.target.value)}
ref={vb}
/>
</label>
<br />
<br />
<button type="submit">Somme</button>
<br />
<br />
Résultat: {r}
</form>
);
}
Résultat :
NB : event.preventDefault()➔est une méthode de l'objet Event en JavaScript qui

annule l'action par défaut associée à un événement donné.

4- useReducer
useReducer est un hook React qui permet de gérer les états complexes dans votre application.
Il s'agit d’une alternative plus avancée à useState, qui peut être plus appropriée pour les cas où
vous avez besoin de manipuler plusieurs états interdépendants ou de gérer des opérations
asynchrones.
useReducer prend en entrée un reduceur (reducer en anglais), qui est une fonction qui décrit
comment l'état actuel de l'application doit être mis à jour en fonction d'une action. Il renvoie
également un état et une fonction d'action pour le mettre à jour.
import React, { useReducer } from 'react';
const initialState = { cp: 0 };
function reducer(state, action) {

switch (action.type) {
case 'increment':
return { cp: state.cp + 1 };
case 'decrement':
return { cp: state.cp - 1 };
default:
return state;
}
}
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
<p>Compteur: {state.cp}</p>
<button onClick={() => dispatch({ type: 'increment' })}>
Incrémenter
</button>
<button onClick={() => dispatch({ type: 'decrement' })}>
Décrementer
</button>
</>
);
}
Résultat :

5- useContext
useContext est un hook React qui permet d'accéder à la valeur d'un contexte partagé. Il
simplifie la gestion de la transmission de données à travers l'arbre des composants d'une
application sans avoir à propager manuellement les props à chaque niveau.
Avant useContext, la transmission de données partagées dans une application React était
généralement réalisée en passant les props à chaque composant intermédiaire jusqu'au
composant final qui en avait besoin. Cela pouvait entraîner une longue chaîne de props et
rendre le code difficile à maintenir.
Avec useContext, vous pouvez définir un contexte global en utilisant la fonction

React.createContext, puis accéder à sa valeur dans les composants qui en ont besoin en
utilisant useContext.
IV. ReactJS - Props

Les props (short pour "properties") sont des arguments qui sont passés à un composant React
lors de sa définition. Ils permettent de transmettre des données depuis un composant parent
vers un composant enfant.
Voici un exemple simple d'utilisation de props :
function WelcomeMessage(props) {
return <h1>Bienvenue, {props.nom}</h1>;
}

return <WelcomeMessage nom ="Hamdaoui Said" />;
}
Résultat :

V. ReactJS - Router
Pour utiliser React Router dans votre application React, vous pouvez suivre les étapes suivantes :
i. Installez React Router en utilisant npm ou yarn :
npm install react-router-dom
ou
yarn add react-router-dom
ii. Importer le composant Router et les composants Route et Link dans votre fichier de
composant principal :
import { BrowserRouter as Router, Route, Link } from "react-

router-dom";
iii. Envelopper votre application avec le composant Router :
function App() {
return (
<Router>
<div>
{/* mettre le code de route ici*/}
</div>
</Router>
);
}
iv. Définissez les routes en utilisant les composants Route:
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
v. Créez des liens entre les différentes routes en utilisant le composant Link :

<Link to="/">Home</Link>
<Link to="/about">About</Link>
Ce sont les étapes de base pour utiliser React Router dans votre application React. Pour plus
d'informations sur les fonctionnalités avancées, veuillez consulter la documentation officielle
de React Router.
Exemple :

import { BrowserRouter as Router, Routes, Route, Link } from 'react-
router-dom';
import About from './About';
import Home from './Home';
return (
<Router>
<div>
<ul>
<li><Link to={'/'} > Home </Link></li>
<li><Link to={'/about'} >About</Link></li>
</ul>
<hr />
<Routes>
<Route path='/' element={<Home/>} />
<Route path='/about' element={<About/>} />
</Routes>
</div>
</Router>
);
}
Résultat :
VI. ReactJS & Redux

1- Présentation :

Redux est une bibliothèque open source pour la gestion de l'état dans les applications
JavaScript. Il se concentre sur la gestion des données dans une application en utilisant un seul
magasin central qui contient toutes les données de l'application. Les données sont modifiées
en utilisant des actions qui décrivent les mises à jour à apporter au magasin, et les mises à jour
sont effectuées en utilisant un reducteur qui prend en compte les actions et les données
existantes pour produire une nouvelle version du magasin. Redux s'intègre facilement avec
d'autres bibliothèques et frameworks, tels que React.
Redux utilise une architecture centralisée pour la gestion des données qui ajoute une
prévisibilité et une consistance aux applications. Le magasin Redux est la source unique de
vérité pour les données de l'application, ce qui signifie que les composants de l'application ne
doivent pas se synchroniser les uns avec les autres pour trouver la dernière version des
données. Les actions sont simples objets JavaScript qui décrivent une mise à jour à apporter au
magasin, et les réducteurs sont des fonctions pures qui prennent en compte les actions et les
données existantes pour produire une nouvelle version du magasin. Les développeurs peuvent
utiliser des outils de débogage pour surveiller les actions et les états du magasin, ce qui aide à
comprendre et à résoudre les problèmes. En fin de compte, Redux aide les développeurs à
créer des applications plus fiables et plus faciles à maintenir.
Le store de Redux est géré par le biais d'une fonction appelée "reducer". Le réducteur est
responsable de la modification de l'état en fonction des actions qui sont déclenchées. Les
actions sont simplement des objets qui décrivent une modification souhaitée de l'état.
Lorsqu'une action est déclenchée, le réducteur la traite et modifie l'état en conséquence. Les
composants de l'interface utilisateur qui sont abonnés au store sont informés de cette
modification, ce qui leur permet de se mettre à jour en conséquence.
Le store de Redux est également le seul endroit où l'état peut être modifié, ce qui garantit la
cohérence et la prévisibilité de l'état de l'application.
a- Qu'est-ce qu'un état?
L'état est le cœur de chaque composant à état réactif. Il détermine comment le composant doit
se comporter ou être rendu. Pour vraiment comprendre l'état, nous devons l'appliquer à de
vrais exemples. L'utilisateur est-il authentifié ? est un état qui contrôle si un utilisateur est
authentifié ou non, le modal est-il ouvert ? est aussi un état qui regarde si un modal donné est
ouvert ou pas même chose pour le cas d'une liste d'articles ou d'un compteur etc.
b- Qu'est-ce qu'une action?
Une action est un paquet utile d'informations qui contient un type

comme REMOVE_ARTICLE ou ADD_ARTICLE etc. Les actions sont distribuées à partir de votre

composant. Il envoie les données de votre composant React à votre store Redux. L'action
n'atteint pas le store, c'est juste le messager. Le store est changé par le réducteur.
c- Installation :
npm/npx/ yarn/ install --save redux
npm i react-redux
d- Exemple 01:
Redux peut être facilement utilisé dans une application React en suivant ces étapes simples :
i. Installer le paquet npm "redux"
ii. Créer un magasin Redux en utilisant la fonction "createStore"
iii. Connecter le composant React au magasin Redux en utilisant la fonction "connect" de

React-Redux
iv. Dispatcher une action en utilisant la méthode "dispatch" pour mettre à jour l'état de
l'application
v. Accéder à l'état de l'application et à ses actions à partir du composant en utilisant les

props connectées.
Exemple :

import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';
// État initial
const initialState = {

cp: 0
};
// Actions
const increment = () => ({
type: 'INCREMENT'
});
const decrement = () => ({

type: 'DECREMENT'
});
// Réduction pour mettre à jour l'état

const reducer = (state = initialState, action) => {
case 'INCREMENT':
return {
cp: state.cp + 1
};
case 'DECREMENT':
return {
cp: state.cp - 1
};
default:
return state;
}
};
// Créer un magasin Redux

const store = createStore(reducer);
// Composant React
function Application(props) {
return (
<div>
<p>Compteur: {props.cp}</p>
<button onClick={props.increment}>Incrémenter</button>
<button onClick={props.decrement}>Décrémenter</button>
</div>
);
}
// Connecter le composant React au magasin Redux

const mapStateToProps = state => ({
cp: state.cp
});
const mapDispatchToProps = dispatch => ({

increment: () => dispatch(increment()),
decrement: () => dispatch(decrement())

});
const ConnecteApplication = connect(

mapStateToProps,
mapDispatchToProps
)(Application);
// Rendre le magasin disponible pour tous les composants de l'application

function App() {
return (
<Provider store={store}>
<ConnecteApplication />
</Provider>
);
}
export default App;
Explication:
• mapStateToProps : mapStateToProps est une fonction utilisée en React avec Redux

qui permet de mapper/connecter l'état du store Redux à des props de composant
React. Elle permet d'accéder à l'état du store et de le passer au composant sous forme
de props.
• mapDispatchToProps : mapDispatchToProps est une fonction utilisée en React avec

Redux qui permet de connecter les actions du store Redux à des props de composant
React. Elle permet d'envoyer des actions au store via des props du composant.
• Provider : Provider est un composant React de la bibliothèque Redux qui fournit

l'accès au store de l'application à tous les composants de l'application qui en ont besoin.
Il enveloppe l'application en haut de la hiérarchie des composants et permet de
configurer le store pour l'ensemble de l'application.
Exemple 02 :
import React, { useEffect } from 'react';

import { createStore, combineReducers } from 'redux';
import { Provider, connect } from 'react-redux';
const data = [
{ id: 1, nom: 'KAMAL Mohamed', age: 30 },
{ id: 2, nom: 'Hicham Saadi', age: 25 },
{ id: 3, nom: 'Dahbi Naim', age: 35 },
];

const CHARGER_STAGIAIRE = 'CHARGER_STAGIAIRE';
const chargerstagiaires = stagiaires => ({

type: CHARGER_STAGIAIRE,
stagiaires,
});
const stagiairesReducer = (state = [], action) => {

case CHARGER_STAGIAIRE:
return action.stagiaires;
default:
return state;
}
};
const store = createStore(combineReducers({ stagiaires: stagiairesReducer }));
const StagiairesListe = ({ stagiaires, dispatch }) => {

useEffect(() => {
dispatch(chargerstagiaires(data));
}, [dispatch, data]);
return (
<ul>
{stagiaires.map(s => (
<li key={s.id}>
Nom: {s.nom}, Age: {s.age}
</li>
))}
</ul>
);
};
const mapStateToProps = state => ({

stagiaires: state.stagiaires,
});
const ConnecteListeStagiaires = connect(mapStateToProps)(StagiairesListe);
const App2 = () => (

<Provider store={store}>
<ConnecteListeStagiaires />
</Provider>
);
export default App2;

Cours React Vs

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours React Vs

Transféré par

Droits d'auteur :

Formats disponibles

OFPPT/ISGI Khouribga Module : développement Front-End (ReactJS)

I. Généralité ReactJS ........................................................................................................................... 2

Par : Hassan IBNOEL FATA Page : 1 Filière : FullStack

Par : Hassan IBNOEL FATA Page : 2 Filière : FullStack

npm install -g create-react-app

Pour créer un projet appelé premiertest, Veuillez exécuter cette commande:

npm, npx et Yarn

- npx (Node Package eXecute)

Par : Hassan IBNOEL FATA Page : 3 Filière : FullStack

3- Lier React au DOM

import App from './App';

- Tout d’abord, qu’est-ce que le DOM ?

Par : Hassan IBNOEL FATA Page : 4 Filière : FullStack

Code source App.jsx

Par : Hassan IBNOEL FATA Page : 5 Filière : FullStack

Code source App.jsx

Par : Hassan IBNOEL FATA Page : 6 Filière : FullStack

Code source App.jsx

Code source App.jsx

Par : Hassan IBNOEL FATA Page : 7 Filière : FullStack

Code source App.jsx

Par : Hassan IBNOEL FATA Page : 8 Filière : FullStack

L'exemple suivant montre comment ajouter myStyle inline à l’élément h1.

Code source App.jsx

{//End of the line Comment...}

{/*Multi line comment...*/}

Par : Hassan IBNOEL FATA Page : 9 Filière : FullStack

export default function App(){

Ceci est expliqué sur la page officielle de React comme -

Créer le fichier App.css

Par : Hassan IBNOEL FATA Page : 10 Filière : FullStack

export default function App(){

II. ReactJS - Composants

1- Exemple sans état

Code source App.jsx

Par : Hassan IBNOEL FATA Page : 11 Filière : FullStack

Code source App.jsx

Par : Hassan IBNOEL FATA Page : 12 Filière : FullStack

L'utilisation de useEffect dans un composant permet de spécifier les effets de composant

Code source App.jsx

export default function App() {

// Effet pour mettre à jour le titre du document lorsque le

Par : Hassan IBNOEL FATA Page : 13 Filière : FullStack

<p>Clic numéro : {cp}</p>

import React, { useState, useRef } from 'react';

export default function App() {

const Calculer = event => {

Par : Hassan IBNOEL FATA Page : 14 Filière : FullStack

NB : event.preventDefault()➔est une méthode de l'objet Event en JavaScript qui

Par : Hassan IBNOEL FATA Page : 15 Filière : FullStack

import React, { useReducer } from 'react';

const initialState = { cp: 0 };

function reducer(state, action) {

Par : Hassan IBNOEL FATA Page : 16 Filière : FullStack

Avec useContext, vous pouvez définir un contexte global en utilisant la fonction

IV. ReactJS - Props

Voici un exemple simple d'utilisation de props :

import React from 'react';

export default function App() {

Par : Hassan IBNOEL FATA Page : 17 Filière : FullStack

i. Installez React Router en utilisant npm ou yarn :

npm install react-router-dom

yarn add react-router-dom

import { BrowserRouter as Router, Route, Link } from "react-

{/Multi line comment.../}