مكتب الوثائق

سيرة ذاتية أُخفيت هويتها آلياً: حُذف الاسم وبيانات الاتصال والروابط. العبارات بين معقوفتين تعوّض معلومة محذوفة.

سيرة ذاتية مجهولة الهوية

ND-CV-52E1D08D

تطوير البرمجيات (غير متخصص)

المغرب الهوية وبيانات الاتصال تقدمها NextData

React : introduction

[nom]

Docteur de l’université d’Aix-Marseille

Chercheur en programmation par contrainte (IA)

Ingénieur en génie logiciel

[e-mail]

H & H: Research and Training · 1 / 58

Introduction

React

Framework

Plusieurs traductions

cadriciel

environnement de développement

cadre d’applications · L MO

... · e f E

ch r

Ensemble de A composants logiciels

H I

U EL

Facilitant la réalisation d’une (partie de l’) application

Imposant une certaine structure, logique, syntaxe...

H & H: Research and Training

2 / 58

Introduction

React

Plusieurs types de Framework

Frameworks applicatifs pour le développement d’applications web :

Angular, React, Vue.js pour JavaScript,

Spring pour Java,

Symfony, Laravel pour PHP

...

fE L Frameworks de présentation de contenu web :

c h re

Bootstrap, Tailwind pour CSS

...

Frameworks de persistance

Frameworks de logging

...

H & H: Research and Training

H I

UEL

3 / 58

Introduction

React

React, React.js ou ReactJS

Bibliothèque (Framework) JavaScript

Open source

Créé par la communauté Facebook en 2011

H I

UEL

Permettant de créer des applications web et mobiles (avec React Native) fE L Front-End c h re

Single page A

Utilisant

les composants web

le DOM Virtuel

H & H: Research and Training

4 / 58

Introduction

React

H I

UEL

React : l’un des frameworks frontends les plus populaires

[lien]

fE L

[lien]

c h re

H & H: Research and Training

5 / 58

Introduction

React

DOM : Document Object Model

Structure en arbre représentant la page web

Généré par le navigateur depuis le HTML pour afficher la page

H I

E du L navigateur.

Manipulable via l’onglet Elements dans le DevTools

MO U

f E L ch r e

H & H: Research and Training

6 / 58

Introduction

React

DOM : Document Object Model

Structure en arbre représentant la page web

Généré par le navigateur depuis le HTML pour afficher la page H I

Manipulable via l’onglet Elements dans le DevTools U E du L navigateur.

L MO

e f E ch pour parler du DOM r

Termes couramment A · utilisés

DOM réel : le DOM généré et manipulé par le navigateur

DOM physique : terme moins courant, souvent utilisé comme synonyme de DOM réel

H & H: Research and Training · 6 / 58

Introduction

React

DOM Virtuel ?

introduit, initialement, par React.

une représentation en mémoire du DOM réel.

H I

permettant des mises à jour plus rapides et efficaces en ne modifiant que les parties

UEL

nécessaires de l’interface utilisateur avant de synchroniser ces changements avec le DOM

réel.

fE L c h re

H & H: Research and Training

7 / 58

Introduction

React

DOM Virtuel ?

introduit, initialement, par React.

une représentation en mémoire du DOM réel.

H I

permettant des mises à jour plus rapides et efficaces en ne modifiant que les parties

UEL

nécessaires de l’interface utilisateur avant de synchroniser ces changements avec le DOM

réel.

fE L c h re

Remarque

Les modifications apportées au DOM physique entraînent généralement des opérations coûteuses en termes de temps de traitement.

Chaque modification peut déclencher des réorganisations et des recalculs complexes de la mise en page.

H & H: Research and Training · 7 / 58

Introduction

React

Quelques outils utilisés par React

npm (node package manager) : le gestionnaire de paquets par défaut pour les applications JavaScript

H I

Webpack : bundler JavaScript utilisé par défaut par le système CRA : Create E L App, U

React

construit le graphe de dépendances, L MO e f E JavaScript, de gérer les assets comme permet de regrouper les fichiers c exemple, h Babel r les images et les fichiers CSS, et d’appliquer des transformations avec des

plugins (par A · pour la transpilation du code ES6+).

