React JS

React JS

ReactJS pour débutants

TL;DR J’ai lutté longtemps pour essayer de comprendre React. C’est ce que j’aurais aimé qu’on me dise.

Qu’est-ce que React ?

Comment React se compare-t-il à Angular, Ember, Backbone, et al ? Comment traitez-vous les données ? Comment contacter le serveur ? C’est quoi, JSX ? Qu’est-ce qu’un « composant » ?

React est mentionné dans le même souffle que les autres frameworks Javascript, mais « React vs Angular » n’a pas de sens car ils ne sont pas directement comparables. Angulaire est un cadre complet (y compris un calque de vue), React ne l’est pas. C’est pourquoi React est confus à comprendre, il émerge dans un écosystème de frameworks complets, mais c’est surtout la vue.

React vous donne un langage de template et quelques crochets de fonction pour essentiellement rendre du HTML. Ce sont tous les résultats de React, HTML. Vos paquets de HTML / Javascript, appelés « composants », peuvent avoir leur propre état interne (par exemple, quel onglet est sélectionné dans une vue à onglets), mais à la fin vous vomissez simplement du HTML.

Vous ne pouvez pas construire une application dynamique entièrement fonctionnelle avec React seul. Nous en apprendrons plus sur les raisons ci-dessous.

Après avoir travaillé avec React pendant un certain temps, j’ai vu apparaître d’importants avantages.

1. Raisonner facilement sur la façon dont les vues rendent

Votre utilisateur se connecte et vous devez mettre à jour l’en-tête. Tu pourrais faire ça :

Il s’agit d’une programmation « impérative ». Vous expliquez au navigateur comment mettre à jour en une série d’étapes. Dans une application complexe, je peux vous dire par expérience que ce code n’évolue pas. Comment déboguer la sortie ? Comment savez-vous qui a mis à jour l’en-tête ? Qui d’autre a accès à l’en-tête HTML ? Qui détient la source de vérité pour que le nom soit visible ? Cette manipulation DOM est aussi mauvaise qu’une déclaration GOTO pour raisonner sur votre programme.

le faire dans React JS :

Oui, JSX a l’air bizarre au début, mais faites-moi plaisir. Nous pouvons dire instantanément comment ce composant sera rendu. Si vous connaissez l’état, vous connaissez la sortie rendue. Vous n’avez pas besoin de suivre le déroulement du programme.

Il s’agit d’une programmation « déclarative ». Vous déclarez vouloir un en-tête avec un nom ou un message. Vous ne dites pas à l’ordinateur comment le faire, comme dans l’exemple de Linux. Dans Linux, vous mutez le DOM en plusieurs étapes et ne pouvez pas raisonner sur la façon dont il est devenu ainsi.

2. JSX signifie un code de vue propre et bien organisé

Le mélange bizarre de HTML / Javascript soupe ci-dessus pourrait vous faire grincer des dents. Nous avons été conditionnés à ne pas mettre de Javascript brut dans le DOM (comme les gestionnaires onClick) depuis que nous sommes petits développeurs. Vous devrez me faire confiance, cependant ; travailler avec des composants JSX est vraiment agréable.

L’idée fausse la plus courante de React est que JSX viole la séparation des préoccupations. On mélange la logique et les points de vue, non ?

Attendez un peu. « Logique » n’est pas un problème. Vous pensez à la « logique d’affaires » : les règles de mise à jour de vos données. Rien de tout ça ne vit à React. La logique de vue, comme le fait d’afficher ou non le nom dans l’en-tête, fait évidemment partie du problème de vue. Nous avions l’habitude de séparer les modèles HTML de Javascript, même s’ils font tous les deux partie du problème de la vue. Après avoir travaillé avec React, vous apprendrez qu’il n’y a pas besoin de ce motif, et vous cesserez de craindre la « logique » dans vos modèles (oui, Mustache.js s’est trompé !).

3. Vous pouvez rendre React sur le serveur

Le rendu côté serveur est l’une des optimisations les plus importantes que vous puissiez faire pour accélérer une application Javascript. Les navigateurs sont conçus à partir de zéro pour montrer aux utilisateurs le rendu HTML le plus rapidement possible.

Les vraies « applications à page unique » ne conviennent qu’à un sous-ensemble du Web, comme les clients de messagerie où vous les laissez généralement ouvertes pendant des semaines et ne chargez que très peu de pages.

Angular et d’autres vous encouragent à faire des choses comme rendre votre page avec PhantomJS et de servir que pour les moteurs de recherche crawlers basés sur l’agent utilisateur, ou payer de l’argent comptant pour cela comme un service. Beurk !

Le rendu de serveur avec React n’est pas gratuit, mais une fois implémenté, c’est une bouffée d’air frais. J’ai fait cela pour mon application web ShaderFrog, et même sur une instance nano EC2, il se charge assez rapidement.

4. React vous fera aimer la programmation fonctionnelle.

React fonctionne bien avec des motifs fonctionnels, purs et immuables. C’est une porte d’entrée vers des programmes fonctionnels. Essayez Elm après React quand vous serez prêt pour votre prochaine étape de PF !