Route
Permet de gérer des routes locales en js
Mise en place :
npm install react-router-dom
Attention depuis la version 6, react-router-dom offre un mécanisme complet pour gérer non seulement les routes mais aussi les "actions" et les "loaders":
- Les actions sont appelées chaque fois que l'application envoie une soumission autre que "get" ("post", "put", "patch", "delete") à votre route. Cela peut se produire de plusieurs manières.
- les "loaders" sont des fonctions qui seront appelés après le montage ou à la modification d'un component pour aller récupérer des données.
Il faut notamment bien comprendre :
- comment définir un "route loader" qui a pour responsabilité d'aller chercher la donnée. Ex :
export async function LoaderFunction () { const request = await fetch('http://localhost:3004/file'); if (!request.ok) throw new Error ('Failed to fetch item') const item = await response.json(); return item; };
- où lier les "route loader" à des routes soit au moment de la définition de la route. Par exemple :
<Route index element={<HomeComponent /> } loader={HomeLoader}/>
- comment récupérer la données au sein d'un composant en utilisant le hook "useLoaderData". Par exemple :
import { useLoaderData } from "react-router-dom" const HomeComponent = () => { const data = useLoaderData(); return ( {data.map((foundData) => ( {foundData.name} ))} ) } export default HomeComponent;
Documentation :
https://reactrouter.com/en/main/start/tutorial
eslint-plugin-react-hooks
Renforces les lois des hooks (plus de messages en cas de mauvaise utilisation des hooks)
Mise en place :
npm install eslint-plugin-react-hooks --save-dev
Documentation : https://www.npmjs.com/package/eslint-plugin-react-hooks
React-icons
npm install react-icons --save
Cf https://www.npmjs.com/package/react-icons
Permet d'utiliser uniquement les icônes dont on a besoin.
Exemple :
import { FaBeer } from "react-icons/fa"; function Question() { return ( <h3> Lets go for a <FaBeer />? </h3> ); }