Rollup : bundler JavaScript

utilisé pour les bibliothèques React,

réduit la taille du code final en éliminant les modules inutilisés.

H & H: Research and Training · 8 / 58

Introduction

React

CRA : Create React App (CLI de React) qui offre

Configuration zéro : il propose une configuration prédéfinie pour (Webpack,

Babel, ESLint...). · H I

U EL

Commandes de base : il fournit des commandes pour le développement (npm start), M O f E build), L la construction (npm run ch test). r e et les tests A (npm

Support du HMR (Hot Module Replacement) : Pendant le développement, CRA permet de mettre à jour les modules sans recharger toute l’application.

H & H: Research and Training · 9 / 58

Introduction

React

Quels langages utilise React ?

HTML

CSS · fE L

c h re

JSX (JavaScript XML)

H & H: Research and Training

H I

UEL

10 / 58

React

Les différentes versions de React

React 0.1.0 : Mars 2013

React 0.2.0 : Mars 2013

React 0.3.0 : Juin 2013

React 0.4.0 : Juillet 2013

React 0.5.0 : Octobre 2013

React 0.6.0 : Janvier 2014

React 0.7.0 : Mars 2014

React 0.8.0 : Mai 2014 ©A

React 0.9.0 : Juin 2014

React 0.10.0 : Juillet 2014

React 0.11.0 : Août 2014

H & H: Research and Training

Introduction

React 0.12.0 : Octobre 2014

React 0.13.0 : Mars 2015

React 0.14.0 : Octobre 2015 H I

UEL

React 15.0.0 : Avril 2016

LM O React 16.0.0 : Septembre 2017

e f E · React 17.0.0 : Octobre 2020

ch r

React 18.0.0 : Mars 2022

React 18.1.0 : Avril 2022

React 18.2.0 : Juin 2022

React 18.3.0 : Avril 2024

React 19.0.0 : Octobre 2024

11 / 58

Introduction

React

Quelques sites Web réalisés avec React ?

Netflix

Airbnb

L MO

Sony · re fE

A c h

Yahoo

...

H & H: Research and Training

H I

UEL

12 / 58

Introduction

React

Documentation officielle (en français)

[lien] · L MO

re fE

A c h

H & H: Research and Training

H I

UEL

13 / 58

IDE : Integrated Environment Development

React

Quel IDE (Environnement de développement intégré) ?

Visual Studio Code (À ne pas confondre avec Visual Studio)

WebStorm

...

H I

UEL

L MO

re fE

A c h

H & H: Research and Training

14 / 58

IDE : Integrated Environment Development

React

Quel IDE (Environnement de développement intégré) ?

Visual Studio Code (À ne pas confondre avec Visual Studio)

WebStorm

...

H I

UEL

L MO

Visual Studio Code (ou VSC), pourquoi ? re fE

A c h

Gratuit

Multi-OS et multi-langages

Extensible

Léger

Intégration Git et Emmet

H & H: Research and Training

14 / 58

IDE : Integrated Environment Development

React

VSC : téléchargement

[lien]

L MO

re fE

A c h

H & H: Research and Training

H I

UEL

15 / 58

IDE : Integrated Environment Development

React

VSC : téléchargement

[lien]

H I

UEL

L MO

Extensions VSC pour React f E re c h

ES7 React/Redux/React-Native/JS ©A

JS JSX Snippets

H & H: Research and Training snippets et

15 / 58

IDE : Integrated Environment Development

React

Quelques raccourcis VSC

Pour activer la sauvegarde automatique : aller dans File > AutoSave

H I

UEL

Pour indenter son code : Alt · Shift · f

Pour commenter/décommenter : Ctrl L M : O e f E

Pour sélectionner toutes les h r · occurrences : Ctrl f2

A c l’occurrence

Pour sélectionner · suivante : Ctrl d

Pour placer le curseur dans plusieurs endroits différents : Alt

H & H: Research and Training · 16 / 58

React Devtools

React

React Devtools

H I

U EL

applications React.

Extension multi-navigateur pour le débogage des f E L Installation : [lien]

ch r e

H & H: Research and Training

17 / 58

Projet React

React

Trois solutions possibles

En utilisant une CDN

En utilisant Vite · M O

f E début 2025 L e

En utilisant CRA : déprécié depuis

([lien] ch r

H I

UEL

sunsetting-create-react-app?utm_source=[lien])

H & H: Research and Training

18 / 58

Solution avec CDN

React

Solution avec CDN : démarche

Depuis VSC, allez dans File > Open Folder...

H I

Cliquez sur Nouveau dossier et saisissez react-cdn

UEL

Cliquez sur le dossier react-cdn puis sur le dossier L MO fE

Sélectionner un dossier c h re

Dans react-cdn, créez deux fichiers index.html et A script.js

Dans index.html, saisissez html:5 ou ! puis cliquez sur Entree

H & H: Research and Training · 19 / 58

Solution avec CDN

React

Code généré

<!DOCTYPE html>

<head>

H I

UEL

<title>React + CDN</title>

</head>

re fE

<body>

A c h

</body>

</html> ·

H & H: Research and Training

20 / 58

Solution avec CDN

React

Référençons script.js dans index.html

<!DOCTYPE html>

<head>

H I

UEL

<title>React + CDN</title>

</head>

<body> · re fE

</body>

</html>

H & H: Research and Training

21 / 58

Solution avec CDN

React

Ajoutons les CDN (React)

<!DOCTYPE html>

<head>

UEL

<title>React + CDN</title>

</head>

<body>

</script>

</script>

</body>

</html>

H & H: Research and Training · 22 / 58

Solution avec CDN

React

Spécifions la zone de la page où l’application React sera chargée

<!DOCTYPE html>

<head>

UEL

<title>React + CDN</title>

</head>

<body>

</div>

c h

</script>

</script>

</body>

</html>

H & H: Research and Training · 23 / 58

Solution avec CDN

React

Ajoutons le contenu suivant dans script.js const root = ReactDOM.createRoot(document.getElementById('root'));

root.render("Hello world");

fE L c h re

H & H: Research and Training

H I

UEL

24 / 58

Solution avec CDN

React

Ajoutons le contenu suivant dans script.js

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render("Hello world");

H I

UEL

L MO

Explication

c h re

ReactDOM : objet prédéfini chargé depuis la CDN

createRoot() : méthode permettant de créer une application React

root.render() : méthode permettant de charger le paramètre dans la zone root

H & H: Research and Training · 24 / 58

Solution avec CDN

React

Pour tester, utilisons l’extension Live Server

H I

UEL

Installez l’extension Live Server

Faites un clic doit sur index.html L MO e f E

Cliquez sur Open with r

Live Server

c h

Vérifiez l’affichage A de Hello world

H & H: Research and Training

25 / 58

Solution avec CDN

React

Entourons Hello world par la balise h1 const root = ReactDOM.createRoot(document.getElementById('root'));

root.render("<h1>Hello world</h1>");

fE L c h re

H & H: Research and Training

H I

UEL

26 / 58

Solution avec CDN

React

Entourons Hello world par la balise h1 const root = ReactDOM.createRoot(document.getElementById('root'));

root.render("<h1>Hello world</h1>");

Constat

fE L Vérifiez que la balise n’a pas été interprétée.

c h re

H & H: Research and Training

H I

UEL

26 / 58

Solution avec CDN

React

Entourons Hello world par la balise h1 const root = ReactDOM.createRoot(document.getElementById('root'));

root.render("<h1>Hello world</h1>");

Constat

fE L Vérifiez que la balise n’a pas été interprétée.

c h re

Remarque

Pour que la balise soit interprétée, on peut utiliser JSX.

H & H: Research and Training

H I

UEL

26 / 58

Solution avec CDN

React

JSX

H I

UEL

JavaScript Syntax Extension, appelé aussi JavaScript XML

Permettant de mélanger du code JavaScript avec des balises HTML L MO e f E des expressions JavaScript en les Permettant également d’incorporer enveloppant dans c h accolades { }. r

des

H & H: Research and Training · 27 / 58

Solution avec CDN

React

Commençons par ajouter une CDN pour Babel qui permettra d’interpréter le code JSX

<!DOCTYPE html>

<head>

UEL H

<title>React + CDN</title>

</head>

<body> · L MO

</div>

</script>

</body>

</html>

H & H: Research and Training · 28 / 58

Solution avec CDN

React

Pour utiliser JSX, ajoutons l’attribut type="text/babel" à la balise script

<!DOCTYPE html>

<head>

UEL

<title>React + CDN</title>

</head>

<body> · L MO

</div>

</script>

</script>

</script>

</body>

</html>

H & H: Research and Training · 29 / 58

Solution avec CDN

React

Nous pouvons désormais utiliser JSX (JSX est une expression et non pas une string, donc pas besoin de quote)

H I

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<h1>Hello world</h1>);

