Introduction à React :: App Web

Notions de base

Mon, 01 Jan 0001 00:00:00 +0000

Libraire vs Frameworks Librairie Une collection de code réutilisable Réduit le besoin d’écrire des choses complexes et répétitives en partant de zéro Offre une grande liberté d’utilisation (possible de contrôler comment et quand elle est utilisée dans un projet) Peu de contraintes sur la structure du projet Framework (cadriciel) Architecture prédéfinie : Il faut suivre un “pattern” de développement (une façon de développer) spécifique au framework. Il faut travailler dans les limites établies par le framework. “Bonnes” et “mauvaises” façons d’utiliser un framework. Un framework peut utiliser des librairies Historique

Pourquoi React?

Mon, 01 Jan 0001 00:00:00 +0000

Avantages Forte demande sur le marché du travail Communauté très active Écosystème riche Peu de “magie cachée” Approche déclarative et composable Développement actif et durable Particularités Virtual DOM L’une des forces majeures de React est l’utilisation du Virtual DOM qui une représentation en mémoire du DOM réel. À chaque changement d’état de l’application, React compare l’ancienne version et la nouvelle version du Virtual DOM afin de n’appliquer que les modifications strictement nécessaires au navigateur. Cette optimisation améliore considérablement les performances et permet à React d’être rapide et efficace, même avec des interfaces complexes.

Premier projet React

Mon, 01 Jan 0001 00:00:00 +0000

Pré-requis: Node et npm installés. Pour créer un projet React, nous allons utiliser l’outil Vite : npm create vite@latest Dans Project name, tapez un nom pour votre projet Dans Select a framework, sélectionnez React Dans Select a variant, sélectionnez JavaScript Ensuite, rendez vous dans le répertoire nouvellement crée, lancez la commande npm install puis npm run dev : cd NOM_DU_PROJET npm install npm run dev Structure d’un projet React Le répertoire où l’application a été créée contient trois sous-répertoires:

JSX

Mon, 01 Jan 0001 00:00:00 +0000

React a introduit la syntaxe JSX, une extension de JavaScript qui permet d’écrire du HTML directement dans le code JS. Cette combinaison rend le développement plus intuitif et favorise une meilleure organisation de l’interface. ReactElement et createElement() JSX peut donner l’impression que React écrit du HTML, mais ce n’est pas vraiment le cas. Sans JSX import { createElement } from "react" const reactElement = createElement("h1", null, "Hello de createElement!") Ce code ne crée pas un élément HTML mais un objet JavaScript appelé ReactElement qui possède toutes les propriétés nécessaires à React pour render l’élément. Vous pouvez faire un console.log(reactElement) afin d’explorer les différentes ropriétés de cet objet.

Règles et bonnes pratiques

Mon, 01 Jan 0001 00:00:00 +0000

Composants Un composant React doit obligatoirement: être une fonction JS ; commencer par une majuscule (PascalCase) ; retourner un seul élément parent. Si plusieurs éléments sont nécessaires, on utilise un élément qui les englobe (

ou autre) ou un Fragment : <>

Exercice dirigé

Mon, 01 Jan 0001 00:00:00 +0000

Page HTML en composants JSX L’objectif de cet exercice est de recréer cette page web en utilisant React et des composants JSX bien structurés. Vous devrez décomposer le code HTML fourni en plusieurs composants réutilisables et les organiser dans des fichiers distincts. Exercice dirigé

Entrez, et bienvenue sur ma page

J'aime le développement web, et vous allez comprendre pourquoi à l'instant.

Je peux y être créatif !

Le développement web me permet d'explorer ma créativité en concevant des interfaces uniques et interactives.

Je peux construire des choses utiles.

Avec le code, je peux résoudre des problèmes concrets et créer des applications qui aident les gens au quotidien.

Les technologies évoluent rapidement, et ça me garde à l'affût.

Le secteur est en constante évolution, ce qui me pousse à apprendre et à rester à jour avec les nouvelles tendances.

On peut remarquer que les éléments de notre liste partagent la même structure (image, titre, description), seules les informations varient. Il serait tellement plus utile d’utiliser un seul composant ListItem pour afficher plusieurs éléments avec des contenus différents…