02 Introduction React

02) Introduction à React
Sans utiliser React
Dans ce premier exemple, nous allons voir ensemble comment créer des éléments dans une
page HTML.
Partons, d’un fichier HTML simple :
<!DOCTYPE html>
<html lang="fr">
<body>
<div id="app">
<div class="content">Hello students!</div>
</div>
</body>
</html>
En partant du code ci-dessous, ajouter l’élément div avec le texte Hello students.
Code de départ exercice 1 :
<!DOCTYPE html>
<html lang="fr">
<body>
<div id="app"></div>
<script>
// write some code here
</script>
</body>
</html>
02) Introduction à React 1

Indice : utilisez les fonctions document.createElement pour créer l’élément.
En utilisant React
React est une librairie qui vous permettra de créer des composants réutilisables. N’étant pas
restreint aux applications Web, React peut être utilisé dans divers écosystèmes :
application Web ;
application mobile ;
application de réalité virtuelle.
En fonction de l’application que vous allez créer, différents packages vous permettront de
développer les fonctionnalités dont vous avez besoin. De plus, chaque écosystème dispose de
ses propres librairies pour afficher les composants à l’écran. Que vous savez dans un
naviguateur (application web) ou sur un téléphone mobile (application mobile native) la façon
d’afficher les composants est différente :
sur navigateur : vous utilisez des balises HTML et du style CSS ;
sur téléphone mobile : différentes technologies (Java, ObjectiveC etc.) sont utilisées en
fonction de la plateforme ciblée (Android, IOS, Windows Phone etc.).
La librairie JavaScript nommé react s’utilisent sur toutes les plateformes. Pour afficher des
composants Web sur l’écran d’un navigateur, il vous faudra utiliser react-dom.
Dans un premier temps, nous n’utiliserons pas de gestionnaire de dépendances tel que NPM.
Nous utiliserons un CDN (Content Delivery Network) pour installer react et react-dom.
Exercice : sur la base du même code de départ précédent, créer l’élément div avec la classe
content et le texte Hello students!.
Code de départ exercice 2 :

<!DOCTYPE html>
<html lang="fr">
<body>
<script>
// write some code here
</script>
</body>
</html>
Consignes :
utiliser react et react-dom en version 18
utiliser la fonction createElement de react
Et avec du JSX ?
Écrire des composants react de cette manière est tout à fait possible. Cependant, lorsque votre
application va prendre de l’ampleur et que le code à générer deviendra conséquent, il deviendra
de plus en plus compliqué d’écrire du code React de cette façon. Et effet, les éléments
possèdent des éléments enfants, qui possèdent eux-mêmes des éléments enfants, etc.
Pour répondre à ce problème, il existe une syntaxe alternative : le JSX. Le JSX est une syntaxe
vous permettant d’écrire vos composants et ces derniers seront ensuite traduits
automatiquement (par un outil appelé Babel) en code JavaScript pur grâce à la fonction
React.createElement.
Essayez ce-fichier HTML :
<!DOCTYPE html>
<html lang="fr">
<head>

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/@babel/standalone@7.12.4/babel.js"></script>
</head>
<body>
<script type="text/babel">
const myDiv = <div className="content">Hello students!</div>;
const app = document.getElementById('app');
ReactDOM
.createRoot(app)
.render(myDiv);
</script>
</body>
</html>
Maintenant, imaginons le scénario suivant : à la place d’afficher Hello students! nous

voudrions afficher Hello John! où John serait une variable. Comment faire ?
Utilisation des props
Tous les composants React peuvent prendre des paramètres en entrée. Ces paramètres sont
appellés props. Leur valeur est fixe et une fois définie la valeur du props ne peut plus changer
(immutable) pour un même composant. Dans le cas contraire, React vous affichera une erreur !
Ces paramètres d’entrer (que nous appellerons toujours props désormais) s’utilisent
exactement comme les attributs des balises HTML :
<User firstName="John" lastName="Doe" />
Dans cet exemple, nous avons un composant nommé User qui possèdent deux props :
firstName et lastName.

Les props permettent de passer tout type de données (string, number, fonctions, booléens etc.).
Exercice 3 : sur la base du code ci-dessus (avec le JSX), transformer myDiv en composant et
lui passer la props name.
Informations :
un composant React n’est rien d’autre qu’une fonction qui retourne du JSX (ou null dans de
rare cas)
les props d’un composant sont accessibles via le premier paramètre de la fonction. Ce
paramètre est généralement appelé props, même si le nom n’a pas d’importance. Vous
pouvez d’ailleurs le déstructurer !
l’afrfichage d’une props se fait de la manière suivante : Hello {props.name}!
le nom d’un composant React doit être écrit en PascalCase. C’est-à-dire que le nom doit
commencer par une majuscule et ne peut pas contenir de tiret.

02 Introduction React

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

02 Introduction React

Transféré par

Droits d'auteur :

Formats disponibles

02) Introduction à React

Sans utiliser React

Partons, d’un fichier HTML simple :

Code de départ exercice 1 :

02) Introduction à React 1

application de réalité virtuelle.

sur navigateur : vous utilisez des balises HTML et du style CSS ;

Code de départ exercice 2 :

02) Introduction à React 2

utiliser react et react-dom en version 18

utiliser la fonction createElement de react

Essayez ce-fichier HTML :

02) Introduction à React 3

const app = document.getElementById('app');

Maintenant, imaginons le scénario suivant : à la place d’afficher Hello students! nous

Utilisation des props

<User firstName="John" lastName="Doe" />

02) Introduction à React 4

l’afrfichage d’une props se fait de la manière suivante : Hello {props.name}!

02) Introduction à React 5

Vous aimerez peut-être aussi