Get best of the week

ReactJS: démarrage rapide

Le cours pour développeurs React.js est sur le point de commencer , donc une autre leçon ouverte a eu lieu dans les murs d'OTUS. Les questions suivantes y ont été examinées:

  • Ce qui est inclus dans l'ensemble de fonctionnalités React.js standard;
  • est-il possible de construire une application complexe avec cela;
  • composition contre héritage;
  • programmation fonctionnelle - est-ce facile ou difficile?
  • Qu'est-ce que Redux et pourquoi est-il nécessaire?



À la fin de la leçon, nous avons développé une petite application Web ReactJS. Le webinaire a été organisé par Nikita Ovchinnikov , un ingénieur logiciel avec plus de 8 ans d'expérience en développement commercial.

Qu'est-ce que React?


Vous verrez la réponse à cette question en ouvrant le site officiel, où il est écrit que React est une bibliothèque JavaScript pour la construction d'interfaces utilisateur.



Vous trouverez ici un merveilleux tutoriel, après avoir étudié lequel, vous pouvez utiliser ce cadre immédiatement après l'avoir lu. Si vous le souhaitez, consultez le didacticiel en russe, mais ce n'est pas recommandé. Si c'est vraiment mauvais avec l'anglais, ouvrez toujours la version anglaise originale et utilisez le traducteur Google. Le fait est que les sources officielles en russe sont parfois en retard en termes de traduction (il arrive que la documentation soit mise à jour, mais la traduction ne l'est pas encore).

Pourquoi React est-il si populaire?


Par exemple, les statistiques des 6 derniers mois , sans compter la subsidence caractéristique pendant les vacances d'hiver , témoignent de la popularité de React : Les statistiques suivantes



montrent également de bons résultats : Bien sûr, les statistiques sont loin de tout, mais néanmoins nous pouvons voir dans l'échantillon que la popularité élevé, et il ne fait qu'augmenter. Pourquoi React est-il si populaire? Il ya un certain nombre de raisons à cela:







  • il est vraiment très bien documenté :
    - voici un tutoriel ;
    - voici un guide pour les débutants .
    Cependant, aujourd'hui, le cadre ne deviendra pas populaire s'il est mal documenté;
  • React . , . ;
  • , — . JSX, , ;
  • . - , , , , , , , ;
  • . . , , , . React Angular;
  • (react-developer-tools, redux-dev-tools);
  • React , , .

React?


Alors, familiarisez-vous - faiblesse # 1: React n'est pas facile à apprendre . Et voici pourquoi:

1. React est une façon de penser complètement différente. Si vous travaillez avec lui, vous avez vraiment besoin de reconstruire. Dans React, contrairement aux autres frameworks, il n'y a que le concept de composition. Les gars de Facebook ont ​​conçu leur framework de manière à ce qu'il n'ait aucun héritage . Et ces mêmes gars de Facebook ont expliqué assez logiquement cet état de choses :

"Chez Facebook, nous utilisons React dans des milliers de composants, et nous n'avons trouvé aucun cas d'utilisation où nous recommanderions de créer des hiérarchies d'héritage de composants . "

En fait, cette déclaration n'est pas infondée, car dans la POO, il y a, bien sûr, de nombreux problèmes bien connus, par exemple, un nombre excessif d'abstractions. De plus, tous les développeurs ne sont pas partisans de la création d'incroyables chaînes d'héritage et c'est tout, bien que, bien sûr, un héritage soit nécessaire et utile.

2. Le deuxième point qui complique l'étude de React est qu'il ne contient que des recommandations et qu'il n'y a pas de règles rigides. Non seulement cela, tout en étudiant le cadre, est toujours supportable, mais lorsque vous arriverez à un vrai projet, vous serez très surpris. Le fait est qu'il n'y a pas deux projets identiques dans React, et dans chaque entreprise, un projet avec React est complètement individuel. Vous vous habituez à une situation, puis passez à une autre équipe et voyez que tout y est différent: d'autres bibliothèques, d'autres règles ... Et encore une fois, vous devez vous adapter et vous adapter. Comme on dit, il faut payer pour la flexibilité.

3. La troisième difficulté d'apprentissage - pour réussir à maîtriser React, un développeur doit avoir un niveau élevé. Non, React lui-même est simple et facile à écrire. Mais pour faire quelque chose de plus ou moins compliqué, vous devez avoir de bonnes compétences en programmation. S'il y a des lacunes dans les connaissances fondamentales de JS et TS, ce sera assez difficile pour vous et vous ne comprendrez pas tout.

Problème de choix


Parlons maintenant de la faiblesse numéro 2 - le problème du choix . C'est une variété dans laquelle il est facile de se perdre. Il y a vraiment beaucoup de choses. Des crochets sont récemment apparus - une conversation a commencé sur le fait que les classes ne sont plus nécessaires, les batailles React Hooks vs React Class ont commencé ... Tout le monde s'est précipité pour utiliser des crochets, puis ils ont dit que tout n'était pas clair et retourné à l'utilisation des classes, etc., etc. p ...

En fait, la bonne réponse à la question " React Hooks or React Class " n'existe pas. Ou, pour être plus précis, la bonne réponse dépend des conditions dans lesquelles vous posez cette question.

Une autre question se pose: "Comment vérifier les types"? Voyez nous avons:


Et là, nous avons à nouveau le problème du choix qui, pour être honnête, parfois instable. Bien sûr, tout est très variable, et dans le processus de travail avec certaines décisions, vous rencontrerez, mais vous n'en «verrez» jamais. Cela dépend complètement de la situation.

Encore une fois, il y a Create React App , Webpack.js et Babel , donc dès que vous commencez, vous aurez une question ici, quoi utiliser?

L'agonie de choix suivante est associée à l' État . Il y a Redux et il y a MobX , et à l'intérieur de Redux il y a aussi redux-saga et redux-thunk . Et il est difficile, sans essayer, de réaliser ce qu'il vaut mieux utiliser dans une situation spécifique.

Outre:

1. Routeur . Il y en a environ cinq, voici les plus populaires:


2. CSS-IN-JS . Dans le cadre de cette très bonne approche, au fait, il y a aussi un choix:


Pour résumer, vous pouvez lister les inconvénients React suivants :

  1. Seuil d'entrée élevé. Sans prétention, disons qu’il est difficile d’apprendre React. Y compris en raison de la très grande infrastructure.
  2. Beaucoup de temps pour étudier. Une fois que ce n'est pas facile à apprendre, préparez-vous à y consacrer du temps - sinon, pas question. Vous devez comprendre ce qui est quoi.
  3. Une très grande variété dans laquelle il est facile de se perdre. Il n'y a rien à ajouter.

Que signifie «beaucoup de temps d'étude»? En fait, si vous prenez n'importe quelle technologie, quelle que soit la douceur avec laquelle vous êtes présenté du point de vue du marketing, ne croyez pas les mots dans le style de "Vous apprendrez en seulement deux courtes leçons" - tout cela est absurde et ne fonctionne pas dans le monde réel . Trite, mais vrai: pour devenir quelque chose de vraiment bon spécialiste, vous devez passer beaucoup de temps. Et pour commencer à faire quelque chose, beaucoup de temps n'est pas nécessaire.

Quelle est la force, mon frère?


Malgré tout ce qui précède, React est une technologie très puissante. Premièrement, si vous êtes un professionnel, le travail sera très facile à trouver. Au contraire, il sera difficile de la refuser, car il y a tellement d'offres sur le marché:



le prochain plus est un grand nombre de bibliothèques et de solutions toutes faites. Ceci est indiqué par la même capture d'écran de GitHub (il y a plus d'un million de référentiels):



