Skip to content

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

Notifications You must be signed in to change notification settings

j0214ack/js-stack-from-scratch

 
 

Repository files navigation

JavaScript Stack 從零開始

Build Status Release Dependencies Dev Dependencies Gitter

React Redux React Router Flow ESLint Jest Yarn Webpack Bootstrap

(譯註:此為繁體中文翻譯,我會盡力更新,可到原作者的 repo 查看最新版本,若您希望加入一起翻譯中文,或者有找到錯字或用語修正等等,可以 fork 此 repo 並且發送 pull request 給我。若想要翻譯整個章節可以到這個 issue 留言認領,避免大家重複翻譯。)

中文翻譯致謝: (目前沒人唷!歡迎大家一起來幫忙。)

歡迎來到現代 JavaScript Stack 教學: JavaScript Stack 從零開始

🎉 這是此教學的第二版,相較 2016 年的釋出,有不少重大更新,看看更改日誌!

這是一個簡單直接的組裝 JavaScript Stack 引導。讀者需要一些程式知識,以及一些 JavaScript 基礎。 本引導的重點在將各種工具結合在一起,並對每個工具給您 最簡易的範例。你可以把這個教學看成是 從零開始撰寫模板的一個方式。由於本教的目標是將各種工具組裝在一起,我不會進入各個工具的運作細節。如果您希望有對不同工具有更深入的理解,請參考各工具的文件,或找到他們的教學。

如果你只是要用少數的工具建立起一個簡單的網頁,你不需要使用整個 Stack(像是 Browserify/Webpack + Babel + jQuery 就足夠讓你在不同的檔案裡撰寫 ES6 語法的程式碼),但如果你希望建造一個可以擴展規模的網頁應用程式,或需要協助將一切設定好,本教學非常適合您。

本教學中有一大部分會使用到 React 。如果你是初學者,並且只是想要學習 React,或者有人剛加入使用 React 的團隊並且需要一個學習的空間,我推薦用 create-react-app 以預設好的設定迅速幫助您建立起 React 環境。在這個教學裡你不會使用預設設定,因為我希望您了解所有在檯面下發生的事情。

每一節都有程式碼範例,你可以透過 yarn && yarn start 執行這些範例。但我會建議您跟著 一步一步的指引 自己從零開始撰寫。

最終的程式碼可以在 JS-Stack-Boilerplate repositoryreleases 取得。 也可以參考 live demo

本教學可以在 Linux, macOS, and Windows 運作。

目錄

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

接下來的內容

設置你的編輯器(首先是 Atom)、MongoDB、Progressive Web APP。

翻譯

如果您希望加入您的翻譯版本,請從閱讀翻譯建議 開始

V2

馬上就要有你的連結啦! ;)

查看 正在進行中的翻譯.

V1

致謝

Created by @verekiaverekia.com.

License: MIT

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%