🛠️⚡ Step-by-step tutorial to build a modern JavaScript stack.
Switch branches/tags
Clone or download
Pull request Compare This branch is 15 commits ahead, 9 commits behind verekia:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github
img
tutorial
.gitignore
.travis.yml
CHANGELOG.md
LICENSE.md
README.md
how-to-translate.md
mdlint.js
package.json
yarn.lock

README.md

JavaScript Stack from Scratch 👌

Build Status Release Dependencies Dev Dependencies Gitter

React Redux React Router Flow ESLint Jest Yarn Webpack Bootstrap

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 (🇬🇧) 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.

Sommaire

01 - Node, Yarn, package.json

02 - Babel, ES6, ESLint, Flow, Jest, Husky

03 - Express, Nodemon, PM2

04 - Webpack, React, HMR

05 - Redux, Immutable, Fetch

06 - React Router, Server-Side Rendering, Helmet

07 - Socket.IO

08 - Bootstrap, JSS

09 - Travis, Coveralls, Heroku

A venir 🔥

Configurer votre éditeur (Atom dans un premier temps), MongoDB, Progressive Web App, test E2E.

Traductions 🇬🇧 🇫🇷 🇩🇪 🇨🇳 🇯🇵 🇷🇺

Si vous souhaitez ajouter votre traduction, merci de lire les recommandations de traduction pour vous lancer !

V2

Vous pouvez jeter un oeil aux autres traductions en cours.

V1 👶

Crédits

Créé par @verekiaverekia.com. Traduit par @naomihauret

Licence: MIT