Une bibliothèque JavaScript pour créer des interfaces utilisateurs
Grâce à React, il est facile de créer des interfaces utilisateurs interactives. Définissez des vues simples pour chaque état de votre application, et lorsque vos données changeront, React mettra à jour, de façon optimale, juste les composants qui en auront besoin.
Des vues déclaratives rendent votre code plus prévisible et plus facile à déboguer.
Créez des composants autonomes qui maintiennent leur propre état, puis assemblez-les pour créer des interfaces utilisateurs complexes.
Dans la mesure où les composants sont écrits en JavaScript plutôt que sous la forme de gabarits, vous pouvez facilement utiliser des données complexes dans vos applications et garder l’état hors du DOM.
Comme nous ne présumons rien sur les autres technologies que vous utilisez, vous pouvez développer de nouvelles fonctionnalités avec React sans avoir à réécrire votre code existant.
React peut aussi être utilisé côté serveur avec Node, ou pour créer des applications mobiles grâce à React Native.
Les composants React implémentent une méthode render()
qui prend des données en entrée et retourne ce qui doit être affiché. Cet exemple utilise une syntaxe qui ressemble à du XML et qu’on appelle JSX. Les données passées au composant sont accessibles dans render()
via this.props
.
JSX n’est pas obligatoire pour utiliser React. Essayez la REPL Babel pour examiner le code JavaScript brut produit par la phase de compilation du format JSX.
En plus de pouvoir recevoir des données (accessibles via this.props
), un composant peut maintenir un état local (accessible via this.state
). Lorsque l’état local d’un composant change, son affichage est mis à jour en appelant render()
une nouvelle fois.
En utilisant props
et state
on peut créer une petite application de gestion de tâches. Cet exemple utilise state
pour maintenir la liste des tâches et le texte que l’utilisateur a saisi. Bien que les gestionnaires d’événements soient définis directement dans le code, ils seront regroupés et gérés en utilisant les principes de délégation des événements.
React est flexible et fournit divers moyens de l’intégrer avec d’autres bibliothèques ou frameworks. Cet exemple utilise remarkable, une bibliothèque tierce pour gérer le format Markdown, afin de convertir le contenu de la balise <textarea>
en temps réel.