Démarrage rapide

Bienvenue dans la documentation React ! Cette page vous présentera 80 % des concepts React que vous utiliserez au quotidien.

Créer et imbriquer des composants

Les applications React sont constituées decomposants. Un composant est un élément de l'interface utilisateur (UI) qui possède sa propre logique et son apparence. Un composant peut être aussi petit qu'un bouton, ou aussi grand qu'une page entière.

Les composants React sont des fonctions JavaScript qui renvoient du balisage :

Maintenant que vous avez déclaréMyButton, vous pouvez l'imbriquer dans un autre composant :

Notez que<MyButton />commence par une majuscule. C'est ainsi que vous savez qu'il s'agit d'un composant React. Les noms des composants React doivent toujours commencer par une majuscule, tandis que les balises HTML doivent être en minuscules.

Regardez le résultat :

Les mots-clésexport defaultspécifient le composant principal dans le fichier. Si vous n'êtes pas familier avec une syntaxe JavaScript particulière,MDNetjavascript.infoproposent d'excellentes références.

Écrire du balisage avec JSX

La syntaxe de balisage que vous avez vue ci-dessus est appeléeJSX. Elle est facultative, mais la plupart des projets React utilisent JSX pour sa commodité. Tous lesoutils que nous recommandons pour le développement localprennent en charge JSX nativement.

JSX est plus strict que HTML. Vous devez fermer les balises comme<br />. Votre composant ne peut pas non plus renvoyer plusieurs balises JSX. Vous devez les regrouper dans un parent commun, comme un<div>...</div>ou un wrapper vide<>...</> :

Si vous avez beaucoup de HTML à convertir en JSX, vous pouvez utiliser unconvertisseur en ligne.

Ajouter des styles

Dans React, vous spécifiez une classe CSS avecclassName. Cela fonctionne de la même manière que l'attribut HTMLclass :

Ensuite, vous écrivez les règles CSS correspondantes dans un fichier CSS séparé :

React ne prescrit pas comment ajouter des fichiers CSS. Dans le cas le plus simple, vous ajouterez une balise<link>à votre HTML. Si vous utilisez un outil de build ou un framework, consultez sa documentation pour savoir comment ajouter un fichier CSS à votre projet.

Afficher des données

JSX vous permet d'intégrer du balisage dans JavaScript. Les accolades vous permettent de « revenir » en JavaScript afin d'incorporer une variable de votre code et de l'afficher à l'utilisateur. Par exemple, ceci afficherauser.name:

Vous pouvez également « revenir en JavaScript » depuis les attributs JSX, mais vous devez utiliser des accoladesau lieu deguillemets. Par exemple,className="avatar"passe la chaîne"avatar"comme classe CSS, maissrc={user.imageUrl}lit la valeur de la variable JavaScriptuser.imageUrl, puis passe cette valeur comme attributsrc :

Vous pouvez également placer des expressions plus complexes à l'intérieur des accolades JSX, par exemple,la concaténation de chaînes:

Dans l'exemple ci-dessus,style={{}}n'est pas une syntaxe spéciale, mais un objet{}régulier à l'intérieur des accolades JSXstyle={ }. Vous pouvez utiliser l'attributstylelorsque vos styles dépendent de variables JavaScript.

Rendu conditionnel

Dans React, il n'y a pas de syntaxe spéciale pour écrire des conditions. Vous utiliserez plutôt les mêmes techniques que lorsque vous écrivez du code JavaScript classique. Par exemple, vous pouvez utiliser une instructionifpour inclure conditionnellement du JSX :

Si vous préférez un code plus compact, vous pouvez utiliser l'opérateur conditionnel ?.Contrairement àif, il fonctionne à l'intérieur du JSX :

Lorsque vous n'avez pas besoin de la brancheelse, vous pouvez également utiliser la syntaxe plus courte de l'opérateur logique &&:

Toutes ces approches fonctionnent également pour spécifier conditionnellement des attributs. Si vous n'êtes pas familier avec certaines de ces syntaxes JavaScript, vous pouvez commencer par utiliser systématiquementif...else.

Rendu de listes

Vous vous appuierez sur des fonctionnalités JavaScript comme laboucle foret lafonction map() des tableauxpour afficher des listes de composants.

Par exemple, supposons que vous ayez un tableau de produits :

À l'intérieur de votre composant, utilisez la fonctionmap()pour transformer un tableau de produits en un tableau d'éléments<li> :

Notez que<li>possède un attributkey. Pour chaque élément d'une liste, vous devez passer une chaîne ou un nombre qui identifie de manière unique cet élément parmi ses frères et sœurs. En général, une clé doit provenir de vos données, comme un ID de base de données. React utilise vos clés pour savoir ce qui s'est passé si vous insérez, supprimez ou réorganisez ultérieurement les éléments.

