首先浦箱，開始學習React的時候球切，可以牛刀小試一下氓癌，在瀏覽器端，在官方網(wǎng)站https://facebook.github.io/react/? 查看demo演示统扳。
建立一個demo.html文件粘貼以上代碼進去喘帚，直接運行，就可以在瀏覽器上看到結(jié)果咒钟。
備注：在 https://facebook.github.io/react/docs/installation.html 下載html文件吹由。
瀏覽器執(zhí)行必須引入的react.js，react-dom.js , babel.min.js三個文件朱嘴。react.js 是 React 的核心庫倾鲫，react-dom.js 是提供與 DOM 相關的功能粗合，babel.min是Babel提供的轉(zhuǎn)換器腳本，可以在瀏覽器運行乌昔。不過從Babel6.0開始隙疚，不再直接提供瀏覽器版本，而是要用構建工具引入磕道。
安裝nodejs
Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環(huán)境供屉，它使用了一個事件驅(qū)動、非阻塞式 I/O 的模型溺蕉，使其輕量又高效伶丐，它的包管理器 npm，是全球最大的開源庫生態(tài)系統(tǒng)焙贷。
官方地址： http://nodejs.cn/download/
根據(jù)自己的系統(tǒng)選擇相應的安裝文件下載安裝
安裝后在終端運行
node -v
npm -v
會顯示相應的版本撵割，就表示安裝成功了。
現(xiàn)在我們來進行一個簡單的項目辙芍，首先我們看一下目錄結(jié)構如下：
1.創(chuàng)建一個文件夾啡彬，命名為demo
2.在demo目錄下創(chuàng)建app文件夾，在app文件夾下創(chuàng)建一個index.js的文件
文件內(nèi)容：
import React from 'react';
import ReactDOM from 'react-dom';
class HelloMessage extends React.Component{? ?
render(){? ? ? ?
return? Hello {this.props.name}
}}
ReactDOM.render(, document.getElementById( 'app' ) );
3.在demo目錄下創(chuàng)建index.html文件故硅，文件內(nèi)容如下：
4.在demo目錄下庶灿，添加 .babelrc? 文件 和 webpack.config.js文件，內(nèi)容如下：
.babelrc
{ "presets": ["es2015","react"] }
webpack.config.js
var path = require('path'),
webpack = require('webpack'),
HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
},
devServer: {
inline: true,
port: 8099
},
plugins: [
new HtmlwebpackPlugin({
template: "./index.html"
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
}
5.進入到命令行吃衅，到項目文件夾下 運行npm init 命令往踢，會出現(xiàn)如下的步驟，可以一直回車下去徘层，完成后會在目錄下生成package.json文件
6.下一步在命令行下繼續(xù)運行命令如下：
npm install react react-dom --save-dev
npm install webpack --save-dev
npm install babel-loader --save-dev
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
npm install html-webpack-plugin --save-dev
一次一條命令峻呕，慢慢等待。安裝完成后 package.json文件會自動更新趣效，如下：
{
"name": "demo3",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^2.30.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.5.5"
}
}
運行npm run build顯示如下瘦癌，編譯成功，會在項目根目錄下生成build文件夾跷敬，
直接打開build的文件夾下生成的index.html文件讯私，打開顯示如下：
這樣整個demo就完成了。
先學著做西傀，然后再研究原理斤寇。
You can do it。
