如果不考慮工程化的問題，React的運(yùn)行基礎(chǔ)環(huán)境非常簡單，只需要在HTML文件中引入兩個(gè)js文件（react.min.js和react-dom.min.js）即可開始工作蹬敲。首先我們訪問 https://facebook.github.io/react/,下載這兩個(gè)文件锉试。
- react.js：實(shí)現(xiàn)React核心邏輯蒲凶，且于與具體的渲染引擎無關(guān)，從而可以跨平臺(tái)公用明郭。如果應(yīng)用要遷移到React Native其徙，這一部分邏輯是不需要改變的。
- react-dom.js：包含了具體的DOM渲染更新邏輯钝鸽，以及服務(wù)端渲染的邏輯汇恤，這部分就是與瀏覽器相關(guān)的部分了。
- babel-core.js:解析JSX語法以及es6語法拔恰。后面學(xué)習(xí)jsx語法需要引入因谎，本章可以不引用，只引用前兩個(gè)颜懊。
由于國內(nèi)墻太高問題财岔，可以到bootcdn，下載所需資源河爹。
- https://cdn.bootcss.com/react/15.6.1/react.min.js
- https://cdn.bootcss.com/react/15.6.1/react-dom.min.js
- https://cdn.bootcss.com/babel-core/6.1.19/browser.js （引入此文件后匠璧，下面的自己的js的script標(biāo)簽需要加 type="text/babel"，這樣babel才會(huì)識(shí)別咸这。即代碼在<script type="text/babel"></script>寫即可夷恍。）
注：react已經(jīng)更新了很多次，現(xiàn)已無法直接引用js來直接開發(fā)媳维。15.6.1（包括15.6.1之前的版本可以）酿雪。
不過推薦使用最新版本來開發(fā)。
所以我們在練習(xí)demo時(shí)侄刽，首先需要搭建開發(fā)環(huán)境执虹。
具體怎樣使用webpack搭建簡易開發(fā)環(huán)境，首先需要學(xué)習(xí)webpackhttp://www.reibang.com/p/97cae0978e52唠梨。這里就不介紹了袋励，貼一下配置，直接開始demo当叭。
1.Hello word
首頁在main.js入口文件中添加一下代碼
import React from 'react';
import ReactDOM from 'react-dom';
var element=React.createElement('h1',null,'Hello world')
ReactDOM.render(
element, document.getElementById('root'));
預(yù)覽茬故，可以看見它渲染了一個(gè) “Hello, world!” 的標(biāo)題。
這個(gè)是最簡單的react demo蚁鳖。
- 引入React包磺芭，用來處理JSX
- 引入ReactDOM包，用來渲染組件
- 調(diào)用渲染函數(shù)render()
- 引用react封裝好的React.createElement方法創(chuàng)建html結(jié)構(gòu)
- document.getElementById('root')一個(gè)HTML容器
React.createElement(type,attr,child)
React.createElement是React的最基本方法醉箕。用于創(chuàng)建并返回一個(gè)給定類型的ReactElement元素钾腺。type參數(shù)可以是一個(gè)html標(biāo)簽名稱字符串徙垫，也可以是一個(gè)ReactClasss。這個(gè)type參數(shù)對于createElement來說是必須的放棒。第二個(gè)參數(shù)是該標(biāo)簽的屬性姻报，這個(gè)參數(shù)是可選的。第三個(gè)參數(shù)是該元素的子節(jié)點(diǎn)间螟，同樣也是可選的吴旋。
ReactDOM.render()
ReactDOM.render是React的最基本方法，用于將模板轉(zhuǎn)為HTML語言厢破，并插入指定的DOM節(jié)點(diǎn)荣瑟。
