Préface

Tout d'abord, je me présente, je m'appelle Edik , je suis développeur Web Full Stack. Les directions principales de Laravel & React.js, Vue.js. Apprendre le GoLang et Swift.

Bien qu'il existe déjà de nombreuses autres sources d'information, les livres restent l'une des plus courantes, mais il y a beaucoup d'eau en eux et j'ai décidé de ne pas trouver une autre béquille, mais juste de prendre des notes.

Pour structurer les données, les informations seront présentées sous la forme d'une série d'articles divisés en chapitres .

J'écris ces notes pour moi et j'ai décidé de les partager avec le monde entier. Alors ne soyez pas sévère. Et c'est parti!

Chapitre 1. Bienvenue dans React

React est une bibliothèque populaire utilisée pour créer des interfaces utilisateur . Il a été créé sur Facebook pour résoudre un certain nombre de problèmes liés aux sites à grande échelle.

Réagissez comme une bibliothèque

Il convient de noter que la bibliothèque n'est pas de grande taille et n'est utilisée que pour une partie de l'ensemble du travail. Les principales décisions concernant les outils écosystémiques à utiliser sont prises par les développeurs. React est le seul "V" dans le monde "MVC" .

Nouvelle syntaxe ECMAScript

React tire parti des nouvelles fonctionnalités ECMAScript . Si vous n'êtes pas familier avec la dernière spécification, la visualisation du code React peut entraîner une insécurité.

JavaScript fonctionnellement populaire

Un script JavaScript n'est pas un langage fonctionnel, mais des méthodes fonctionnelles peuvent être utilisées dans son code. React met l'accent sur la priorité de la programmation fonctionnelle sur la programmation orientée objet . Ce changement de mentalité peut conduire à des avantages importants dans des domaines tels que les tests et les gains de productivité.

Avant de commencer à travailler avec React, je vous recommande de vous familiariser avec les bases du paradigme de programmation fonctionnelle.

Javascript fastidieux

Pour travailler avec React, vous devez apprendre les bases de Webpack . Webpack vous permettra de tester le code, de le décomposer en modules, de le compresser pour la production, etc.

L'avenir de la bibliothèque React

La prochaine version de la bibliothèque comprendra l'outil Fibre - une nouvelle implémentation de l'algorithme principal React, dont le but est d'augmenter la vitesse de sortie de l'image sur l'écran . De nombreux changements sont liés aux appareils cibles. N'oubliez pas que React est toujours utilisé dans React Native.

Travailler avec des fichiers

React Developer Tools

Il existe plusieurs outils qui peuvent être installés en tant qu'extensions ou modules de navigateur supplémentaires et peuvent nous intéresser:

react-detection est une extension du navigateur Chrome qui vous permet de savoir quels sites utilisent React .

show-me-the-react est un autre outil de détection de React .

React Developer Tools est un module complémentaire qui étend les fonctionnalités des outils de navigation . Il crée un nouvel onglet dans les outils du développeur où vous pouvez voir les éléments React en détail .

React Developer Tools est un excellent outil qui permet de gagner beaucoup de temps lors du débogage. Si vous souhaitez écrire professionnellement avec React, ce module vous est très utile.

Installez Node.js

Node.js - langage JavaScript sans navigateur (JS côté serveur). Il s'agit de l' environnement d'exécution utilisé pour créer des applications JavaScript à la fois côté client et côté serveur . Il peut être installé sur Windows, MacOS, Linux et d'autres plateformes.

Vous pouvez trouver les détails d'installation sur le site Web officiel de Node.js.

Pour utiliser React, Node n'est pas nécessaire. Mais lorsque vous travaillez avec React, vous devrez utiliser un gestionnaire de packages appelé NPM pour installer les dépendances . Il s'installe automatiquement avec Node.

Pour vérifier si Node est installé dans le terminal, entrez node -v . Vous devriez voir la version de votre nœud.

 $ node -v v.10.13.0 

Alternative au NPM

Une alternative supplémentaire au NPM est le fil . Cet outil a été publié par Facebook en collaboration avec Exponent, Google et Tilde. Il permet de gérer de manière plus fiable les dépendances des applications . Lorsque vous travaillez avec Yarn, vous remarquerez qu'il est plus rapide que NPM.

L'installation du fil est très facile. Après avoir installé Node, entrez:

 $ npm install -g yarn 

Vous pouvez trouver les détails d'installation sur le site officiel de Yarn .

Et après cela, tout sera prêt à installer des packages. Lors de l'installation de dépendances à partir de packege.json, vous pouvez exécuter yarn au lieu de npm install .

Ajout d'un package à l'aide de Yarn:

 $ yarn add [_] 

Suppression d'un package à l'aide de Yarn:

 $ yarn remove [_]