fE L c h re

H & H: Research and Training

UEL

30 / 58

Solution avec CDN

React

Nous pouvons désormais utiliser JSX (JSX est une expression et non pas une string, donc pas besoin de quote) const root = ReactDOM.createRoot(document.getElementById('root')); H I

UEL

root.render(<h1>Hello world</h1>);

L MO

re fE

Constat · A c h

Vérifiez que le contenu s’affiche et que la balise h1 a bien été interprétée.

H & H: Research and Training · 30 / 58

Solution avec CDN

React

En React, le contenu JSX doit être englobé dans une seule balise parente

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<div>

<h1>Hello world</h1>

<p>Bienvenue dans cette application React + CDN</p> H I

UEL

</div>

);

L MO

re fE

A c h

H & H: Research and Training · 31 / 58

Solution avec CDN

React

En React, le contenu JSX doit être englobé dans une seule balise parente

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<div>

<h1>Hello world</h1>

<p>Bienvenue dans cette application React + CDN</p> H I

UEL

</div>

);

L MO

re fE

Cela va provoquer une erreur : Adjacent JSX elements must be wrapped in an A c h

enclosing tag

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<h1>Hello world</h1>

<p>Bienvenue dans cette application React + CDN</p>

);

H & H: Research and Training · 31 / 58

