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.

 

Source : https://medium.com/@emmanuelodii80/bye-bye-usestate-useeffect-revolutionizing-react-development-d91f95891adb

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>
  );
}

Voir l'ensemble des icônes disponibles.