前言
我是一名Android開發(fā)程序員，開發(fā)Android也有些年頭了，最近在學(xué)習(xí)react知識(shí)(react是如此之火)，但是自己對(duì)于前端開發(fā)知識(shí)又知之甚少，在國(guó)內(nèi)網(wǎng)站上也看到一些react相關(guān)的知識(shí)內(nèi)容，但是感覺都是千篇一律，所以就到官網(wǎng)上來進(jìn)行系統(tǒng)的學(xué)習(xí)，在學(xué)習(xí)過程中自己就想著把官網(wǎng)的英語文檔翻譯為中文，希望能幫助大家，同時(shí)也能鍛煉自己的英文水平（由于本人的英文水平有限，翻譯有誤的地方希望大家多多提建議）
以下內(nèi)容是對(duì)react官網(wǎng) 進(jìn)行了翻譯，同時(shí)也會(huì)與Android進(jìn)行對(duì)比，有了對(duì)比學(xué)習(xí)的的效率就高，就會(huì)有深度，也加入了自己的一些總結(jié)。
入門指南
一個(gè)JSFiddle的react例子（JSFiddle是一個(gè)前端在線編輯，編譯web app）
最簡(jiǎn)單的了解React的方法是使用以下JSFiddleHello World例子：
- React JSFiddle
- ReactJSFiddle without JSX( JSX是React的一種語法，后面會(huì)介紹）
使用npm學(xué)習(xí)React（npm是一個(gè)包管理和分發(fā)工具）
準(zhǔn)備材料
- nodejs,npm安裝（windows），npm類似于maven中的中央倉庫的意思。
- 一個(gè)CommonJS的模塊系統(tǒng)的構(gòu)建工具（browserify或webpack）任意一個(gè)都可以。webpack構(gòu)建工具類似于android中的ant或gradle構(gòu)建工具，解決工程中的依賴關(guān)系，并負(fù)責(zé)編譯打包工程。
- react和react-dom包安裝。類似于java中的類庫。
- 編輯工具sublime（還有其他種類的編輯工具），sublime是一個(gè)輕量級(jí)的編輯工具類似于android studio(它是一個(gè)重量級(jí)的開發(fā)工具)，sublime可以安裝各種需要的插件，在學(xué)習(xí)react首先需要安裝Babel插件（Babel的作用后面有解釋）
使用npm下載react和react-dom示例：
安裝react和react-dom包并使用browserify來編譯打包你的程序
$ npm install --save react react-dom babelify babel-preset-react
$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js
安裝react和react-dom使用webpack來編譯打包你的程序
$ npm install --save react react-dom babel-preset-react
$ webpack
不使用npm來學(xué)習(xí)React
如果你還未準(zhǔn)備好使用npm，可以直接下載starter kit（工具包），該工具包包含react和react-dom預(yù)制包
Download Starter Kit 0.14.7
解壓下載好的starter kit文件，在解壓的starter kit的根目錄下創(chuàng)建一個(gè)helloworld.html的文件，該文件內(nèi)容是:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script> <script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
//JSX代碼
<h1>Hello, world!</h1>,
document.getElementById('example') );
</script>
</body>
</html>
JavaScript中的類似于xml的語法的代碼我們叫它JSX，點(diǎn)擊JSX syntax可以了解更多。為了把JSX代碼轉(zhuǎn)化為javascript代碼我們使用<script type="text/babel">來導(dǎo)入Babel，Babel是真正在瀏覽器里起轉(zhuǎn)換作用。
單獨(dú)的文件
你可以把上面的JSX代碼塊放入一個(gè)單獨(dú)的文件中，假設(shè)該文件名為src/helloworld.js,文件內(nèi)容如下：
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
然后在helloworld.html文件中引用helloworld.js：
<script type="text/babel" src="src/helloworld.js"></script>
注意有些瀏覽器（chrome等）將會(huì)加載文件失敗除非打開一個(gè)http的服務(wù)器。
離線轉(zhuǎn)換
首先安裝Babel命令行工具，需要npm：
npm install --global babel-cli
npm install babel-preset-react
然后你就可以使用下面命令把JSX轉(zhuǎn)換為普通的javascript代碼：
babel --presets react src --watch --out-dir build
注意：如果你使用的是ES2015,你還得下載babel-preset-es2015包
build/helloworld.js文件內(nèi)容是自動(dòng)更新的的只要源文件發(fā)生改變。Babel CLI documentation可以了解更多關(guān)于Babel的知識(shí)。
轉(zhuǎn)換以后build/helloworld.js的文件內(nèi)容：
ReactDOM.render(
React.createElement('h1', null, 'Hello, world!'),
document.getElementById('example')
);
總結(jié)
看了上面的內(nèi)容您應(yīng)該對(duì)react代碼是什么樣子，開發(fā)react需要哪些材料有了初步的了解，具體詳情可以看react官網(wǎng)，有錯(cuò)誤的地方歡迎拍磚。
期待別的章節(jié)翻譯......
