[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3163":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":46,"readmeContent":47,"aiSummary":48,"trendingCount":16,"starSnapshotCount":16,"syncStatus":18,"lastSyncTime":49,"discoverSource":50},3163,"js-stack-from-scratch","verekia\u002Fjs-stack-from-scratch","verekia","🛠️⚡ Step-by-step tutorial to build a modern JavaScript stack.","",null,"JavaScript",20181,1964,578,40,0,1,2,3,44.88,"MIT License",false,"master",true,[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],"bootstrap","eslint","flow","heroku","immutablejs","javascript","jest","jss","nodemon","pm2","react","react-router","redux","server-side-rendering","sinon","socket-io","stack","tutorial","webpack","yarn","2026-06-12 02:00:46","# JavaScript Stack from Scratch\n\n[![Build Status](https:\u002F\u002Ftravis-ci.org\u002Fverekia\u002Fjs-stack-from-scratch.svg?branch=master)](https:\u002F\u002Ftravis-ci.org\u002Fverekia\u002Fjs-stack-from-scratch)\n[![Release](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Frelease\u002Fverekia\u002Fjs-stack-from-scratch.svg?style=flat-square)](https:\u002F\u002Fgithub.com\u002Fverekia\u002Fjs-stack-from-scratch\u002Freleases)\n[![Gitter](https:\u002F\u002Fimg.shields.io\u002Fgitter\u002Froom\u002Fjs-stack-from-scratch\u002FLobby.svg?style=flat-square)](https:\u002F\u002Fgitter.im\u002Fjs-stack-from-scratch\u002F)\n\n[![React](\u002Fimg\u002Freact-padded-90.png)](https:\u002F\u002Ffacebook.github.io\u002Freact\u002F)\n[![Redux](\u002Fimg\u002Fredux-padded-90.png)](http:\u002F\u002Fredux.js.org\u002F)\n[![React Router](\u002Fimg\u002Freact-router-padded-90.png)](https:\u002F\u002Fgithub.com\u002FReactTraining\u002Freact-router)\n[![Flow](\u002Fimg\u002Fflow-padded-90.png)](https:\u002F\u002Fflowtype.org\u002F)\n[![ESLint](\u002Fimg\u002Feslint-padded-90.png)](http:\u002F\u002Feslint.org\u002F)\n[![Jest](\u002Fimg\u002Fjest-padded-90.png)](https:\u002F\u002Ffacebook.github.io\u002Fjest\u002F)\n[![Yarn](\u002Fimg\u002Fyarn-padded-90.png)](https:\u002F\u002Fyarnpkg.com\u002F)\n[![Webpack](\u002Fimg\u002Fwebpack-padded-90.png)](https:\u002F\u002Fwebpack.github.io\u002F)\n\nWelcome to my modern JavaScript stack tutorial: **JavaScript Stack from Scratch**.\n\n> 🎉 **This is the V2 of the tutorial, major changes happened since the 2016 release. Check the [Change Log](\u002FCHANGELOG.md)!**\n\nThis is a straight-to-the-point guide to assembling a JavaScript stack. It requires some general programming knowledge, and JavaScript basics. **It focuses on wiring tools together** and giving you the **simplest possible example** for each tool. You can see this tutorial as *a way to write your own boilerplate from scratch*. Since the goal of this tutorial is to assemble various tools, I do not go into details about how these tools work individually. Refer to their documentation or find other tutorials if you want to acquire deeper knowledge in them.\n\nYou don't need to use this entire stack if you build a simple web page with a few JS interactions of course (a combination of Browserify\u002FWebpack + Babel + jQuery is enough to be able to write ES6 code in different files), but if you want to build a web app that scales, and need help setting things up, this tutorial will work great for you.\n\nA big chunk of the stack described in this tutorial uses React. If you are beginning and just want to learn React, [create-react-app](https:\u002F\u002Fgithub.com\u002Ffacebookincubator\u002Fcreate-react-app) will get you up and running with a React environment very quickly with a pre-made configuration. I would for instance recommend this approach to someone who arrives in a team that's using React and needs to catch up with a learning playground. In this tutorial you won't use a pre-made configuration, because I want you to understand everything that's happening under the hood.\n\nCode examples are available for each chapter, and you can run them all with `yarn && yarn start`. I recommend writing everything from scratch yourself by following the **step-by-step instructions** though.\n\nFinal code available in the [JS-Stack-Boilerplate repository](https:\u002F\u002Fgithub.com\u002Fverekia\u002Fjs-stack-boilerplate), and in the [releases](https:\u002F\u002Fgithub.com\u002Fverekia\u002Fjs-stack-from-scratch\u002Freleases). There is a [live demo](https:\u002F\u002Fjs-stack.herokuapp.com\u002F) too.\n\nWorks on Linux, macOS, and Windows.\n\n> **Note**: Since the tutorial was last edited in May 2017, a few libraries have slightly changed their APIs. 95% of the tutorial is still perfectly valid, but if you run into something weird, make sure to check out the [open issues](https:\u002F\u002Fgithub.com\u002Fverekia\u002Fjs-stack-from-scratch\u002Fissues?q=is%3Aopen+is%3Aissue+label%3Abug).\n\n## Table of contents\n\n[01 - Node, Yarn, `package.json`](\u002Ftutorial\u002F01-node-yarn-package-json.md#readme)\n\n[02 - Babel, ES6, ESLint, Flow, Jest, Husky](\u002Ftutorial\u002F02-babel-es6-eslint-flow-jest-husky.md#readme)\n\n[03 - Express, Nodemon, PM2](\u002Ftutorial\u002F03-express-nodemon-pm2.md#readme)\n\n[04 - Webpack, React, HMR](\u002Ftutorial\u002F04-webpack-react-hmr.md#readme)\n\n[05 - Redux, Immutable, Fetch](\u002Ftutorial\u002F05-redux-immutable-fetch.md#readme)\n\n[06 - React Router, Server-Side Rendering, Helmet](\u002Ftutorial\u002F06-react-router-ssr-helmet.md#readme)\n\n[07 - Socket.IO](\u002Ftutorial\u002F07-socket-io.md#readme)\n\n[08 - Bootstrap, JSS](\u002Ftutorial\u002F08-bootstrap-jss.md#readme)\n\n[09 - Travis, Coveralls, Heroku](\u002Ftutorial\u002F09-travis-coveralls-heroku.md#readme)\n\n## Coming up next\n\nSetting up your editor (Atom first), MongoDB, Progressive Web App, E2E testing.\n\n## Translations\n\nIf you want to add your translation, please read the [translation recommendations](\u002Fhow-to-translate.md) to get started!\n\n### V2\n\n- [Bulgarian](https:\u002F\u002Fgithub.com\u002Fmihailgaberov\u002Fjs-stack-from-scratch) by [mihailgaberov](http:\u002F\u002Fgithub.com\u002Fmihailgaberov)\n- [Chinese (simplified)](https:\u002F\u002Fgithub.com\u002Fyepbug\u002Fjs-stack-from-scratch\u002F) by [@yepbug](https:\u002F\u002Fgithub.com\u002Fyepbug)\n- [French](https:\u002F\u002Fgithub.com\u002Fnaomihauret\u002Fjs-stack-from-scratch\u002F) by [Naomi Hauret](https:\u002F\u002Ftwitter.com\u002Fnaomihauret)\n- [Italian](https:\u002F\u002Fgithub.com\u002Ffbertone\u002Fguida-javascript-moderno) by [Fabrizio Bertone](https:\u002F\u002Fgithub.com\u002Ffbertone) - [fbertone.it](http:\u002F\u002Ffbertone.it)\n- [Polish](https:\u002F\u002Fgithub.com\u002Fmbiesiad\u002Fjs-stack-from-scratch) by [@mbiesiad](https:\u002F\u002Fgithub.com\u002Fmbiesiad)\n\nCheck out the [ongoing translations](https:\u002F\u002Fgithub.com\u002Fverekia\u002Fjs-stack-from-scratch\u002Fissues\u002F147).\n\n### V1\n\n- [Chinese (simplified)](https:\u002F\u002Fgithub.com\u002Fpd4d10\u002Fjs-stack-from-scratch) by [@pd4d10](http:\u002F\u002Fgithub.com\u002Fpd4d10)\n- [Italian](https:\u002F\u002Fgithub.com\u002Ffbertone\u002Fjs-stack-from-scratch) by [Fabrizio Bertone](https:\u002F\u002Fgithub.com\u002Ffbertone)\n- [Japanese](https:\u002F\u002Fgithub.com\u002Ftakahashim\u002Fjs-stack-from-scratch) by [@takahashim](https:\u002F\u002Fgithub.com\u002Ftakahashim)\n- [Russian](https:\u002F\u002Fgithub.com\u002FUsulPro\u002Fjs-stack-from-scratch) by [React Theming](https:\u002F\u002Fgithub.com\u002Fsm-react\u002Freact-theming)\n- [Thai](https:\u002F\u002Fgithub.com\u002FMicroBenz\u002Fjs-stack-from-scratch) by [MicroBenz](https:\u002F\u002Fgithub.com\u002FMicroBenz)\n\n## Credits\n\nCreated by [@verekia](https:\u002F\u002Ftwitter.com\u002Fverekia) – [verekia.com](http:\u002F\u002Fverekia.com\u002F).\n\nLicense: MIT\n","这是一个逐步构建现代JavaScript技术栈的教程。项目通过集成React、Redux、React Router等核心库，以及使用ESLint、Jest进行代码质量和测试管理，提供了一个从零开始搭建可扩展Web应用的基础框架。它还包括了Webpack和Yarn这样的工具来优化开发流程与依赖管理。适合那些希望深入理解每个组件如何协同工作，并计划构建复杂且需要良好架构支持的应用程序的开发者。本教程不仅限于理论讲解，还提供了实践操作指南，帮助读者亲手创建自己的基础模板。","2026-06-11 02:52:42","top_language"]