React文檔翻譯系列（一）安裝

原文地址：原文

本系列是針對React文檔進行的翻譯，由於本身在學習react的時候，最開始經過看博客或者論壇等中文資料，有些內容是零零散散的接收，並無給本身帶來很好的效果，因此後來決定把文檔的原文從頭至尾看一遍。目前爲止原文文檔也看的差很少了，本身的英文水平也有限，看的也是似懂非懂，可是卻比在博客或者其餘途徑得來的零散的效果要好一些，並且原文文檔是最新的，而找到的中文資料都是其餘人以前翻譯或者針對以前的文檔寫出來的一些解決方案，對更新後的內容並無進行更新，基於這樣的想法，本身也本着可以更加深刻的學習，因此決定對文檔進行一個大概的翻譯，第一次作這些事情，不知道本身能堅持多久，也不知道本身能翻譯到什麼程度，錯誤之處還望多多指正，但願可以堅持下去。廢話很少說，進入正題。

安裝

React是靈活的，而且能夠應用到各類各樣的項目中。你可使用它建立一個新的項目，可是，你也能夠在不用從新編寫的前提下，逐步的將它引入到現有的代碼庫中。

初嘗React

若是你只是對React感興趣，你徹底可使用CodePen。嘗試這從這個Hello World示例開始吧。你不用安裝任何東西，只須要對代碼進行修改，而後看看它是否會起做用。

若是你更喜歡使用本身的文本編輯器，能夠下載這個HTML文件，編輯它，而後在本地經過瀏覽器打開。它會執行一個緩慢的運行時代碼轉換，因此不要在生產環境使用它。

建立一個單頁面應用

Create React App（譯者注：facebook提供的一個工具集）是開始建立React單頁應用最好的一種方式。它已經爲你設置好了開發環境，這樣你就可使用到最新的Javascript特性，提供一個良好的開發體驗，而且能夠優化你的生產環境應用。

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

Create React App 不會處理後端邏輯或者是數據庫；它只是建立了一個前端構建管道，因此你可使用它配合任何你想使用的後端。它的底層是使用webpack，Babeland ESLint，可是已經爲你配置好了。

在已有應用中加入React

你沒必要爲了開始使用React而重寫原來的應用。

咱們推薦你將React添加到你應用的一小部分中，好比一個我的小部件，這樣你能夠觀察一下是否它能在你的應用場景下良好的運行。

儘管React能夠在沒有構建管道（build pipeline）的狀況下使用，然而咱們仍是推薦將構建管道配置起來以便提升生產力。一個典型的現代構造管道包括下面幾部分：

• 一個包管理器，好比Yarn或者npm。它可讓您利用龐大的第三方軟件包生態系統，輕鬆安裝或更新它們。
• 一個構建工具，好比webpack或者Browserify。它容許您編寫模塊化代碼並將其捆綁在一塊兒成爲小包以優化加載時間。

• 一個編譯器，好比Babel，它可讓您編寫仍舊適用於舊版瀏覽器的現代JavaScript代碼。

  安裝React

  咱們推薦使用Yarn或者npm來管理前端依賴。若是你是包管理工具的新手，Yarn文檔是一個好的開始的地方。

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

yarn init
yarn add react react-dom

使用npm安裝React，運行下面的命令:

npm init
npm install --save react react-dom

Yarn和npm都是從npm registry下載所須要的包。

啓用ES6和JSX

爲了在你的Javascript代碼中使用ES6和JSX，咱們推薦配合Babel使用React。ES6是一組可使開發變得更簡單的現代化的JavaScript特性，JSX是對React的很好的JavaScript語言的擴展。

Babel設置說明解釋瞭如何在許多不一樣的構建環境中配置Babel。確保你已經安裝了babel-preset-react和babel-preset-es2015 而且已經在你的.babelrc 配置中啓用了他們，這樣就準備就緒了。

使用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')
);

這段代碼會渲染到id爲root的DOM元素中，因此在你的HTML文件中的某處須要<div id="root"></div>。

相似的，你也能夠在使用其餘Javascript UI庫所寫的現有應用中的某處，將一個React組件渲染到一個DOM元素上。

開發環境版和生產環境版

默認的，React包括了許多有用的警告。這些警告在開發環境中是很是有用的。然而，他們會讓React變得很大而且很慢，因此要確保在部署應用的時候要使用生產環境版。

Brunch

想要使用Brunch建立一個優化的生產構建，只須要在構建命令中添加-p標識。更多細節參看Brunch docs。

Browserify

運行Browserify，將NODE_ENV環境變量設置成production，使用UglifyJS做爲構建的最後一步，這樣只在開發環境生效的代碼就會被剝離出來。

Create React App

若是使用Create React App，npm run build會在應用的build文件夾下面生成一份優化後的代碼。

Rollup

使用rollup-plugin-replace和rollup-plugin-commonjs一塊兒（按照順序）移除開發專用的代碼。這裏有完整的設置案例。
Webpack

像這個指南描述的這樣將DefinePlugin和UglifyJsPlugin包含到生產環境的Webpack配置中。

使用CDN

若是不想使用npm管理客戶端包，react和react-dom的npm包在dist文件夾下面也提供了單個文件的分發，他們託管在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>

上面的版本只適合開發環境，不適合生產環境。壓縮並優化後的React可用生產版本在：

<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替換爲想加載版本的版本號。
若是使用Bower，React能夠經過react包獲取到。