Bonjour, monde !

Le plus petit exemple de React ressemble à ceci :

ReactDOM.render(
  <h1>Bonjour, monde !</h1>,
  document.getElementById('root')
);

Il affiche un titre qui dit « Bonjour, monde ! » sur la page.

Essayer sur CodePen

Cliquez sur le lien ci-dessus pour ouvrir un éditeur en ligne. Vous êtes libres de faire quelques changements et de voir comment ils affectent l’affichage. La plupart des pages de ce guide auront des exemples modifiables comme celui-ci.

Comment lire ce guide

Dans ce guide, nous examinerons les blocs qui constituent une application React : les éléments et les composants. Une fois que vous les aurez maîtrisés, vous pourrez créer des applications complexes à partir de petits blocs réutilisables.

Astuce

Ce guide est destiné aux personnes qui préfèrent apprendre étape par étape. Si vous préférez apprendre par la pratique, allez voir notre tutoriel. Vous trouverez peut-être que les deux sont complémentaires.

Ceci est le premier chapitre d’un guide étape par étape à propos des concepts principaux de React. Vous pouvez trouver une liste des chapitres dans la barre latérale de navigation. Si vous lisez ceci depuis un appareil mobile, vous pouvez accéder à la navigation en appuyant sur le bouton situé dans le coin en bas à droite de votre écran.

Chacun des chapitres de ce guide s’appuie sur les connaissances introduites dans les chapitres précédents. Vous pouvez apprendre l’essentiel de React en lisant les chapitres du guide « Fondamentaux » dans l’ordre où ils apparaissent dans la barre latérale. Par exemple, le prochain chapitre s’intitule « Introduction à JSX ».

Niveau de connaissances supposé

React est une bibliothèque JavaScript, donc nous supposerons que vous avez une compréhension décente du langage JavaScript. Si vous ne vous sentez pas à l’aise, nous vous recommandons de passer par un tutoriel JavaScript pour vérifier votre niveau de connaissances et vous permettre de suivre ce guide sans être perdu·e. Il vous prendra entre 30 minutes et une heure environ, mais au moins vous n’aurez pas le sentiment d’apprendre React et JavaScript en même temps.

Remarque

Ce guide utilise occasionnellement quelques nouvelles syntaxes de JavaScript dans les exemples. Si vous n’avez pas travaillé avec JavaScript ces dernières années, ces trois points devraient vous aider.

Commençons !

Continuez à défiler pour atteindre le lien vers le prochain chapitre de ce guide juste avant le pied de page.