Développent
Front-end
Creation de Application
• Structure d’un project React :
• Créer et Démarrer une Application React
npx create-react-app
cd folder-name
npm start
• Pour installer les dépendances :
npm install dependence_name
Class VS Function Component
• Class : • Function :
JSX
HTML JSX
Class className
<input type=“text” > √ <input type=“text” > ×
<input type=“text” /> √
ALL TAGS MUST BE CLOSE
for htmlFor
onclick,onchange,onfocus… onClick,onChange,onFocus…
Tags that are meant to be output as HTML (<p> </p>) must be all lowercase.
Tags that reference React components ( <SideBar /> must be UpperCamelCase.
Utilisataion de javascript en JSX :
Exemple : <p> age : { 2022-1999 } </p>
Props
Hooks :
useState & useEffect
Router :
• Installation de react-router-dom
• Importer BrowserRouter , Routes (Switch for version 5 and older) et Route
• Comment utiliser le routage ?
1ére Etape : (BrowserRouter ou HashRouter)
2éme Etape : Routes & 3éme Etape : Link to
Route
consommer un API :
Fetch || Axios
Axios : [Link]()
Axios : [Link]()
Axios : [Link]()
TRAVAUX PRATIQUES
1- Créer un fichier JSON nommé "[Link]" dans le dossier src et remplie le avec les
données de liste produits.
2-Ecrire le code JS qui retourne les produits de la famille INFO qui ont le prix
supérieure à 80
3-Ecrire le code JS qui calcule la Moyenne des prix des produits
4-Ecrire le code JS qui détermine le nom du produit le plus cher
5-Ecrire le code JS qui créée un autre tableau produits2 contenant les éléments du
tableau produits en supprimant le produit qui a le ID = 33
☻☺ Pour Q1 & Q2 & Q3 Créer un component qui gère les états et affiche le
Dans [Link]
Ajouter aux "scripts" :
"json-serve": "json-server --watch src/[Link] --port
3001"
<h1>Le nom de Produit le plus Cher est : {mostExpensiveProduct}
</h1>