ReactJs

A.Karim

1
2
 Rappel JavaScript

3
4
5
6
7
 let ,var et const
Scope : let et const sont BlockScoped

Redeclaration : on ne peut pas redéclarer

let et const(ce qui nous évite les bugs : lors
de l’utilisation des librairies externes)

Hoisting : appel avant la declaration

var est global (on peut y accéder depuis

l’objet window)

8
 Fonction flechées (arrow
functions)

function addn(a,b)
const add=(a,b)=>{
{

return a+b;
return a+b;
}
}
console.log(addn(5,8));
console.log(add(1,3));

const add=(a,b)=> a+b;

const pow=a=> a*a;

9
 Spread (tableaux et objets)
const arr = [1,2,3];
const arr2 = [...arr, 4]

console.log(arr2);

const myObj = {
a: 1,
b: 2,
c: 3
}
const myObj2 = {
...myObj,
d: 4
}

console.log(myObj2);
10
 Rest
/*let
obj={age1:13,age2:12,age3:23};

for(let key in obj)

{
const add=(...args)=>
{ console.log(obj[key]);
console.log(args);
let result = 0;
for(let arg of args){ // for of pour les tableau }
// for in pour */
les objets

result += arg; let arr=[1,2,3];

}
return result; for(let i of arr)
} {
console.log(i);
console.log(add(2,2,20,50,900)); }

11
 fonction d'ordre général :(HOF :
Higher-order function)
Ce sont des fonctions qui prennent une
autre fonction en paramètres ou qui en
retourne une autre ou les deux.

12
 const rawArr = [5, 6, 5889, 52, 415, 120];
function supArr(arr, fn)
{
const newArr = [];
for (let i = 0; i < arr.length; i++)
{
if (fn(arr[i]))
{
newArr.push(arr[i]);
}
}
return newArr;
}

13
 const arrSup100 = supArr(rawArr, (item) =>
{ if(item > 100){
return item;
}})
const arrSup10 = supArr(rawArr, (item) =>
{ if(item > 10){
return item;
}})
console.log(arrSup100);
console.log(arrSup10);

14
 map , filter et forEach (array)

const arr = [1,2,3,4,5,6];

const mapedArr = arr.map(x => x + 10); // return

console.log(mapedArr);

const filteredArr = arr.filter(num => num > 2) // return

console.log(filteredArr);

arr.forEach(val =>
{ console.log(val - 90);
})

15
 detructuring
possibilité d'affecter un objet ou un tableau

const pays = { nom: "Italie", pop: 60}

const {nom, pop} = pays; // pays.nom // pays.pop

ou un tableau à un autre

const arr = [1,2,3];

const [a,b,c] = arr; // a= arr[0] // b=arr[1] // c=arr[2]

16
 -React est une bibliothèque JavaScript libre développée par
Facebook depuis 2013.

-Le but principal de cette bibliothèque est de faciliter la

création d'application web monopage (spa single page
application)

17
Le DOM virtuel (VDOM) est un concept de
programmation dans lequel une représentation
« virtuelle », d’une interface utilisateur (UI) est
conservée en mémoire et synchronisée avec le
DOM « réel » par une bibliothèque telle que
ReactDOM. Ce processus s’appelle
réconciliation.
 Créer react application :

Installer nodejs

Executer la commande :

npm install -g create-react-app

Executer la commande :

npx create-react-app nom_application

22
 fichiers
Public/index.html : l’application va se
charger dans le div root (single page
application)

Dossier source : écrire les traitements js

(création des components)

SRC/index.js : sert à retourner l’application

dans le div root

23
 JSX
 En anglais, c'est pour javascript xml.
 ça va nous permettre d'écrire du html (fermer chaque