Solution avec CDN

React

On peut éviter les balises HTML inutiles en utilisant un Fragment

H I

UEL

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<h1>Hello world</h1>

<p>Bienvenue dans cette application React + CDN</p>

</> · c h re

);

H & H: Research and Training · 32 / 58

Solution avec CDN

React

React avec CDN : avantages

Simplicité et rapidité d’intégration

React avec CDN : inconvénients

H I

UEL

Gestion difficile des dépendances

Idéal pour les petites applications

Diminution du poids du projet e f E ch r

©A

Pas de transpilation requise

H & H: Research and Training

Moins adapté aux grandes applications

Performance de chargement

Dépendance au réseau

33 / 58

Solution avec Vite

React

Vite

Outil de développement web léger et rapide

Générateur de projet front-end · H I

Créé par Evan you (Créateur de Vue.js) UEL

L MO

Conçu, initialement, pour accélérer le processus de développement des applications Vue.js re fE

A c h

Open-source

Prenant en charge les langages JavaScript et TypeScript

Intégrant plusieurs frameworks et librairies : React.js, Vue.js, Vanilla, Svelte, Angular...

H & H: Research and Training · 34 / 58

Solution avec Vite

React

Relation avec esbuild Rollup

Vite est un outil de build moderne pour le développement frontend.

Il utilise deux moteurs :

H I

UEL

esbuild pour le développement (serveur rapide, transpilation JS/TS).

Rollup pour le build de production.

L MO

Vite agit comme une surcouche de haut niveau qui cache la complexité de Rollup. re fE

Rollup gère la génération des bundles finaux, avec un système de plugins très modulable. A c h

Résumé

Vite = esbuild (dev) + Rollup (build prod)

H & H: Research and Training · 35 / 58

Solution avec Vite

React

HMR : Hot Module Reloading

Fonctionnalité de Vite · H I

U EL apportées à leur

MO la page du navigateur

Permettant de voir instantanément les modifications code sans avoir à rafraîchir manuellement f E assurer une navigation bidirectionnelle L c de h développement (fourni par des outils comme Vite, r e

Utilisant les WebSocket pour entre le serveur et le navigateur A Webpack...)

H & H: Research and Training · 36 / 58

Solution avec Vite

React

Vite : un moteur adopté par les frameworks modernes

