Bienvenue sur ce tutoriel de prise en main d'une stack (ensemble d'outils 🇫🇷) Javascript moderne : JavaScript Stack from Scratch.
❗ Il s'agit de la V2 du tutoriel, des changements majeurs sont apparus depuis la première version en 2016. Jetez un oeil au Change Log !
Il s'agit d'un guide allant droit au but sur comment mettre en place toute une stack JavaScript. Pour le suivre, il faut avoir un minimum de connaissances en programmation ainsi que des bases de JavaScript. Ce guide se concentre sur comment relier les outils ensemble et vous donne les exemples les plus simples possible pour chaque outil. Vous pouvez voir ce tutoriel comme *un moyen d'écrire votre boilerplate (modèle 🇫🇷 ) depuis zéro. Le but de ce tutoriel étant d'assembler divers outils, on ne va pas explorer en détails comment ces outils fonctionnent individuellement. Pour cela, référez-vous à leur documentation ou essayez de trouver d'autres tutoriels si vous voulez en acquérir une plus grande connaissance.
Vous n'avez pas besoin d'utiliser la stack entière si vous construisez une simple page web avec quelques interactions en JS (une combinaison Browserify/Webpack + Babel + jQuery est suffisant pour écrire en ES6 dans différents fichiers), mais si vous voulez construire une web app évolutive et avez besoin d'aide pour mettre tous les différents outils en place, alors ce tutoriel est parfait pour vous ! 👍
Une bonne partie de la stack décrite dans ce tutoriel utilise React. Si vous débutez et avez juste envie d'apprendre React, create-react-app (:uk:) vous permettra de mettre en place un environnement React très rapidement avec une config déjà préparée. Nous vous recommandons cette approche si par exemple vous arrivez dans une équipe qui utilise React et que vous avez besoin d'une petite mise à niveau avec un environnement d'apprentissage. Dans ce tutoriel, nous n'utiliserons pas de configuration toute prête car nous souhaitons que vous compreniez tout ce qui se passe sous le capot.
Des exemples de code sont disponibles pour chaque chapitre. Vous pouvez les lancer avec yarn && yarn start. Cependant, nous vous recommandons d'écrire tout par vous-même en suivant les instructions étape par étape. 😉
Le code final est disponible dans le repo JS-Stack-Boilerplate, et dans les releases. Il y a aussi une démo live.
Ce tutoriel fonctionne sur les plateformes suivantes: Linux, OSX, Windows.
02 - Babel, ES6, ESLint, Flow, Jest, Husky
06 - React Router, Server-Side Rendering, Helmet
09 - Travis, Coveralls, Heroku
Configurer votre éditeur (Atom dans un premier temps), MongoDB, Progressive Web App, test E2E.
Si vous souhaitez ajouter votre traduction, merci de lire les recommandations de traduction pour vous lancer !
- Bulgare par mihailgaberov
- Italien par Fabrizio Bertone - fbertone.it
- Chinois simplifié par @yepbug
- Français par Naomi Hauret
Vous pouvez jeter un oeil aux autres traductions en cours.
- 中文 par @pd4d10
- Italien par Fabrizio Bertone
- 日本語 par @takahashim
- Русский par React Theming
- ไทย par MicroBenz
Créé par @verekia – verekia.com. Traduit par @naomihauret
Licence: MIT