Skip to content

🎉 V2 release! 🎉 — Step-by-step tutorial to build a modern JavaScript stack.

License

Notifications You must be signed in to change notification settings

AmauryVanEspen/js-stack-from-scratch

 
 

Repository files navigation

JavaScript Stack from Scratch - FR

Build Status Release Dependencies Dev Dependencies Gitter

React Redux React Router Flow ESLint Jest Yarn Webpack Bootstrap

Bienvenue dans mon didacticiel moderne pour la pile JavaScript: JavaScript Stack from Scratch. ["EN FRANCAIS !"]

La version originale de ce didacticiel est disponible en anglais, nous tâcherons de maintenir au mieux à jour la traduction au travers des évolutions à venir

🎉 Ceci est la version V2 de ce didacticiel, des changements majeurs sont apparus depuis la version 2016. Vérifiez le Log de suivi des changement!

Il s'agit d'un guide direct pour le montage d'une pile JavaScript. Il nécessite une certaine connaissance de programmation générale et des bases de JavaScript. ** Il se concentre sur les outils d'interconnexion entre technologies ** et vous fournis l' ** exemple le plus simple possible ** pour chaque outil. Vous pouvez voir ce didacticiel comme * un moyen d'écrire votre propre modèle à partir de zéro *. Étant donné que le but de ce didacticiel est de rassembler divers outils, je n'entre pas dans les détails sur la façon dont ces outils fonctionnent individuellement. Reportez-vous à leur documentation ou trouvez d'autres didacticiels si vous souhaitez acquérir une connaissance plus approfondie de chacun d'eux.

Vous n'avez pas besoin d'utiliser cette pile entière si vous construisez une page Web simple avec quelques interactions JS bien sûr (une combinaison de Browserify / Webpack + Babel + jQuery est suffisante pour pouvoir écrire le code ES6 dans différents fichiers), mais Si vous voulez construire une application Web qui évolue, et que vous avez besoin d'aide pour configurer les choses, ce didacticiel fonctionnera très bien pour vous.

Un gros morceau de la pile décrit dans ce didacticiel utilise React. Si vous commencez et que vous voulez juste apprendre React, create-react-app vous mettra en route avec un environnement React très rapidement et avec un pré-configuration. Je recommanderais par exemple cette approche à quelqu'un qui arrive dans une équipe qui utilise React et a besoin de rattraper au travers d'un terrain de jeu d'apprentissage. Dans ce didacticiel, vous n'utiliserez pas de configuration pré-faite, car je veux que vous compreniez tout ce qui se passe sous le capot.

Des exemples de code sont disponibles pour chaque chapitre, et vous pouvez tous les exécuter avec yarn && yarn start. Cependant je recommande d'écrire tout à partir de zéro vous-même en suivant les ** instructions étape-par-étape **.

Le code final est disponible dans le Référentiel JS-Stack-Boilerplate, et dans le releases. Il existe également une démonstration en ligne.

Fonctionne sous Linux, macOS et Windows.

Table des matières

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

À suivre

Configuration de votre éditeur (Atom en premier), MongoDB, Progressive Web App.

Traductions

Si vous souhaitez ajouter votre traduction, veuillez lire les recommandations de traduction pour commencer!

V2

Etat de la traduction :

les fichiers marqués par une "*" ne seront pas traduits, ni le fichiers contenant du code"

FAIT

"/"

  • /.github*
  • /img*
  • README.me
  • how-to-translate.md
  • .gitignore*
  • .travis.yml*
  • mdlint.js*
  • package.json*
  • yarn.lock*
EN COURS
  • CHANGELOG.md
  • LICENSE.md
A FAIRE
  • /tutorial
    • 01-node-yarn-package-json.md
    • 02-babel-es6-eslint-flow-jest-husky.md
    • 03-express-nodemon-pm2.md
    • 04-webpack-react-hmr.md
    • 05-redux-immutable-fetch.md
    • 06-react-router-ssr-helmet.md
    • 07-socket-io.md
    • 08-bootstrap-jss.md
    • 09-travis-coveralls-heroku.md

Votre lien ici bientôt ;)

Consultez les traductions en cours.

V1

Crédits

Crée par @verekiaverekia.com. Traduit en Français (en cours) par @AmauryVanEspen.

Licence: MIT

About

🎉 V2 release! 🎉 — Step-by-step tutorial to build a modern JavaScript stack.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%