seance5 cours 1

Pour vocation pédagogique, et pour démarrer un projet React avec le minimum de fichiers. dans un premier temps on va :

Supprimer tous les fichiers qui se trouvent dans le dossier src Supprimer tous les fichiers qui se trouvent dans le dossier public sauf le fichier index.html

Dans le dossier src ajouter le fichier index.js Voir contenu du fichier index.js // 1) importer React et ReactDOM import React from 'react'; import ReactDOM from 'react-dom/client' //2) faire reference à div id=root de index.html const element=document.getElementById("root"); //3) prendre le controle de l'element par React const root=ReactDOM.createRoot(element) // 4) Creation d'un composant (component) //un composant est une fonction qui retourne jsx function App(){ return( <h1>salut Dev</h1>

Un composant est fonction qui retourne de JSX Ou une classe qui hérite de la classe React.Component possédant la fonction render qui retourne du JSX

Etape 1 : // 1) importer React et ReactDOM import React from 'react'; import ReactDOM from 'react-dom/client'

Le package react-dom/client fournit des méthodes spécifiques au client utilisées pour initialiser une application sur le client. La plupart de vos composants ne devraient pas avoir besoin d'utiliser ce module.

Etape 2 : //2) faire reference à div id=root de index.html const element=document.getElementById("root");

on crée une référence vers l’élément div id=’root’ de la page public/index.html (la page index.html contient <div id= ‘root’></div>) C’est dans cette élément que React va injecter le code HTML Etape 3 :

On prend le contrôle de l’élément div id=’root’ de la page public/index.html par React Créez une racine React pour le conteneur fourni et renvoyez la racine. La racine peut être utilisée pour restituer un élément React dans le DOM avec render :