React文檔（一）安裝

React是一個靈活的能夠用於各類不一樣項目的框架，你能夠用它來寫新應用，你也能夠逐步將它引進已有的代碼庫而不用重寫整個項目。

試用React

若是你想玩一玩React，那麼就去CodePen上試一試。嘗試一下Hello World的React例子。不須要安裝任何東西，只是修改代碼而後查看結果。

若是你更喜歡在本地編輯，那麼你也能夠下載此文件，修改它，而後在本地用瀏覽器打開。可是它會作一個很慢的運行時代碼轉換，因此不要像這樣在產品中使用。

建立一個單頁應用

建立React應用這個項目是一個最好的方式去學習如何建立一個新的單頁應用。它設置好了開發環境因此你可使用最新的js特性，它提供了很好的開發體驗，最優化你的應用產品。

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

建立React應用不須要處理後臺邏輯或者數據庫，它只須要創建一個前端的建立管線，因此你能夠和各類不一樣的後臺語言配合。它在底層使用了webpack，Babel和ESLint等組件，併爲你配置了它們。

添加React到已存在的應用

想要使用React你不須要重寫你的應用。

咱們建議添加React到應用中的一個小模塊裏，例如一個獨立的小部件，那樣你會發如今你的用例下它能夠工做得很好。

雖然React不強制須要一個建立管線，可是建議建立一個那樣你能夠提升效率。一個最新的建立管線通常包括如下幾點：

• 一個包管理器，例如Yarn或者npm。它們可讓你利用大量的第三方包，而後很方便地安裝和升級。
• 一個打包器，例如webpack或者Browserify。它們讓你在開發的時候寫模塊化的代碼而後在完成以後打包集合成更小的包來優化載入時間。
• 一個編譯器，例如Babel。它可以讓你使用js最新特效，並且兼容全部瀏覽器。

安裝React

建議使用yarn或者npm包管理器來管理前端依賴的包。若是你沒用過包管理器，那個到Tarn文檔這個網站去學習相關知識。

使用Yarn安裝React，運行如下命令：

yarn init
yarn add react react-dom

使用npm安裝，運行如下命令：

npm init
npm install --save react react-dom

Yarn和npm都是從npm registry下載依賴包。

啓用ES6和JSX

建議使用Babel來支持ES6和JS語法。ES6擁有js最新的特性，讓開發更加簡便，JSX是js語言的擴展，很好的兼容React。

Babel安裝操做指南講解了如何在各類不一樣的環境配置Babel。確保你已經安裝了babel-parset-react和babel-preset-es2015而且讓他們在Babel的配置項里正常工做。

使用ES6和JSX建立Hello World程序

建議使用相似webpack和Browserify的打包工具，那麼你能夠將模塊化代碼打包成更小的包優化載入時間。

最簡單的React例子就像這樣：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

這段代碼渲染了一個DOM元素插入了id名爲root的元素裏，因此你須要在你的頁面裏含有<div id="root"></div>。

一樣的，你能夠渲染一個React組件到一個DOM元素裏經過引用其餘js UI庫。

開發和生產版本

通常默認狀況下，React有不少有用的警告。這些警告在開發時有很大的幫助。可是，若是在生產環境下，它會讓程序臃腫變慢，因此當你發佈應用的時候確保使用生產版本。

建立React App

若是你使用Create React App項目，npm run build將會在build文件夾下建立你的應用。

webpack

經過這個指南能夠了解DefinePlugin和UglifyJsPlugin插件在生產環境webpack設置中的做用。

Browserify

把NODE_ENV環境變量設置成production運行Browserify，使用UglifyJS將只在開發中使用的代碼剝離出來。

Rollup

使用rollup-plugin-replace和rollup-plugin-commonjs插件來去除開發環境代碼。

使用CDN

若是不想使用npm包管理器，那麼可使用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>

想要使用肯定版本號的react和react-dom，替換15爲版本號便可。

若是你使用瀏覽器，React經過react包一樣可用。