本文是本人自己辛苦翻譯的，請轉(zhuǎn)載的朋友注明，翻譯于Z.MJun的簡書 ，感謝！<翻譯不容易啊>
翻譯于2017年6月26日，原文
安裝React方法
React是靈活js庫并能夠支持多種不同的項(xiàng)目?？梢灾苯邮褂盟鼊?chuàng)建新的項(xiàng)目，同時(shí)支持在已有的項(xiàng)目下引入。
嘗試React
如果僅僅對react感興趣，可以直接使用CodePen. 就可以不需要安裝任何東西，同時(shí)只需要修改代碼和觀看結(jié)果。嘗試可以點(diǎn)擊這里。
如果想使用編輯器編輯，可以下載HTML文件。修改后，在瀏覽器上展示即可。但是請不要把這個(gè)使用到正式產(chǎn)品，因?yàn)檫@里使用的react是網(wǎng)絡(luò)下載的，會(huì)比較慢。
如果想學(xué)習(xí)使用完整的應(yīng)用?？梢钥匆韵聝?nèi)容：創(chuàng)建React項(xiàng)目或者在已有項(xiàng)目中引入React。
創(chuàng)建React項(xiàng)目
創(chuàng)建新的React項(xiàng)目，從一個(gè)簡單的頁面學(xué)起是最好的學(xué)習(xí)方法。這需要設(shè)置開發(fā)環(huán)境，并使用最新的js方法、提供最新的開發(fā)體驗(yàn)，和優(yōu)化你的項(xiàng)目。
npm install -g create-react-app //安裝環(huán)境
create-react-app my-app //創(chuàng)建應(yīng)用 應(yīng)用名稱my-app 最好使用正確的路徑
cd my-app //移動(dòng)項(xiàng)目
npm start //開始使用
React項(xiàng)目不需要處理后臺(tái)邏輯和數(shù)據(jù)庫，僅僅是用于前端。如果使用Balel和webpack，就不再需要配置其他內(nèi)容。
當(dāng)想要把項(xiàng)目部署在正式環(huán)境，使用npm run build就可以創(chuàng)建一個(gè)優(yōu)化過的項(xiàng)目到build文件夾中。想要了解更多的創(chuàng)建項(xiàng)目請看ReadMe和UserGuide。
添加React到已有項(xiàng)目
不需要因?yàn)橐隦eact而重新開項(xiàng)目
推薦先在項(xiàng)目中部門內(nèi)容使用React，如individual widget。
React可以不在構(gòu)建工具下使用，推薦自定義設(shè)置項(xiàng)目，這樣的效率更佳，一般情況下有以下設(shè)置內(nèi)容
-
package manager，包（庫）管理。如Yarn或者npm。更容易管理，安裝和升級第三方包， -
bundler，構(gòu)建器。如：wabpack或者browserify。更加容易的把模塊合并到一起，并且優(yōu)化加載時(shí)間。 -
compiler，轉(zhuǎn)換器。如：Babel。更好的支持舊版本的js語法。
安裝React
安裝須知：強(qiáng)烈推薦設(shè)置production build process確保在項(xiàng)目使用的最新的React。
推薦使用Yarn或者npm來管理前后臺(tái)依賴。如果是初次接觸包管理器，推薦使用 Yarn documentation。
//安裝Yarn方法
yarn init
yarn add react react-dom
//安裝npm方法
npm init
npm install --save react react-dom
無論使用Yarn或者npm下載資源，都來源于npm registry。
使用ES6和JSX
推薦使用Babel讓ES6和JSX運(yùn)行在JS代碼里。ES6擁有一些列最新的JS特性，使得開發(fā)更簡單。JSX是js語言擴(kuò)展，更好的應(yīng)用在react。
Babel setup instructions 解釋了如何配置不同的構(gòu)建環(huán)境。確保項(xiàng)目中安裝了babel-preset-react
和 babel-preset-es2015
。文件如： .babelrc
configuration。
使用ES6和JSX的Hello World
推薦使用wabpack或者browserify。更加容易的把模塊合并到一起，并且優(yōu)化加載時(shí)間。
//最少的React代碼運(yùn)行hello world
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
//代碼中使用了一個(gè)ID叫root的div。
//所以html的代碼中必須要有`<div id="root"></div>`
同樣，可以在已有的項(xiàng)目中使用JS UI 庫。
Learn more about integrating React with existing code.
開發(fā)版本和生產(chǎn)版本
默認(rèn)情況下，react包含許多警告幫助來幫助開發(fā)。
需要注意：構(gòu)建正式產(chǎn)品的時(shí)候，需要去除多余的開發(fā)版本，不然會(huì)導(dǎo)致包體大和運(yùn)行速度慢。
- Creating a Production Build with Create React App
- Creating a Production Build with Single-File Builds
- Creating a Production Build with Brunch
- Creating a Production Build with Browserify
- Creating a Production Build with Rollup
- Creating a Production Build with webpack
使用CDN
如果不想使用npm來管理包，可以參考react和react-dom提供的簡單文件描述來配置一個(gè)CDN。
//開發(fā)環(huán)境的配置
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
//生產(chǎn)環(huán)境的配置
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
如果需要添加特定的版本，只需要替換路徑里面的 “15”為其他版本即可。
Hello World
最簡單的運(yùn)行hello world方法是使用 this Hello World example code on CodePen，這個(gè)方法不需要配置任何內(nèi)容。如果想使用本地編輯器，看上文。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
就能在網(wǎng)頁上看到Hello, world!。
為了快速學(xué)習(xí)，我們需要掌握構(gòu)建模塊：元素和組件。掌握后就能構(gòu)建復(fù)雜的項(xiàng)目應(yīng)用。
A Note on JavaScript
React是js庫，能基本掌握基礎(chǔ)的js語言。如果還是覺得掌握有難度，推薦學(xué)習(xí) refreshing your JavaScript knowledge。
另外，還需要掌握ES6的新特性， arrow functions, classes, template literals, let
, 和 const
狀態(tài)。掌握 Babel REPL來檢測適配ES6。
