Le plus petit exemple React ressemble à ceci:
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root'));Il affiche un titre disant « Hello, world ! » sur la page.
Essayez-le sur CodePen
Cliquez sur le lien ci-dessus pour ouvrir un éditeur en ligne. N’hésitez pas à faire quelques modifications, et à voir comment elles affectent la sortie. La plupart des pages de ce guide comporteront des exemples modifiables comme celui-ci.
Comment lire ce guide
Dans ce guide, nous allons examiner les blocs de construction des apps React : les éléments et les composants. Une fois que vous les maîtrisez, vous pouvez créer des apps complexes à partir de petits éléments réutilisables.
Conseil
Ce guide est conçu pour les personnes qui préfèrent apprendre des concepts étape par étape. Si vous préférez apprendre par la pratique, consultez notre tutoriel pratique. Vous pourriez trouver ce guide et le tutoriel complémentaires.
Ceci est le premier chapitre d’un guide pas à pas sur les principaux concepts de React. Vous pouvez trouver la liste de tous ses 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 dans le coin inférieur droit de votre écran.
Chaque chapitre de ce guide s’appuie sur les connaissances introduites dans les chapitres précédents. Vous pouvez apprendre la plupart de React en lisant les chapitres du guide « Concepts principaux » dans l’ordre où ils apparaissent dans la barre latérale. Par exemple, « Introducing JSX » est le chapitre suivant après celui-ci.
Hypothèses de niveau de connaissance
React est une bibliothèque JavaScript, et nous supposerons donc que vous avez une compréhension de base du langage JavaScript. Si vous ne vous sentez pas très confiant, nous vous recommandons de passer par un tutoriel JavaScript pour vérifier votre niveau de connaissance et vous permettre de suivre ce guide sans vous perdre. Cela pourrait vous prendre entre 30 minutes et une heure, mais au final, vous n’aurez pas l’impression d’apprendre à la fois React et JavaScript.
Note
Ce guide utilise occasionnellement certaines syntaxes JavaScript plus récentes dans les exemples. Si vous n’avez pas travaillé avec JavaScript au cours des dernières années, ces trois points devraient vous permettre de faire la majeure partie du chemin.
Démarrons !
Poursuivez votre défilement vers le bas, et vous trouverez le lien vers le chapitre suivant de ce guide juste avant le pied de page du site web.