coopernet Réussir son site web et ses applications de la conception à la réalisation

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.