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