Nuxt 3 (depuis 2022) supporte Vite nativement. · H I

UEL

Vue.js

L MO

SvelteKit : utilise Vite par défaut depuis sa création (2022).

c h re

Solid.js : avec SolidStart qui repose entièrement sur Vite.

...

H & H: Research and Training · 37 / 58

Solution avec Vite

React

Même Angular s’y met

Angular 17 (novembre 2023) · H I

Introduit [lien]/cli vite comme moteur de U EL build alternatif.

Objectif : un serveur de dev plus rapide, L MO et un HMR natif performant.

e f E

[lien]/build (2024) ch r

Nouveau A · pipeline de build basé sur Vite et esbuild.

Devient la future base par défaut pour Angular CLI (Angular 18+).

H & H: Research and Training · 38 / 58

Solution avec Vite

React

Pourquoi ce choix ?

Webpack devenu trop lourd et lent à maintenir.

H I

UEL

La communauté JavaScript s’oriente vers des outils plus simples et performants.

L MO

re fE

A c h

H & H: Research and Training

39 / 58

Solution avec Vite

React

Pourquoi ce choix ?

Webpack devenu trop lourd et lent à maintenir.

H I

UEL

La communauté JavaScript s’oriente vers des outils plus simples et performants.

L MO

re fE

Par conséquence A c h

Vite s’impose comme un standard moderne, même dans les frameworks historiquement liés à Webpack.

H & H: Research and Training · 39 / 58

Solution avec Vite

React

Remarque

Installation

Pour installer Vue.js, il faut télécharger et installer Node.js (Dernière version stable LTS) fE L c h re

H & H: Research and Training

H I

UEL

40 / 58

Solution avec Vite · Installation

React

Remarque

Pour installer Vue.js, il faut télécharger et installer Node.js (Dernière version stable LTS)

Pour Node.js, il faut

L MO

aller sur [lien]

choisir une version récente, télécharger et installer c h re

H & H: Research and Training

H I

UEL

40 / 58

Solution avec Vite · Installation

React

Remarque

Pour installer Vue.js, il faut télécharger et installer Node.js (Dernière version stable LTS)

Pour Node.js, il faut

L MO

aller sur [lien]

choisir une version récente, télécharger et installer c h re

H I

UEL

Pour vérifier l’installation depuis une console (invite de commandes), exécutez node -v

H & H: Research and Training

40 / 58

Solution avec Vite

React

Remarques

Création et structure d’un projet créé avec Vite

H I

U EL

Pour créer un projet avec Vite, il existe deux commandes.

f E L Les deux sont identiques.

ch r e

H & H: Research and Training

41 / 58

Solution avec Vite

React

Création et structure d’un projet créé avec Vite

Pour créer un projet avec Vite, exécuter la commande npm init [e-mail] react-vite

fE L c h re

H & H: Research and Training

H I

UEL

42 / 58

Création et structure d’un projet créé avec Vite

Solution avec Vite

React

Pour créer un projet avec Vite, exécuter la commande

npm init [e-mail] react-vite

H I

UEL

L MO

re fE

npm create [e-mail] react-vite

A c

H & H: Research and Training

42 / 58

Création et structure d’un projet créé avec Vite

Solution avec Vite

React

Pour créer un projet avec Vite, exécuter la commande

npm init [e-mail] react-vite

H I

UEL

L MO

re fE

npm create [e-mail] react-vite

A c

react-vite est le nom du projet.

H & H: Research and Training

42 / 58

Solution avec Vite

React

Ensuite

fE L c h re

H & H: Research and Training

Création et structure d’un projet créé avec Vite

Et enfin

H I

UEL

43 / 58

Solution avec Vite

React

Création et structure d’un projet créé avec Vite

Ouvrez le dossier react-vite avec VSC et installez les dépendances avec

npm install

fE L c h re

H & H: Research and Training

H I

UEL

44 / 58

Solution avec Vite

React

Création et structure d’un projet créé avec Vite

Ouvrez le dossier react-vite avec VSC et installez les dépendances avec

npm install

fE L c h re

H I

UEL

Pour lancer l’application, exécutez

npm run dev

H & H: Research and Training

44 / 58