Si vous pensez simplement que ce serait bien de "gash this thing", il s'avère qu'il a déjà été fait par quelqu'un. La technologie est vraiment très populaire.

Outre:

  1. La diversité est un problème pour les débutants, mais pour un pro c'est un plus!
  2. React contient une énorme quantité de bonnes solutions.
  3. Vous pouvez développer des applications de toute complexité.
  4. Vous pouvez écrire dans n'importe quel style.

Support typographique


React a juste un excellent support de Typescript. Ce langage est bon, ne serait-ce que parce qu'il peut être utilisé pour écrire des types qui fonctionnent et aident vraiment. Et avec Typescript, vous pouvez écrire un système de types très solide. Essentiellement, Typescript est désormais un standard, et ce standard est dans React. Bien sûr, vous ne pouvez pas l'utiliser, préférant JavaScript. Cependant, sans Typescript, il est très difficile de faire quelque chose de sainement difficile, car sans types stricts, il est très difficile de travailler. Il est également difficile de prédire comment votre décision se comportera sans types stricts. C'est difficile à faire même avec des types, et sans eux c'est vraiment triste ...

En général, assurez-vous de travailler avec Typescript, car c'est une technologie très nécessaire:

- https://www.typescriptlang.org/docs/handbook/react-&- webpack.html.



