(譯註:此為繁體中文翻譯,我會盡力更新,可到原作者的 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 repository 和 releases 取得。 也可以參考 live demo。
本教學可以在 Linux, macOS, and Windows 運作。
02 - Babel, ES6, ESLint, Flow, Jest, Husky
06 - React Router, Server-Side Rendering, Helmet
09 - Travis, Coveralls, Heroku
設置你的編輯器(首先是 Atom)、MongoDB、Progressive Web APP。
如果您希望加入您的翻譯版本,請從閱讀翻譯建議 開始
馬上就要有你的連結啦! ;)
查看 正在進行中的翻譯.
- 中文 by @pd4d10
- Italiano by Fabrizio Bertone
- 日本語 by @takahashim
- Русский by React Theming
- ไทย by MicroBenz
Created by @verekia – verekia.com.
License: MIT