前言
我是一名Android開(kāi)發(fā)程序員愕秫，開(kāi)發(fā)Android也有些年頭了酒奶，最近在學(xué)習(xí)react知識(shí)(react是如此之火)，但是自己對(duì)于前端開(kāi)發(fā)知識(shí)又知之甚少，在國(guó)內(nèi)網(wǎng)站上也看到一些react相關(guān)的知識(shí)內(nèi)容模庐，但是感覺(jué)都是千篇一律遣耍，所以就到官網(wǎng)上來(lái)進(jìn)行系統(tǒng)的學(xué)習(xí)眠寿，在學(xué)習(xí)過(guò)程中自己就想著把官網(wǎng)的英語(yǔ)文檔翻譯為中文踩麦，希望能幫助大家九昧，同時(shí)也能鍛煉自己的英文水平（由于本人的英文水平有限御滩，翻譯有誤的地方希望大家多多提建議）
以下內(nèi)容是對(duì)react官網(wǎng) 進(jìn)行了翻譯严望，同時(shí)也會(huì)與Android進(jìn)行對(duì)比件余，有了對(duì)比學(xué)習(xí)的的效率就高鲫懒，就會(huì)有深度蚁堤，也加入了自己的一些總結(jié)醉者。
入門(mén)指南
一個(gè)JSFiddle的react例子（JSFiddle是一個(gè)前端在線編輯，編譯web app）
最簡(jiǎn)單的了解React的方法是使用以下JSFiddleHello World例子：
- React JSFiddle
- ReactJSFiddle without JSX( JSX是React的一種語(yǔ)法，后面會(huì)介紹）
使用npm學(xué)習(xí)React（npm是一個(gè)包管理和分發(fā)工具）
準(zhǔn)備材料
- nodejs,npm安裝（windows）撬即，npm類似于maven中的中央倉(cāng)庫(kù)的意思立磁。
- 一個(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中的類庫(kù)颅崩。
- 編輯工具sublime（還有其他種類的編輯工具），sublime是一個(gè)輕量級(jí)的編輯工具類似于android studio(它是一個(gè)重量級(jí)的開(kāi)發(fā)工具)蕊苗，sublime可以安裝各種需要的插件沿后，在學(xué)習(xí)react首先需要安裝Babel插件（Babel的作用后面有解釋）
使用npm下載react和react-dom示例：
安裝react和react-dom包并使用browserify來(lái)編譯打包你的程序
$ npm install --save react react-dom babelify babel-preset-react
$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js
安裝react和react-dom使用webpack來(lái)編譯打包你的程序
$ npm install --save react react-dom babel-preset-react
$ webpack
不使用npm來(lái)學(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的語(yǔ)法的代碼我們叫它JSX锅移，點(diǎn)擊JSX syntax可以了解更多。為了把JSX代碼轉(zhuǎn)化為javascript代碼我們使用<script type="text/babel">來(lái)導(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ì)加載文件失敗除非打開(kāi)一個(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代碼是什么樣子肺素，開(kāi)發(fā)react需要哪些材料有了初步的了解，具體詳情可以看react官網(wǎng)宇驾，有錯(cuò)誤的地方歡迎拍磚倍靡。
期待別的章節(jié)翻譯......
