Bonjour à tous!
En juillet 2018, notre professeur
du cours de
développeur JavaScript, Yuri Dvorzhetsky, a organisé un webinaire ouvert sur le sujet «Créer une application sur Webpack + React + Express», dans le cadre du deuxième
cours , où il agit en tant que professeur dans l'un des modules dédiés à JavaScript. Dans ce matériel, vous pouvez vous familiariser avec la vidéo et un bref récit de la dernière classe de maître.
Le travail dans la leçon ouverte a été effectué selon le plan suivant:
- Présentation de Node JS et Express JS.
- Présentation de Webpack.
- Présentation de React.
Alors allons-y!
Node JS
Avec l'avènement du nouveau standard ES6, la popularité de JavaScript a considérablement augmenté, comme en témoignent les mêmes statistiques sur le nombre de demandes de pull sur GitHub pour 2017, où JS occupe la première place.
L'un des pilotes JS était Node JS, une plate-forme logicielle basée sur le moteur V8 (traduisant JavaScript en code machine) et transformant JavaScript d'un langage hautement spécialisé en un langage à usage général. Beaucoup de gens appellent Node JS «côté serveur» JavaScript, mais ici la définition de «serveur» plutôt que de «serveur» est plus appropriée. Par exemple, Node JS possède un environnement très riche, y compris son propre gestionnaire de packages appelé npm, que vous pouvez exécuter en toute sécurité sur votre machine (le référentiel est disponible sur npmjs.com). Et ce n'est pas le seul gestionnaire de paquets, il y en a d'autres. Le fichier de configuration est package.json et il est facile de deviner qu'il est configuré au format JSON.
Dans le cadre de l'introduction à Node JS, les utilisateurs ont été invités à effectuer les étapes suivantes:
- Téléchargez NodeJS depuis le site officiel nodejs.org/en/;
- installer sur un ordinateur et vérifier la version;
- assurez-vous que le nœud –v est en cours d'exécution dans la console.
L'étape suivante est la création du premier projet Node JS. Vous pouvez le faire de deux manières:
- commande npm init (continuez d'être d'accord avec tout en appuyant sur entrée);
- en téléchargeant le référentiel depuis le lien sur GitHub et en introduisant la commande git checkout 0.
La prochaine étape est d'apprendre à connaître Express JS.
Express js
Express JS est un serveur Web populaire pour les environnements Node JS. En termes de Python, c'est quelque chose comme Django, seulement là, en fait, il n'y a que des méthodes REST. Express JS est parfait pour créer des services REST qui acceptent et envoient JSON, mais en général, il est assez ascétique, donc tout ce dont vous avez besoin est accepté, comme on dit, «vissé». Soit dit en passant, d'autres serveurs Web sont également créés sur cette base. Dans ce cas, vous devez comprendre qu'Express est quelque chose comme un lien intermédiaire (middleware), qui doit encore être configuré et rempli de logique.
Dans le cadre du webinaire, Express JS a été installé à l'aide de la commande npm install express avec l'ajout du commutateur –save. Vous pouvez également vérifier dans un git (git checkout 1) avec l'installation d'orthographe npm. En conséquence, le dossier node_modules / a été créé et le contenu de package.json a changé (les dépendances correspondantes sont apparues).
Après les travaux préparatoires, il était temps d'écrire le serveur lui-même:
- Création du fichier /server.js à la racine du projet.
- Placer en elle un certain code écrit en JavaScript. Le but de ce script est:
- se faire exprimer par les "mystérieux" node_modules /;
- Ajout d'un gestionnaire à l'URL /;
- lancez Node JS (en utilisant la commande node server.js ou npm start).
Vous pouvez également vérifier le numéro de tag 2 (git checkout 2).
JS, ES6 et transpiling
Comme mentionné précédemment, ES6 est la norme JS actuelle. Il s'agit d'un ensemble de fonctionnalités qui ne sont entièrement prises en charge par aucun navigateur (seule une partie de l'ensemble est prise en charge). En conséquence, la question se pose: que se passe-t-il si nous voulons écrire sur l'ES6 moderne et que l'ES5.1 est pris en charge dans les navigateurs? Ici le transpiling vient à la rescousse. Son idée est la suivante:
- nous avons du code écrit en ES6;
- nous le compilons (ES6 est converti en ES5.1);
- le JS-ku résultant peut être placé sur les pages du navigateur.
En conséquence, il devient possible d'utiliser non seulement ES6, mais également différents dialectes et extensions, augmentant ainsi la puissance de JS, par exemple:
- JavaScript "Typed" JavaScript TypeScript (TS);
- JSX - XHTML dans JS (framework React);
- Flow - vérificateur de type statique.
Babel est l'un des transpilages les plus populaires et les plus puissants. C'est lui qui a été utilisé pour résoudre les problèmes de la leçon ouverte.
Avantages de l'assemblage:
- Vous pouvez collecter tous les fichiers JS dans un seul paquet;
- les faisceaux peuvent être minimisés et masqués;
- vous pouvez exécuter simultanément LESS-> CSS, etc.
Webpack
Webpack est l'un des collectionneurs les plus sophistiqués. Elle est conceptuellement compliquée, surtout en termes de terminologie, mais elle n'a pas d'égal, et la dernière version est plus simple que les précédentes. Cependant, vous ne devriez pas en avoir peur, car faire une config avec est un travail ponctuel. Et sans exagération, le nombre de petits pains inclus dans Webpack peut être "suralimenté".
Par exemple, webpack.config.js a été présenté aux auditeurs de webinaires et chaque ligne du fichier a été examinée en détail pour comprendre la terminologie dans son ensemble.
L'étape suivante consiste à créer un client avec React et Webpack préconfigurés (client npx minimal-react ou commande git checkout 3 pour les paresseux). Après cela, vous pouvez aller dans le dossier / client cd créé de cette manière et ouvrir le fichier webpack.config.js, dont un fragment a été montré un peu plus tôt.
Réagir
Peu à peu, le moment est venu de se familiariser avec React, une bibliothèque JavaScript open source pour développer des interfaces utilisateur.
Pour un premier regard sur React et une immersion «douce» dans son environnement, les étudiants ont été invités à ouvrir client / src / index.js et, si rien ne s'est produit, à ouvrir client / src / component / app.js.
Le cœur de React est JSX. Il s'agit d'un dialecte de JS et XHTML écrit en JS. Malgré le fait que React peut être utilisé sans JSX, toute sa puissance est précisément dans JSX. Quant à React lui-même, c'est l'un des frameworks les plus populaires selon Hackernoon, basé sur une approche par composants. Il dispose d'un grand nombre de packages de support et d'une énorme infrastructure. L'application elle-même est un ensemble de composants qui contiennent leur balisage et leur comportement.
Caractéristiques de React:
- les composants peuvent utiliser les uns les autres;
- ce JS s'exécute dans le navigateur;
- en réalité, il n'y a pas de balisage dans le navigateur, mais il apparaît lorsque le navigateur du client exécute ce code;
- les composants rendent leur note et les composants utilisés rendent la leur;
- le balisage n'a pas besoin d'être statique et ne l'est pas;
- Vous pouvez transmettre des informations aux composants enfants;
- les composants peuvent être rendus conditionnellement.
Après avoir pris connaissance de React, la partie pratique du webinaire s'est poursuivie, à la suite de laquelle les étapes suivantes ont été suivies:
- lancer webpack dans le dossier client (client / npm run dev);
- écrire votre propre composant simple selon les instructions de l'enseignant ou via git checkout 4 (Webpack n'a pas pu être arrêté).
Ensuite, les étudiants ont été invités à utiliser des objets accessoires et à effectuer un rendu typodynamique (git checkout 5).
Les nuances des accessoires:
- Contiennent les propriétés des composants
- Vous pouvez transférer non seulement des chaînes, mais également des objets;
- Idéalement, la communication sur la ligne de composants React repose toujours sur des accessoires.
Au stade final de la formation pratique, le backend et le serveur web étaient connectés (git checkout 6).
LA FIN
Merci de votre attention et comme toujours nous attendons vos commentaires et suggestions.