React
Une bibliothèque JavaScript pour créer des interfaces utilisateurs
Déclaratif
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.
À base de composants
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.
Utilisable partout
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.
Un composant simple
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.
Chargement de l’exemple de code…
Un composant à état
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.
Chargement de l’exemple de code…
Une application
En utilisant propset 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.
Chargement de l’exemple de code…
Un composant avec des plugins tiers
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.