balise+minuscule)en javascript.
function App() {
return (
<div className="App">
<h1 className="App-header">Hello
</h1>
{5+5}
{0?100:'ABC'}

</div>
);

24
 Activer emmet(jsx)
Setting---(extension)emmet

25
 Setting (ouvrir setting.json) et ajouter:

"emmet.includeLanguages": {

"javascript":"javascriptreact"

26
27
 Premier composant
Dans le dossier SRC créer un fichier js
(exemple : Item.js)
rfcfunction
: (React
Item() { Function Components)
return (

<h1 className="App-header">Hello From

Item
</h1>
);

}
export default Item;

Installer l’extension ES7 React (rfc : créer component)

28
 rcc:(React Class Components)

import React, { Component } from 'react'

export default class Item extends Component {

render() {
return (
<div>
<h1> Hello class component </h1>
</div>
)
}
}

29
 Utiliser le composant
import logo from './logo.svg';
import './App.css';
import Item from './Item'

function App() {
return (
<div className="App">
<h1 className="App-header">Hello
</h1>
<Item/> Retourner un bloc
</div>
);

export default App;

30
 state
State : donnée d’un composant

import { useState } from 'react';

31
 import { useState } from 'react';

function App() {

let [mystate,setmystate]=useState(10);
let [mystate2,setmystate2]=useState(20);
const modify =()=>{
setmystate(20);
}
return (
<div className="App">
<h1 className="App-header" onClick={modify}>Hello
</h1>
{mystate}
{mystate2}
</div> );
}
32 export default App;
 props
Un objet(qui peut contenir des attributs ou
des méthodes) (passé par le parent : qui
utilise le composant fils)
Fils Parent

function Item(props) {
return (
<Item txt='hello
<h1 className="App-
header">{props.txt} 1'/>
</h1> <Item txt='hello
);
2'/>
}
export default Item;

33
 Appliquer css
Méthode 1:

<h1
style={{ color:'red',textDecoration:'und
erline' }}

 let ok=true;
 <h1 style={{ color: ok ? 'red' :
'white',textDecoration:'underline' }}

34
 Méthode 2 : dans un fichier CSS

import './itemcss.css';
function Item(props) {
let ok=true;
return (

<h1 className="c1" >{props.txt}-{props.number}

</h1>
);

}
export default Item;
35
 Les images
import nom_image from
'./nom_image.jpg';
<img src={nom_image } />
Ou bien :

<img src={"http:\\ ………….. "} />

On peut utiliser les images svg comme des

composants
Import {ReactComponent as im } from ‘….svg’

36
 1-installer bootstrap : npm install
bootstrap

2-importer bootstrap :
 import
'../node_modules/bootstrap/dist/css/bootstrap.min.css';

Créer un dossier components dans lequel

vous créez components Form.js et Item.js

37
 input
const [inputdata,setinputdata]=useState();

const changedata=(e)=>{

setinputdata(e.target.value);
console.log(inputdata);
}

<input type="text" onChange={e=>changedata(e)} />

38
 TP1_Calculatrice

39
 Rendu conditionnel
const [toggle, setToggle] = useState(true);

const changeState = () => {

setToggle(!toggle);
};

let toggleContenu;

if (toggle) {
toggleContenu = <h1>Le state est True</h1>;
} else {
toggleContenu = <h1>Le state est False</h1>;
}

return(

<div className="App">
{toggleContenu}
<button onClick={changeState}>Change state</button>
</div>

);

40
 Toggle de class CSS
const [toggle, setToggle] = useState(false);
.box {
const changeState = () => { width: 200px;
setToggle(!toggle); height: 200px;
}; background: salmon;
margin: 30px;
return ( transition: transform 0.4s;
<div className="App">
<div className={toggle ? "box animated" : }
"box"}></div> .animated {
<button onClick={changeState}>Change background: lightblue;
state</button> transform: scale(1.3);
</div> }
);

41
 Créer des listes (map)
const [dataArr, setDataArr] = useState([
{nom: "Nom1"},
{nom: "Nom2"},
{nom: "Nom3"}
]);

return (
<div>
<ul>
{dataArr.map((item, index) => {
console.log(index);
return <li key={index}>Nom : {item.nom}</li>
})}
</ul>
</div>
);
42
 TP2_slider images

43
 TP3_Todo-List

44
 Form.js import {useState} from 'react';

export default function Form() {

return (
<div className="m-auto px-4 col-12 col-sm-10 col-lg-6">

<form className="mb-3">

<label htmlFor="todo" className="form-label mt-3">Chose à

faire</label>

<input type="text" className="form-control" id="todo" />

<button className="mt-2 btn btn-primary

d-block">Envoyer</button>
</form>

<h2>Liste des choses à faire</h2>

<ul className="list-group"></ul>

</div>
);

45
 Au niveau de la page App.js :

import './App.css';
import
'../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Form from './components/Form'

function App() {
return (
<div className="App">

<h1 className="textcenter mt3">ToDo-List</h1>

<Form/>

</div>
);
}

export default App;

46
 Item.js
export default function Item() {
return (
<div>
<li className="border d-flex justify-content-between align-item-
center p-2 m-2">

<div className="p-3">txt</div>

<button className="btn btn-danger p-2 h-50">Supprimer</button>

</li>
</div>
)
}

47
 import './App.css';
import
'../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Form from './components/Form‘
import Item from './components/Item'

function App() {
return (
<div className="App">

<h1 className="textcenter mt3">ToDo-List</h1>

<Form/>

<Item/><Item/><Item/><Item/>

</div>
);
}
48
export default App;
 Afficher la liste
Au niveau du component Form on va créer
la liste des taches sous forme de state

const [dataArr,setDataArr]=useState([
{txt:'Sport'},
{txt:'regarder Film'},
{txt:'Coder en React'}

])

49
 Au niveau du component Item on va
ajouter des props
export default function Item(props) {
return (
<div>
<li className="border d-flex justify-content-between
align-item-center p-2 m-2">

<div className="p-3">{props.txt}</div>

<button className="btn btn-danger p-2 h-

50">Supprimer</button>

</li>
</div>
)
}

50
 import {useState} from 'react';
import Item from './Item';
Iterating & Rendering with export default function Form() {
Loops in React components
const [dataArr,setDataArr]=useState([
(use map) {txt:'Sport'},
{txt:'regarder Film'},
{txt:'Coder en React'}

])

return (
<div className="m-auto px-4 col-12 col-sm-10 col-lg-6">
<form className="mb-3">
<label htmlFor="todo" className="form-label mt-3">Chose à
faire</label>
<input type="text" className="form-control" id="todo" />
<button className="mt-2 btn btn-primary
d-block">Envoyer</button>
Item Form </form>
<h2>Liste des choses à faire</h2>
<ul className="list-group">
{dataArr.map((item,index)=>{
return(

<Item
txt={item.txt}
key={index}

/>
)
})}

</ul>
</div>
);
}
51
 ID et suppression
1- installer l’extension uuid : npm install uuid
Pour générer id

<Item
txt={item.txt}
key={index}

/>
2- import { v4 as uuidv4 } from 'uuid';

52
 import {useState} from 'react';
import Item from './Item';
export default function Form() {

const [dataArr,setDataArr]=useState([
{txt:'Sport‘,id:uuidv4()},
{txt:'regarder Film‘, id:uuidv4()},
{txt:'Coder en React‘, id:uuidv4()}

])

return (
<div className="m-auto px-4 col-12 col-sm-10 col-lg-6">
<form className="mb-3">
<label htmlFor="todo" className="form-label mt-3">Chose à
faire</label>
<input type="text" className="form-control" id="todo" />
<button className="mt-2 btn btn-primary
d-block">Envoyer</button>
</form>
<h2>Liste des choses à faire</h2>
<ul className="list-group">
{dataArr.map(item=>{
return(

<Item
txt={item.txt}
key={item.id}

/>
)
})}

</ul>
</div>
);
}
53
 Créer la fonction
deleteElement
Pour pouvoir appeler une méthode depuis
le component fils il faut déclarer la
méthode dans les props

54
 import {useState} from 'react';
import Item from './Item';
import { v4 as uuidv4 } from 'uuid';
export default function Form() {

const [dataArr,setDataArr]=useState([
{txt:'Sport',id:uuidv4()},
{txt:'regarder Film',id:uuidv4()},
{txt:'Coder en React',id:uuidv4()}

])
import React from 'react'
const deleteelement=id=>{
console.log(id);
export default function Item(props) { }
return (
<div> return (
<li className="border d-flex justify-content-
,,,,,,,,,,,,,,,,,,,,,
between align-item-center p-2 m-2"> <h2>Liste des choses à faire</h2>

<div className="p-3">{props.txt}</div>
<ul className="list-group">
<button onClick={props.delFunc} className="btn btn- {
danger p-2 h-50">Supprimer</button> dataArr.map(item=>{
return(

</li> <Item
</div> txt={item.txt}
key={item.id}
) id={item.id}
} delFunc={()=>deleteelement(item.id)}
/>
)
})

</ul>
</div>
);
55 }
 Supprimer l’element cliqué
On va utiliser la méthode filter du tableau
pour créer un nouveau tableau qui contient
tous les éléments du tableau dataArr sauf
celui cliqué

56
 import {useState} from 'react';
import Item from './Item';
import { v4 as uuidv4 } from 'uuid';
export default function Form() {

const [dataArr,setDataArr]=useState([
{txt:'Sport',id:uuidv4()},
{txt:'regarder Film',id:uuidv4()},
{txt:'Coder en React',id:uuidv4()}

])

const deleteelement=id=>{
const nvtab=dataArr.filter(element=>{
return element.id!=id;

})

setDataArr(nvtab);
}

57
 Ajouter une tache
const [stateInput, setStateInput] = useState();

const modifyinput = e => {

setStateInput(e);

const addTodo = e => {

e.preventDefault();
const newArr = [...dataArr]
const newTodo = {};
newTodo.txt = stateInput;
newTodo.id = uuidv4();
newArr.push(newTodo);
setDataArr(newArr);
setStateInput('')
58 }
 <form onSubmit={e => addTodo(e)} className="mb-3">
<label htmlFor="todo" className="form-label mt-
3">Chose à faire</label>
<input
value={stateInput}
onChange={e => modifyinput(e.target.value)}
type="text"
className="form-control"
id="todo"/>
<button className="mt-2 btn btn-primary d-
block">Envoyer</button>
</form>

59
 TP4 Multi step validation

60
 Règles des Hooks
Utiliser dans le début des fonctions
(Component)

Utiliser dans des fonctions composants

Hooks cannot be conditional

61
 Hook useEffect
Permet de surveiller un ou plusieurs states .

useEffect(()=>{

},[ ])

Tableau de states

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

export default function Form() {

Exemple : const [data1,setdata1]=useState(1);

const [data2,setdata2]=useState(1);

const update=()=>{

setdata1(data1+1);

}
useEffect(()=>{
console.log("Update state 1");

},[data1]

return (
<div>
<h1>{data1}</h1>

<h1>{data2}</h1>

<h2 onClick={update}>update </h2>

</div>
)
}

63
 Si le tableau des states est vide , Le
traitement de useEffect sera exécuté une
seule fois

64
 Exemple : Appel d’une API

https://api.thecatapi.com/v1/images/search

Tester avec Postman

65
 function App() {

const [imgdata,setimgdata]=useState('');

useEffect(()=>{

fetch('https://api.thecatapi.com/v1/images/search').
then(response=>{
return(response.json())
}).
then(data=>{
//console.log(data[0].url)
setimgdata(data[0].url);

},[])

return (
<div className="App">
{imgdata && <img src={imgdata} style={{ width:"300px",height:"300px"}}
/>}
</div>
);
66 }
 React fragment

return (
<>
<h1></h1>
<h1></h1>
<h1></h1>
,,,,,,,,,,,,

</>
);

67
 Props.children

import React from 'react'

export default function Content(props) {

return (
<div className="content">
{props.children}
</div>
)
}

<Content>
<h1>Titre de mon article 1</h1>
<p>Lorem ipsum dolor sit amet.</p>
</Content>

68
 Système de routes
React-router

69
 Installation et première route
npm install react-router-dom

Au niveau de la page index.js:

import {BrowserRouter} from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);

70
 Au niveau de la page app.js
import {Routes,Route} from 'react-router-dom'
import Home from './components/Home';
import Profil from './components/Profil';

function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/profil" element={<Profil />} />

</Routes>
</div>
);
}

export default App;

71
 Navbar.js
import './Navbar.css'
import {Link} from 'react-router-dom'

export default function Navbar() {

return (

<div className="nav-top">
<Link to="/">ACCUEIL</Link>
<Link
to="/produits">PRODUITS</Link>
<Link to="/contact">CONTACT</Link>
</div>
)
}

72
 Navbar.css
.nav-top {
margin: 75px auto 50px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 700px;
background: #333;
border-radius: 3px;
padding: 0px 20px;
box-shadow: 0 10px 20px rgba(19, 19, 19, 0.2);
}

.nav-top a {
font-size: 22px;
text-decoration: none;
color: #f1f1f1;
padding: 20px 20px;
73 }
 API de context

74
 API de context
Un statemanager : un outil pour gérer des
states (qui ne changent pas plusieurs fois
durant l’utilisation de l’application
exemple : darkmode/lightmode , changer la
langue, authentification)

75
 Mise en place
Créer un dossier Components qui contient
deux dossier :

BtnToggle (BtnToggle.js et BtnToggle.css)

Content (Content.js et Content.css)

76
 BtnToggle.js

import React from 'react'

export default function BtnToggle() {

return (

<button className="btn-
toggle">Toggle</button>

)
}

77
 BtnToggle.css
.btn-toggle {
position: absolute;
top: 10px;
right: 10px;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
outline: none;
}

.dark-btn {
color: #fff;
background: #222;
}
78
 Content.js

<div className="container">
<BtnToggle />
<h1>Lorem ipsum dolor sit
amet.</h1>
<p className="content-txt">
Lorem ipsum dolor sit amet </p>
</div>

79
 Content.css

.container {
padding: 50px 10vw;
}
.content-txt {
text-align: justify;
}

.dark-body{
background: #222;
color: #f1f1f1;
}

80
 Créer un context
Créer un context ThemeContext qui
contient un component avec des states à
partager

81
 import React, {createContext, useState} from 'react';

export const ThemeContext = createContext();

const ThemeContextProvider = props => {

const [theme, setTheme] = useState('Hello Context')

const [theme2, setTheme2] = useState('Hello Context 2')

return (
<ThemeContext.Provider value={{theme,theme2}}>
{props.children}
</ThemeContext.Provider>
)

}
export default ThemeContextProvider;

82
 Utilisation des states
import './App.css';
import Content from
'./Components/Content/Content'
import ThemeContextProvider from import {ThemeContext} from
'./Context/ThemeContext'; '../../Context/ThemeContext'

function App() { export default function Content() {

return (
<div className="App"> const {theme,theme2} =
<ThemeContextProvider> useContext(ThemeContext)
<Content />
</ThemeContextProvider> console.log(theme);
</div>
); console.log(theme2);
}

export default App;

83
 Exemple : dark-mode
import React, {createContext, useState} from 'react';

export const ThemeContext = createContext();

const ThemeContextProvider = props => {

const [theme, setTheme] = useState(false)

const toggleTheme = () => {

setTheme(!theme)
}

if(theme){
document.body.classList.add('dark-body');
} else {
document.body.classList.remove('dark-body');
}

return (
<ThemeContext.Provider value={{toggleTheme, theme}}>
{props.children}
</ThemeContext.Provider>
)

}
export default ThemeContextProvider;
84
 import React, {useContext} from 'react'
import './BtnToggle.css'
import {ThemeContext} from '../../Context/ThemeContext'

export default function BtnToggle() {

const {toggleTheme, theme} = useContext(ThemeContext)

return (
<button
onClick={toggleTheme}
className={theme ? "btn-toggle dark-btn " : "btn-toggle "}>
{theme ? "LIGHT" : "DARK"}
</button>
)
}

85
 import React, {useContext} from 'react'
import BtnToggle from '../BtnToggle/BtnToggle'
import './Content.css'

import {ThemeContext} from '../../Context/ThemeContext'

export default function Content() {

const {theme} = useContext(ThemeContext)

console.log(theme);

return (
<div className="container" >
<BtnToggle />
<h1>Lorem ipsum dolor sit amet.</h1>

<p className="content-txt">

quidem impedit officiis dolorem sunt architecto deserunt ducimus quas facilis aliquid expedita quaerat provident nam
eligendi </p>
</div>
)
}

86
 TP_5 multi langues

87
 TP_6 Chartjs

88
89
 C’est un gestionnaire de states

90
 npm install redux

npm install react-redux

91
 Créer un reducer

92
 Au niveau de la page index.js
Créer un store qui contient un Reducer

93
 Lecture du state useSelector

94
 Utiliser le reducer pour changer le
state

95
 Au niveau du component
(useDispatch)

96
 Dispatch avec payload

97
 Combiner plusieurs Reducers
Créer un fichier store.js

98
 Au niveau de index.js

99
 TP_Full Stack Shop

10
0
10
1
10
2