首先，开始学习React的时候，可以牛刀小试一下，在浏览器端，在官方网站https://facebook.github.io/react/ 查看demo演示。
建立一个demo.html文件粘贴以上代码进去，直接运行，就可以在浏览器上看到结果。
备注：在 https://facebook.github.io/react/docs/installation.html 下载html文件。
浏览器执行必须引入的react.js，react-dom.js , babel.min.js三个文件。react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，babel.min是Babel提供的转换器脚本，可以在浏览器运行。不过从Babel6.0开始，不再直接提供浏览器版本，而是要用构建工具引入。
安装nodejs
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效，它的包管理器 npm，是全球最大的开源库生态系统。
官方地址： http://nodejs.cn/download/
根据自己的系统选择相应的安装文件下载安装
安装后在终端运行
node -v
npm -v
会显示相应的版本，就表示安装成功了。
现在我们来进行一个简单的项目，首先我们看一下目录结构如下：
1.创建一个文件夹，命名为demo
2.在demo目录下创建app文件夹，在app文件夹下创建一个index.js的文件
文件内容：
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目录下创建index.html文件，文件内容如下：
4.在demo目录下，添加 .babelrc 文件 和 webpack.config.js文件，内容如下：
.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 命令，会出现如下的步骤，可以一直回车下去，完成后会在目录下生成package.json文件
6.下一步在命令行下继续运行命令如下：
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。
