02 Introduction React
02 Introduction React
02 Introduction React
Dans ce premier exemple, nous allons voir ensemble comment créer des éléments dans une
page HTML.
<!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.
<!DOCTYPE html>
<html lang="fr">
<body>
<div id="app"></div>
<script>
// write some code here
</script>
</body>
</html>
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 ;
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 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!.
<script>
// write some code here
</script>
</body>
</html>
Consignes :
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.
<!DOCTYPE html>
<html lang="fr">
<head>
<script type="text/babel">
const myDiv = <div className="content">Hello students!</div>;
ReactDOM
.createRoot(app)
.render(myDiv);
</script>
</body>
</html>
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 :
Dans cet exemple, nous avons un composant nommé User qui possèdent deux props :
firstName et lastName.
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 !
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.