Solution avec Vite · Création et structure d’un projet créé avec Vite

React

Arborescence d’un projet React.js créé avec Vite

node_modules : contenant les fichiers Node.js nécessaires pour un projet React.js

H I

src : contenant les fichiers sources de l’application

UEL

package.json : contenant l’ensemble de dépendance de l’application public : contenant les fichiers statiques à intégrer systématiquement dans dist fE L vite.config.js : fichier de configuration de Vite pour un projet React.js) c h re

index.html : point d’entrée de l’application

README.md : permet de fournir une vue d’ensemble de l’application, décrire son objectif et expliquer les fonctionnalités principales.

H & H: Research and Training · 45 / 58

Solution avec Vite · Création et structure d’un projet créé avec Vite

React

Si vous aviez choisi TypeScript comme langage, vous auriez

H I

tsconfig.json : fichier de configuration principal pour TypeScript pouvant contenir les UEL paramètres de compilation, les chemins d’inclusion et d’exclusion, les options de module...

[lien].json : fichier spécifique à l’application Vue pouvant contenir des L MO fE propriétés comme chemins d’importation, les options de type...

package.node.json : fichier de configuration permettant d’activer des fonctionnalités c h re

TypeScript spécifiques à Node.js, comme les modules CommonJS, les cibles A ECMAScript...

H & H: Research and Training · 46 / 58

Solution avec Vite · Création et structure d’un projet créé avec Vite

React

Que contient src ?

assets : contenant les fichiers statiques à intégrer dans dist s’ils sont explicitement H I

UEL

référencés dans le projet mains.jsx : le point d’entrée de l’application L MO index.css : la feuille de style associée au point d’entrée re fE

App.jsx : le premier composant A c h

App.css : la feuille de style associée au premier composant

H & H: Research and Training · 47 / 58

Solution avec Vite · Création et structure d’un projet créé avec Vite

React

Contenu d’index.html

<!doctype html>

H I

UEL

<head>

<title>Vite + React</title> fE

</head>

<body> · c h re

</html>

H & H: Research and Training · 48 / 58

Solution avec Vite · Création et structure d’un projet créé avec Vite

React

Contenu de src/main.jsx

import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' H I

UEL

import './index.css'

import App from './App.jsx' f E L createRoot(document.getElementById('root')).render( <StrictMode> ch r e

<App /> A </StrictMode>, )

H & H: Research and Training · 49 / 58

Solution avec CRA · Installation

React

Remarque

Pour installer React, il faut télécharger et installer Node.js

H I

UEL

L MO

re fE

A c h

H & H: Research and Training

50 / 58

Solution avec CRA · Installation

React

Remarque

Pour installer React, il faut télécharger et installer Node.js

H I

UEL

Pour Node.js, il faut

L MO

aller sur [lien]

c h re choisir une version récente, télécharger et installer

H & H: Research and Training

50 / 58

Solution avec CRA · Installation

React

Remarque

Pour installer React, il faut télécharger et installer Node.js

H I

UEL

Pour Node.js, il faut

L MO

aller sur [lien]

c h re choisir une version récente, télécharger et installer

Pour vérifier l’installation depuis une console (invite de commandes), exécutez node -v

H & H: Research and Training

50 / 58

Solution avec CRA

React

Création et structure d’un projet créé avec NPM

Pour créer le squelette d’une application React

H I

npx create-react-app react-npm fE L c h re

H & H: Research and Training

UEL

51 / 58

Solution avec CRA

React

Création et structure d’un projet créé avec NPM

Pour créer le squelette d’une application React

H I

npx create-react-app react-npm fE L Pour lancer le projet c h re

npm start

H & H: Research and Training

UEL

51 / 58

Solution avec CRA · Création et structure d’un projet créé avec NPM

React

Arborescence d’un projet React

H I

UEL

node_modules : contenant les modules Node.js nécessaires pour React public : contenant les fichiers accessibles de l’extérieur L MO src : contenant les fichiers sources e f E de l’application (exigé par Webpack)

: c h r package.json A contenant l’ensemble de dépendance de l’application

H & H: Research and Training · 52 / 58

Solution avec CRA · Création et structure d’un projet créé avec NPM

React

