Geekly articles weekly

Comment devenir développeur React en 2018



Malgré le fait que le message a été écrit cette année, vous n'aurez probablement pas le temps d'étudier l'ensemble du programme proposé pour les mois restants. Par conséquent, vous pouvez emporter en toute sécurité la carte du développeur avec vous l'année prochaine.

Adam Golab, un expert sur React et JS, a compilé un programme étape par étape qui vous aidera à devenir un développeur à partir de zéro ou à indiquer une direction pour améliorer davantage vos compétences dans la profession.

Le plan d'Adam est une liste des principaux points que vous devez étudier vous-même. Nous avons ajouté une description et, dans certains moments difficiles, nous avons fourni des liens vers des documents de référence supplémentaires, à l'aide desquels vous obtiendrez la réponse à la question: «Que dois-je apprendre en tant que développeur React?».

Voici le schéma original pour devenir développeur React.



  1. Les bases
    • HTML
      • Apprenez les bases du HTML.
      • Créez des pages HTML.

    • CSS
      • Apprenez les bases du CSS.
      • Ajoutez CSS aux pages de l'étape précédente.
      • Créez une page avec grille et flexbox.

    • Les bases de JS
      • Découvrez la syntaxe.
      • Apprenez les opérations de base du modèle d'objet de document.
      • Apprenez les mécanismes spécifiques au travail avec JS (Hoisting, Event Bubbling, Prototyping).
      • Passez des appels AJAX (XHR).
      • Découvrez de nouvelles fonctionnalités (ECMA Script 6+).
      • Si possible, consultez la bibliothèque jQuery.


  2. Compétences générales des développeurs

  3. Consultez la documentation React sur le site officiel ou suivez des cours .
  4. En savoir plus sur les outils que vous utiliserez.
    • Répartiteurs de colis Actuellement, il existe plusieurs gestionnaires de packages concurrents similaires qui aident à automatiser le téléchargement et la mise à jour des bibliothèques à partir d'un référentiel central. En 2013, le plus populaire était Bower , qui en 2015 avait perdu la palme npm. Depuis fin 2016, le fil est largement utilisé comme alternative à l'interface npm.
      • Npm
      • Fil
      • Pnpm n'est pas non plus perdu dans le contexte général - c'est un répartiteur d'espace disque rapide et efficace. Contrairement à yarn et npm, il maintient un cache global pour chaque version jamais installée du package, des liens vers des packages à partir desquels sont créés dans le dossier node_modules du projet.

    • Outils de gestion des tâches.
      • scripts npm
      • système de construction de gulp. L'un des outils d'automatisation les plus populaires pour diverses opérations du processus d'assemblage. Utilise des plugins qui agissent comme des wrappers pour d'autres outils qui ont besoin d'une ligne de commande.
      • Webpack. Un outil pour assembler des modules en packages uniques (bundler) avec accès au système de fichiers. Les packages résultants sont compatibles avec un navigateur qui n'a pas besoin d'accéder au système de fichiers.
      • Rollup. Un autre bundler a appelé l' alternative Webpack plus compacte et efficace pour combiner des fichiers JavaScript.
      • Colis. Bundler petit et rapide pour les petits projets. Il ne nécessite aucune configuration et est prêt à fonctionner immédiatement après l'installation. Les détails peuvent être trouvés dans l' article .

  5. Style de code
    • Préprocesseurs CSS
      • Sass / CSS. Sass a transformé CSS en un langage de programmation décent, présenté comme un moteur de prétraitement qui implémente l'imbrication, les variables, les mixins, les extensions et la logique dans les feuilles de style. De cette façon, vous pouvez mieux organiser vos fichiers CSS, vous aurez accès à plusieurs façons de décomposer de gros morceaux de code CSS en fichiers plus petits. Nous en avons parlé plus en détail dans l'article «L' évolution du CSS: des modules CSS, SASS, BEM et CSS aux composants stylisés ».
      • PostCSS. La deuxième génération de processeur modulaire qui étend les capacités du CSS de base à l'aide de JavaScript. PostCSS est idéal pour écrire vos propres convertisseurs CSS en tant que plugins.
      • Moins. Un autre cadre qui simplifie l'utilisation des styles en ajoutant des variables, des mixins, des fonctions et de nombreuses autres techniques qui rendront CSS plus maintenable et extensible.
      • Stylet. La prochaine génération de préprocesseurs. Nous l'avons utilisé pour unifier la conception de 11 projets de contenu. Le stylet est flexible, facile à entretenir (correction de bugs) et très efficace.

    • Cadres CSS
      • Bootstrap. Un ensemble gratuit d'outils pour créer des interfaces de site et des applications Web, classé deuxième en nombre d'étoiles sur GitHub.
      • Materialise , Material UI , Material Design Lite. Les cadres du langage visuel Material Design, le plus souvent utilisés dans les applications mobiles (par exemple, dans de nombreuses applications mobiles Google).
      • Bulma. Architecture CSS modulaire réactive basée sur Flexbox.
      • UI sémantique. Un cadre pour créer des interfaces portables qui aideront à réutiliser des éléments d'interface utilisateur dans vos projets. Une bonne alternative à Bootstrap pour les interfaces de prototypage directement dans le code.

    • Architecture CSS
      • BEM. BEM (BEM - Block, Element, Modifier) ​​- approche composante du développement web. Il est basé sur le principe de la division d'une interface en blocs indépendants. Il vous permet de développer facilement et rapidement des interfaces de toute complexité et de réutiliser le code existant, en évitant le copier-coller. Il est périodiquement critiqué en raison de l'allongement des noms de classe, de la dépendance des éléments sur le nom du bloc, mais aussi en raison des difficultés d'héritage des modificateurs.
      • Modules CSS. Un module CSS est un fichier CSS dans lequel tous les noms de classe et d'animation ont une portée locale par défaut. Les modules sont basés sur l'idée de créer des noms de classe dynamiques pour chaque style défini localement. Cette méthode nous a permis de nous débarrasser des régressions visuelles résultant de l'introduction de nouvelles propriétés CSS.
      • Atomique Une manière de structurer CSS qui évite les «classes sémantiques» au profit de petites classes spécialisées. Lorsque vous utilisez Atomic CSS, vous utilisez des classes avec des fonctions de syntaxe qui peuvent être utilisées pour générer la feuille de style appropriée.
      • OOCSS. CSS orienté objet (CSS orienté objet) est l'opposé de la méthodologie atomique susmentionnée. Il est basé sur les principes de séparation de la structure de la coque et du contenu du conteneur. OOCSS est assez compliqué dans la pratique, car il ne propose pas de règles spécifiques, mais des recommandations abstraites. Par conséquent, certains développeurs ont repris les idées de base d'OOCSS et les ont améliorées pour créer des façons plus spécifiques de structurer le code.
      • SMACSS SMACSS (architecture évolutive et modulaire pour CSS, architecture évolutive et modulaire pour CSS) a repris les concepts clés OOCSS, mais a réduit la quantité de code et simplifié son support pour le rendre plus facile à utiliser.
      • SUIT CSS. Outils de style pour les composants d'interface. SUIT CSS fonctionne bien avec React, Ember, Angular.

    • CSS dans JS
      • Composants stylisés. Les composants stylisés sont des primitives visuelles qui servent de wrapper. Ils peuvent être liés à des balises HTML spécifiques qui enveloppent simplement les composants enfants avec les composants Styled. Au lieu de créer des styles, qui sont ensuite liés manuellement aux composants, comme dans les capacités CSS standard, les composants stylisés approchent directement les composants. En savoir plus dans l'article CSS Evolution .
      • Radium Un ensemble d'outils pour gérer les styles en ligne qui prend en charge les requêtes multimédias et les pseudo-classes.
      • Émotion Une bibliothèque légère hautes performances qui minimise les coûts d'exécution CSS-in-JS grâce à l'analyse de style avec babel et PostCSS. Le noyau de la bibliothèque à l'exécution est de 2,3 Ko, le support de React est de 4 Ko.
      • JSS L'une des premières bibliothèques CSS-in-JS pour générer de vrais CSS, pas des styles en ligne.
      • Aphrodite. Comme d'autres bibliothèques, il aide souvent à organiser la génération de CSS critiques et le rendu HTML sur le serveur en un seul appel, mais Aphrodite présente des avantages importants - une migration simple et une faible courbe d'apprentissage. Comment Aphrodite améliore la productivité avec, lisez l'article CSS en ligne à Khan Academy: article d' Aphrodite .

  6. Gestion de l'état des applications

    • API État / Contexte du composant . Tout état et toute architecture ont un état. Dans React, l'état est utilisé pour transférer et capturer des données qui changent au fil du temps. L'API contextuelle, qui prend en charge la vérification de type statique et les mises à jour approfondies, a été ajoutée dans React 16.3.
    • Redux Une petite bibliothèque populaire et efficace qui fournit une API compacte qui résout de manière compétente de nombreux problèmes en introduisant un modèle d'état simple et prévisible, ainsi qu'en utilisant un biais dans la programmation fonctionnelle et les données immuables.
    • Appels asynchrones (effets secondaires)

      • Redux-thunk. Une approche simple et largement utilisée pour gérer l'asynchronie. Redux-Thunk introduit le concept d'un thunk, qui fournit une exécution différée selon les besoins.
      • Redux-Better-Promise. Une autre approche simple et efficace prenant en charge les opérations asynchrones et bien plus encore.
      • Redux-Saga. Une bibliothèque avancée qui simplifie et améliore les effets secondaires en travaillant avec des sagas. Les sagas sont un modèle de conception issu du monde des transactions distribuées. Dans le contexte de Redux, la saga est implémentée comme une couche intermédiaire qui coordonne et encourage les actions asynchrones. Plus de détails sont écrits dans l'article « Comprendre la redux-saga: des générateurs d'actions aux sagas », et même dans l'article « Sagas » publié en 1987 - c'était la première description de la saga en relation avec les systèmes distribués.
      • Redux-observable Une alternative à Redux-Saga, bien que beaucoup indiquent que sagas = observable. D'un point de vue formel, il s'agit simplement d'une interface différente pour accéder à la même entité; le code est très similaire.

    • Helpers (amélioration de Redux)

      • Rematch Rematch sert de wrapper autour de Redux, offrant aux développeurs une API simplifiée. Supprime les types d'actions, les générateurs d'actions et les instructions switch (thunks).
      • Resélectionnez Une bibliothèque avec de nombreuses fonctionnalités qui améliorent Redux. Par exemple, Reselect permet d'éliminer les composants de rendu inutiles et crée des sélecteurs complexes avec mise en cache automatique. D'autres fonctionnalités peuvent être trouvées dans l' article .

    • Transfert de données

      • Redux-Persist. Un outil pour charger le stockage redux dans le stockage local et le restaurer (d'autres emplacements de stockage sont pris en charge).
      • Redux Phoenix Phoenix gère les ressources statiques à l'aide de npm et les collecte directement hors de la boîte à l'aide de Brunch ou Webpack. L'intégration de React et Redux avec le framework Phoenix est inspirée du bundle elixir-react-redux-example, dans lequel Phoenix tire parti de la capacité d'Erlang VM à gérer des millions de connexions, ainsi que de la belle syntaxe d'Elixir et de son puissant ensemble d'outils.
      • Redux-Form. La bibliothèque Redux-Form suit le schéma de la bibliothèque Redux (vue → action → middlewares → réducteurs → état → vue) selon le même principe, mais pour les formulaires (« Redux-form. Quand travailler avec des formulaires est simple »).

    • MobX Bibliothèque MobX autonome simple, également utilisée en conjonction avec React. Vous permet de mettre à jour uniquement les composants qui dépendent des données modifiées.

  7. Vérification de type

    • PropTypes. Un module pour vérifier les types de propriétés React et objets similaires en mode runtime. PropTypes vérifie la propriété transmise au composant par rapport au type souhaité. Ce mécanisme de vérification n'est actuellement pas inclus dans React par défaut; pour l'utiliser, vous devrez ajouter cette fonctionnalité au projet en tant que dépendance.
    • TypeScript Typescript est un langage de programmation de script introduit par Microsoft en 2012. Il est similaire au JavaScript de prochaine génération, mais avec l'ajout de la saisie statique facultative. Vous permet de décrire plus complètement les propriétés et méthodes des objets et des classes, éliminant ainsi la nécessité de vérifier tous les arguments inclus dans une méthode ou une fonction.
    • Débit Une bibliothèque open source pour la vérification de type statique qui vous permet d'ajouter progressivement des types à votre code JavaScript. Une introduction à la syntaxe et au langage de Flow dans un article .

  8. Assistants de formulaire

    • Formulaire redux
    • Formik. Une solution simple et pratique qui simplifie la réception de données à partir d'un formulaire, la validation des données, l'affichage des messages d'erreur, et bien plus encore.
    • Formsy. Un validateur de formulaire flexible contenant un ensemble de règles de validation de base telles que isEmail. Assez facile à utiliser.
    • Formulaire final La bibliothèque est basée sur le modèle Observer, où les observateurs peuvent s'abonner pour recevoir des mises à jour de formulaire ou de champ. Il n'a pas de dépendances et est lui-même indépendant des frameworks. React Final Form - Un wrapper autour de Final Form qui vous permet de l'utiliser avec React. Plus de détails dans l'article « Formulaire final: La route vers le drapeau à damier ».

  9. Routage (changement d'URL lors du passage d'une page à l'autre)

    • React-router Une bibliothèque populaire avec plusieurs dizaines de milliers d'étoiles sur Github, avec de puissantes capacités d'imbrication de routes, une bonne abstraction de haut niveau et la possibilité de créer des solutions très flexibles. La philosophie du projet est basée sur le «routage dynamique» par opposition au «routage statique» dans les projets Rails, Express, Ember, Angular et autres.
    • Routeur 5. Une alternative assez simple, fonctionnant côté client et côté serveur, offrant un contrôle complet sur les transitions.
    • Routeur Redux-First. Il existe toujours un moyen plus simple de router lorsque vous utilisez Redux. Redux-First Router est une tentative de trouver un moyen de travailler plus rapide et plus intuitif. Il synchronise automatiquement l'état et l'URL de l'application dans les deux sens, fonctionne dès le départ au niveau «définir et oublier», contient toutes les données d'application dans Redux, y compris les données de routage.
    • Reach Router Il existe de nombreuses solutions de routage créées pour React et Redux avec diverses API, fonctionnalités et objectifs. Et la liste ne fait que s'allonger. Reach Router est un routeur axé sur la disponibilité des interfaces: contrôle du focus, liens relatifs, configurations imbriquées.

  10. Clients API

    • L'API REST (REpresentational State Transfer) est un moyen facile d'interagir avec l'architecture du backend sans avoir à comprendre cette architecture. L'API REST vous permet d'interagir avec les ressources sur le Web, en se concentrant sur le développement frontal et sans se soucier de l'architecture.
      • Récupérer Une API de prise en charge des appels asynchrones qui peut être utilisée pour récupérer plusieurs ressources Web en parallèle. La récupération vous permet de faire des requêtes similaires à XMLHttpRequest (XHR). La principale différence est que l'API Fetch utilise des promesses, grâce auxquelles vous pouvez utiliser une API plus simple et plus propre, éviter un nombre désastreux de rappels et la nécessité de se souvenir de l'API pour XMLHttpRequest.
      • SuperAgent. Une petite API progressive, créée avec flexibilité, lisibilité et facilité d'étude, qui possède de nombreuses fonctionnalités d'un client HTTP de haut niveau.
      • Axios . Une bibliothèque pour effectuer des requêtes HTTP dans Node.js ou XMLHttpRequests dans un navigateur. Il prend en charge les promesses, la conversion automatique des données JSON, fonctionne de la même manière sur le serveur et sur le client.

    • GraphQL. Un langage de requête API qui permet au client de déterminer strictement quelles données le serveur doit lui envoyer (la structure et la quantité de données sont déterminées par l'application client). Il a été développé comme une alternative à l'architecture REST typique. En utilisant GraphQL, vous pouvez obtenir toutes les données nécessaires pour rendre un composant en une seule requête au serveur. Chez GraphQL, les développeurs décrivent les données nécessaires à une interface à l'aide d'un langage déclaratif. Les bibliothèques sont construites au-dessus de la langue, ce qui sera discuté plus tard.

      • Apollo Apollo, qui vous permet d'exécuter des requêtes GraphQL dans un navigateur, offre un moyen pratique de travailler avec des données dans les applications React. Le plus souvent, travailler avec des données dans le client Apollo est plus facile que d'utiliser Redux, bien que l'écosystème Redux entier avec de nombreux outils et bibliothèques soit disponible dans les applications Apollo. La combinaison de React, Apollo-client et GraphQL simplifie considérablement le développement des applications React.
      • Relais Propre outil de Facebook, adapté à leurs besoins. On pense que pour cette raison, pour certains utilisateurs, il peut être un peu redondant. À partir de zéro, la version Relay Modern a été créée - plus facile à utiliser, plus extensible et, surtout, capable d'augmenter la productivité sur les appareils mobiles.
      • Urql. Le client Universal React Query Library, qui apparaît comme un ensemble de composants ReactJS, est conçu pour rendre GraphQL côté client aussi simple que possible.
  11. Bibliothèques

    • Lodash Une bibliothèque qui offre un grand nombre de fonctions d'assistance pour les objets JS. Lodash simplifie JavaScript en éliminant la nécessité de travailler avec des tableaux, des nombres, des objets, des chaînes, etc. Fournit des fonctions utilitaires pour les tâches générales à l'aide du paradigme de programmation fonctionnelle.
    • Moment. Une bibliothèque pratique pour travailler avec des dates et des heures en JavaScript, dont le nom fait doucement allusion. Le concept de travail peut être retracé dans cet article: « Compter les jours ouvrables avec Moment.js ».
    • Noms de classe Une bibliothèque pour l'union conditionnelle simple des noms de classe.
    • Chiffre Bibliothèque pour un formatage pratique des nombres. Le chiffre vous permet de spécifier le nombre de décimales, la déclinaison des noms en fonction du nombre, le nombre de mots, les caractères de séparation pour la partie fractionnaire et le groupe de chiffres, le format de présentation des devises, etc.
    • RxJS. Une bibliothèque modulaire qui vous permet de créer et de composer des flux de données. En utilisant RxJS, vous pouvez transformer des séquences d'actions complexes en un code concis facile à utiliser, mais il faut du temps et un certain niveau de préparation pour maîtriser cet outil.
    • Ramda. Comme Scott Sayet l'a souligné dans Why Ramda? ", Ramda propose un style de codage emprunté aux langages de programmation fonctionnels. Ici, le mécanisme de création d'une logique fonctionnelle complexe est implémenté à l'aide de la composition. D'un autre côté, la plupart des fonctionnalités de base de Ramda sont déjà couvertes par Underscore et Lodash .

  12. Test

    • Tests unitaires
      • Blague. Un cadre qui fournit une plate-forme pour les tests unitaires automatisés, ainsi qu'une bibliothèque principale qui vous permet de créer des instructions (Expect). Jest est basé sur Jasmine, mais l'API vous permet d'utiliser un moteur différent. Le cadre est facile à configurer et s'intègre facilement dans les projets, possède de grandes fonctionnalités. Pendant les tests, il exécute du code avec des paramètres d'entrée et compare le résultat avec l'attente.
      • Enzyme Enzyme peut être appelé un module complémentaire sur trois autres bibliothèques: React Test Utils, JSDOM (une implémentation JS de DOM qui vous permet d'émuler un navigateur), CheerIO (un analogue de Jquery pour travailler avec des éléments DOM). Ainsi, Enzyme combine les capacités de ces bibliothèques et ajoute de nouvelles fonctionnalités, qui sont décrites plus en détail dans la documentation.
      • Sinon. Sinon vous permet de tester en utilisant ce que l'on appelle des espions (espion), des talons (talon) et des imitations (maquette). . Sinon (fakeserver), AJAX-.
      • Mocha. , -. . , .
      • Chai. Assertion library — . Chai, Mocha, assertions. Chai assertions: should, expect, assert. Chai Chai HTTP, HTTP-. , Mocha Chai — API, .
      • AVA. , node.js-, . , , , .
      • Tape. , API. Tape beforeEach, . , JS.

      JavaScript- .
    • (end-to-end)

      • Selenium , Webdriver. , , , , , , .
        Selenium , , , , . Selenium .

        Selenium Webdriver — : UI, , .. Webdriver , .
      • Cypress. , , . Cypress , . 2018- - .
      • Puppeteer. Node.js, Chrome . Puppeteer , , . Puppeteer -, . .
      • Cucumber.js. , , «» , (Behaviour Driven Development). -, . Cucumber , , JS.
      • Nightwatch.js. Selenium (Nightwatch Webdriver), Chromedriver . Nightwatch Chromedriver, Chromedriver ChromeBrowser . Nightwatch .

    • ( )
      • Karma. Test-runner JavaScript . Karma -, . .






    • Next.js. , « » . React, Webpack Babel. , .
    • After.js. Next.js React- . React Router 4.
    • Rogue. «» . , /pages ( Next.js) routes.js (, , Afterjs). , , App.js. Rogue State Management (Redux) CSS-in-JS (Emotion / Styled-Components).




  16. backend-



    • React Native. iOS Android JavaScript. , , , Objective-C Java. React Native , iOS Android.
    • Cordova / Phonegap. Cordova — , Apache. Apache Cordova HTML, CSS JavaScript, API . Phonegap JavaScript ( HTML5/CSS) . , , . , Cordova — open source, Phonegap Adobe. , Phonegap HTML5 Adobe.



    • Proton Native. React , React Native. , React, Redux. Node.js. Proton Native , React Native . , , Electron.
    • Electron. , Node.js, , HTML, CSS JavaScript. , Electron, -, .
    • React Native Windows. React Native . Windows 10, Windows 10 Mobile XboxOne (UWP).



    • React 360. JavaScript React . React 360 VR-. Chrome, Firefox Edge.


Conclusion


, React. , . , , , , . , , , .

Source: https://habr.com/ru/post/fr425821/

More articles:


All Articles