Les Bases de React

Prenons le temps !

5 heures !!! Je ne m'y attendais pas 😱

Le temps de comprendre :

⏩la création d'un composant
⏩React Router Dom
⏩les props
⏩useState
⏩useEffect
⏩useContext ou le Context API
⏩la manipulation du Local Storage
⏩les notification avec Sonner

Et tout ça dans un projet React stylisé avec TailwindCSS

Ici, restons simples et voyons ensemble l'essentiel !

La vidéo

( plus que le Seigneur des Anneaux version longue ! )

En résumé, nous avons vu ici :

La déclaration d'une variable et la modification de son State qui se répercute sur l'affichage instantanéement,

sans recharger la page compkète mais juste le composant la contenant :

import {useState} from 'react'

const [variable, setVariable] = useState("valaur initiale")

setVariable("nouvelle valeur")

Et Voilà !!! Une nouvelle valeur s'affiche sur votre application !

Le lancement d'une opération / fonction au lancement de la page et rappel sous certaines conditions :

import {useEffect} from 'react'

useEffect(()=>{

fonction foo()

),[variable]}

ici, la fonction foo() se lancera au premier render de la page puis sera rappelée à chaque modification du State de "variable".
Le tableau peut être vide pour un lancement uniquement au premier render de la page.

Les props sont des informations qu'un composant parent envoie à un composant enfant

<Composant propsExemple = {bg-red-500}/>

Avec un composant

export default function Button({propsExemple }) {

return(

<button className={`px-2 py-1 ${propsExemple }`}

)

}

Le composant parent affichera ici 2 bouttons avec des background différents, rouge et bleu.
Les bg sont passés en props, ici {propsExemple}, une destructuration de props.propsExemple

Voilà pour les principales fonctionnalités basiques de React !

Facile non ?