Que contient public ?

index.html : unique fichier HTML d’une application React

H I

UEL

favicon.ico, logo192.png et logo512.png : les logo de React manifest.json : fichier JSON permettant de décrire l’application (nom, L MO auteur...) pour configurer l’apparence et le comportement de l’application lorsqu’elle est installée sur un appareil mobile ou utilisée comme une application re fE web autonome. A c h

Robots.txt : fichier texte consulté par les moteurs de recherche pour savoir si l’affichage de contenu de l’application est autorisé dans les résultats de recherche.

H & H: Research and Training · 53 / 58

Solution avec CRA · Création et structure d’un projet créé avec NPM

React

Contenu d’index.html (sans les commentaires générés)

<!DOCTYPE html>

<head>

UEL

<title>React App</title>

</head>

<body>

</body>

</html>

H & H: Research and Training · 54 / 58

Solution avec CRA

React

Question 1

Création et structure d’un projet créé avec NPM

Pourquoi index.js n’est pas référencé par index.html ?

fE L c h re

H & H: Research and Training

H I

UEL

55 / 58

Solution avec CRA · Création et structure d’un projet créé avec NPM

React

Question 1

Pourquoi index.js n’est pas référencé par index.html ?

H I

UEL

L MO

Réponse

c h re

En développement, CRA utilise un serveur de développement (comme

Webpack Dev Server) qui injecte dynamiquement le script dans la page. A

En production (build), index.js est intégré par Webpack pendant le processus de build. Le bundler génère un fichier JavaScript optimisé.

H & H: Research and Training · 55 / 58

Solution avec CRA · Création et structure d’un projet créé avec NPM

React

Que contient src ?

index.js : le point d’entrée de l’application

H I

index.css : la feuille de style associée au point d’entrée

UEL

App.js : le premier composant

App.css : la feuille de style associée au premier composant fE L App.test.js : le fichier de test du premier composant c h re

reportWebVitals.js : permet la configuration de mesure et de suivi des performances des applications React à l’aide de l’outil web-vitals (package npm).

setupTests.js : le fichier de configuration globale de test

H & H: Research and Training · 56 / 58

Solution avec CRA

Contenu d’index.js (point d’entrée)

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

Création et structure d’un projet créé avec NPM import reportWebVitals from './reportWebVitals';

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

); · fE L

c h re reportWebVitals();

H & H: Research and Training

H I

UEL

57 / 58

Solution avec CRA · Création et structure d’un projet créé avec NPM

Contenu d’index.js (point d’entrée)

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

ReactDOM.render(

<React.StrictMode> · H I

UEL

<App />

</React.StrictMode>,

document.getElementById('root')

); · fE L

c h re reportWebVitals();

Explication

React : API permettant de gérer les composants

ReactDOM : API permettant d’attacher les composants au DOM

H & H: Research and Training · 57 / 58

Solution avec CRA · Création et structure d’un projet créé avec NPM

Contenu d’App.js (premier composant)

import logo from './logo.svg';

import './App.css';

function App() { return (

<p>

Edit <code>src/App.js</code> and save to reload.

</p>

UEL

className="App-link"

href="[lien]"

target="_blank"

rel="noopener noreferrer"

Learn React

c h

</a>

</header>

</div>

);

}

export default App;

H & H: Research and Training · 58 / 58

Solution avec CRA · Création et structure d’un projet créé avec NPM

Contenu d’App.js (premier composant)

import logo from './logo.svg';

import './App.css';

function App() { return (

<p>

Edit <code>src/App.js</code> and save to reload.

</p>

UEL

className="App-link"

href="[lien]"

target="_blank"

rel="noopener noreferrer"

Learn React

c h

</a>

</header>

</div>

);

}

export default App;

Explication

App-header et App-logo : classes CSS définies dans App.css

H & H: Research and Training · 58 / 58

للتواصل مع صاحب هذا الملف، اذكر المرجع ND-CV-52E1D08D: contact@nextdata.ma

مكتب الوثائق

ملف من قاعدة السير الذاتية

ملف المترشح تمّ دمج 2 بطاقات (الشخص نفسه)

تطوير البرمجيات (غير متخصص)

UEL H

Résumé