Quelques conseils


Enfin, je voudrais faire quelques recommandations. Aujourd'hui, ils parlent beaucoup de POO, et vous pouvez facilement trouver une énorme quantité d'informations sur ce sujet. Et partout, vous serez écrit pour la millionième fois sur la classe de base Animal, et d'elle - sur Cat and Dog. Ou sur la voiture de classe de base, et de là - Ferrari et BMW. Et c'est tout ce qu'ils vous montreront de temps en temps et d'un manuel à l'autre, tandis que votre niveau de développeur augmentera en même temps que les escargots.

En même temps, il est clair qu'une attention insuffisante n'est pas accordée à la programmation fonctionnelle, dont la compréhension stimulera vraiment vos compétences. Si vous apprenez vraiment à l'utiliser correctement et correctement. L'un des livres les plus adéquats à ce jour est disponible gratuitement ici et est fortement recommandé pour la lecture:



Pourquoi est-il difficile d'apprendre la programmation fonctionnelle? Parce que très souvent les livres sont surchargés de mathématiques, de complexité académique, etc. Après le même livre, vous réussirez, car il est tout simplement merveilleux.

Pourquoi la programmation fonctionnelle est-elle importante? Parce que, une chose telle que Redux est construite sur les bases de base de la programmation fonctionnelle. Et après avoir maîtrisé au moins la programmation fonctionnelle de base, vous commencerez vraiment à écrire du code beaucoup mieux. L'essentiel est de tout comprendre correctement.

Le deuxième point dont je voudrais parler est l'architecture. Notre architecture est tout ! Il y a un très bon paradigme architectural appelé canards. Il s'agit de la façon de créer des applications React et Redux. Cette architecture mérite d'être recommandée pour une utilisation pratique.

L'idée elle-même est très intéressante et représente un ensemble de règles strictes et en même temps cool qui rendront votre structure de décision compréhensible et lisible. Ce n'est pas un longrid, il suffit donc de lire et de comprendre le contenu une fois. Après cela, vous pourrez organiser correctement vos applications. Le lien est joint.



Total


  1. Quiconque dit quoi que ce soit, React a un seuil d'entrée élevé. Même avec plusieurs années d'expérience en programmation JavaScript, préparez-vous à ce qui sera difficile et de nombreuses questions se poseront.
  2. React offre de très belles opportunités. Mais beaucoup a déjà été dit sur les pros, donc nous ne nous répéterons pas.
  3. Si vous êtes intéressé par l'histoire du développement de React, voici une bonne feuille de route .

C'est tout. Si vous êtes intéressé par la partie pratique de la leçon, regardez le webinaire à partir de maintenant . Une petite application web de test sera développée sur ReactJS, dont le code est disponible sur GitHub .

More articles:


All Articles