Node.js https://nodejs.org https://nodejs.org/en/download/ win: msi mac: pkg linux: tar.xz source code: tar.gz Latest https://nodejs.org/dist/v6.3.1/node-v6.3.1-x64.msi https://nodejs.org/dist/v6.3.1/node-v6.3.1.pkg https://nodejs.org/dist/v6.3.1/node-v6.3.1-linux-x64.tar.xz https://nodejs.org/dist/v6.3.1/node-v6.3.1.tar.gz v4.4.7 LTS https://nodejs.org/dist/v4.4.7/node-v4.4.7-x64.msi https://nodejs.org/dist/v4.4.7/node-v4.4.7.pkg https://nodejs.org/dist/v4.4.7/node-v4.4.7-linux-x64.tar.xz https://nodejs.org/dist/v4.4.7/node-v4.4.7.tar.gz Homebrew: sudo brew install node Apt-get: sudo apt-get install nodejs npm --------------------- CNPM 在國內用來代替npm的工具 $ npm install -g cnpm --registry=https://registry.npm.taobao.org TypeScript https://github.com/Microsoft/TypeScript http://www.typescriptlang.org $ npm install -g typescript $ tsc -v $ tsc -w helloworld.js (按Ctrl+C退出) 在目錄中初始化 $ tsc -init $ tsc -w --newLine LF typings(The TypeScript Definition Manager) 代替tsd的工具: https://github.com/typings/typings/blob/master/docs/tsd.md 1. tsd install react --save You would now: typings install dt~react --global --save 2. tsd query react becomes: typings search react $ npm install typings --global 在當前目錄(項目)中安裝angular和jquery的dt文件 $ typings install dt~angular --global --save $ typings search --name jquery $ typings install dt~jquery --global --save TSLint $ npm install -g tslint typescript $ tslint --init ESLint $ npm install -g eslint 配置 $ npm init ... name: (workdir) version: (1.0.0) description: entry point: (main.js) test command: git repository: keywords: author: license: (ISC) About to write to path/to/package.json: ... $ eslint --init ? How would you like to configure ESLint? Answer questions about your style ? Are you using ECMAScript 6 features? Yes ? Are you using ES6 modules? Yes ? Where will your code run? Node ? Do you use JSX? Yes ? Do you use React Yes ? What style of indentation do you use? Spaces ? What quotes do you use for strings? Double ? What line endings do you use? Unix ? Do you require semicolons? Yes ? What format do you want your config file to be in? JSON ... 簡述以下: $ mkdir ProjectName # 建立項目目錄,而後下面是初始化 $ npm init $ eslint --init $ tsc -init $ tslint --init $ code . # 用VSCode(建議安裝ESLint、TSLint擴展)打開 # mac系統能夠將code手動ln到/usr/local/bin下: $ ln -s /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code /usr/local/bin/code ---------------- Bower $ npm install -g bower 安裝react 先進入工做目錄,而後輸入下面命令會下載react到bower_components目錄 $ bower install react $ touch index.html $ code . VSCode 須要安裝的擴展和組件 擴展:Reactjs snippets或者React Standard Style code snippets,代碼片斷 擴展:Path Intellisense,能方便在代碼中提供路徑智能提示 擴展:HTML Snippets,提供html支持 擴展:React Native Tools,調試Android/iOS的React原生項目,提供智能提示,須要安裝react-native-cli $ npm install -g react-native-cli BABEL http://babeljs.io https://github.com/babel/babel CLi http://babeljs.io/docs/setup/#installation $ npm install --save-dev babel-cli ES2015 $ npm install --save-dev babel-preset-es2015 Polyfill $ npm install --save-dev babel-polyfill JSX and Flow $ npm install --save-dev babel-preset-react