Répondre aux événements

Vous pouvez répondre aux événements en déclarant des fonctionsgestionnaires d'événementsà l'intérieur de vos composants :

Notez queonClick={handleClick}n'a pas de parenthèses à la fin ! Neappelez pasla fonction gestionnaire d'événements : vous devez seulement lapasser en référence. React appellera votre gestionnaire d'événements lorsque l'utilisateur cliquera sur le bouton.

Mettre à jour l'écran

Souvent, vous voudrez que votre composant « se souvienne » de certaines informations et les affiche. Par exemple, vous voudrez peut-être compter le nombre de fois qu'un bouton est cliqué. Pour ce faire, ajoutez unétatà votre composant.

Tout d'abord, importezuseStatedepuis React :

Vous pouvez maintenant déclarer unevariable d'étatdans votre composant :

Vous obtenez deux choses deuseState: l'état actuel (count), et la fonction qui vous permet de le mettre à jour (setCount). Vous pouvez leur donner n'importe quel nom, mais la convention est d'écrire[quelqueChose, setQuelqueChose].

La première fois que le bouton est affiché,countsera0car vous avez passé0 à useState(). Lorsque vous souhaitez changer l'état, appelezsetCount()et passez-lui la nouvelle valeur. Cliquer sur ce bouton incrémentera le compteur :

React appellera à nouveau votre fonction de composant. Cette fois,countsera1. Puis ce sera2. Et ainsi de suite.

Si vous affichez le même composant plusieurs fois, chacun aura son propre état. Cliquez sur chaque bouton séparément :

Notez comment chaque bouton « se souvient » de son propre étatcountet n'affecte pas les autres boutons.

Utilisation des Hooks

Les fonctions commençant parusesont appeléesHooks.useStateest un Hook intégré fourni par React. Vous pouvez trouver d'autres Hooks intégrés dans laréférence API.Vous pouvez également écrire vos propres Hooks en combinant ceux existants.

Les Hooks sont plus restrictifs que les autres fonctions. Vous ne pouvez appeler les Hooks qu'au niveau supérieurde vos composants (ou d'autres Hooks). Si vous souhaitez utiliseruseStatedans une condition ou une boucle, extrayez un nouveau composant et placez-le là.

Partage de données entre composants

Dans l'exemple précédent, chaqueMyButtonavait son proprecountindépendant, et lorsque chaque bouton était cliqué, seul lecountdu bouton cliqué changeait :

Initialement, l'étatcountde chaqueMyButtonest0

Le premierMyButtonmet à jour soncount à 1

Cependant, souvent vous aurez besoin que les composantspartagent des données et se mettent toujours à jour ensemble.

Pour que les deux composantsMyButtonaffichent le mêmecountet se mettent à jour ensemble, vous devez déplacer l'état des boutons individuels « vers le haut » vers le composant le plus proche qui les contient tous.

Dans cet exemple, c'estMyApp:

Initialement, l'étatMyAppdecountest0et est transmis aux deux composants enfants.

Au clic,MyAppmet à jour son étatcount à 1et le transmet aux deux enfants.

Maintenant, lorsque vous cliquez sur l'un ou l'autre bouton, lecountdansMyAppchangera, ce qui modifiera les deux compteurs dansMyButton. Voici comment vous pouvez exprimer cela en code.

Premièrement,remontez l'étatdeMyButtonversMyApp:

Ensuite,transmettez l'état vers le basdeMyAppà chaqueMyButton, ainsi que le gestionnaire de clic partagé. Vous pouvez transmettre des informations àMyButtonen utilisant les accolades JSX, comme vous l'avez déjà fait avec les balises intégrées telles que<img>:

Les informations que vous transmettez ainsi sont appeléesprops. Maintenant, le composantMyAppcontient l'étatcountet le gestionnaire d'événementshandleClick, et les transmet tous deux comme propsà chacun des boutons.

Enfin, modifiezMyButtonpourlireles props que vous avez transmises depuis son composant parent :

Lorsque vous cliquez sur le bouton, le gestionnaireonClickse déclenche. La proponClickde chaque bouton a été définie sur la fonctionhandleClickà l'intérieur deMyApp, donc le code à l'intérieur s'exécute. Ce code appellesetCount(count + 1), incrémentant la variable d'étatcount. La nouvelle valeur decountest transmise comme prop à chaque bouton, donc ils affichent tous la nouvelle valeur. C'est ce qu'on appelle « remonter l'état ». En remontant l'état, vous l'avez partagé entre les composants.

Prochaines étapes

À présent, vous connaissez les bases de l'écriture de code React !

Consultez leTutorielpour les mettre en pratique et construire votre première mini-application avec React.