React是一个专注于View层解决方案的框架。于Angular，Vue不同，React并不是完整的MVC/MVVM框架，也不是单纯的模板引擎，它的核心思想就是“组件化”，将UI层拆分为一个个组件，然后组合嵌套，最后构建成完成的APP。
如果想实现完整的MVC架构，还需要Model和Controller。
这时，可以配合Flux 和 Redux 架构一起使用。
React的特点如下：
- 模板单向绑定：数据--->UI更新
- 用JS创建DOM（建议使用JSX语法），从而可以利用虚拟DOM树创建/更新DOM
- 提供的API数量很少，使用者必须非常熟悉原生的JavaScript才能够更快上手React开发
- 函数式编程（函数类似一个管道，进入一个值，会导出另外一个值）
简单来说，React是一套可以用简洁的语法高效绘制 DOM 的框架。
现在，让我们一步步进入React的世界吧！
第一步，如何创建React项目？
1. 传统模式
传统模式就是利用<script>标签链接必要的React包文件，然后运行程序。
<!DOCTYPE html><html>
<head>
<!-- 加载React核心库 -->
<script src="../lib/react.js"></script>
<!-- 加载与DOM相关的React库 -->
<script src="../lib/react-dom.js"></script>
<!-- Babel：将JSX语法转为JavaScript语法 -->
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<!-- 你的React代码 -->
<script src="../src/main.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// 你的React代码
</script>
</body></html>
2. 通过npm创建项目
利用webpack编译JSX文件，步骤如下：
(1) 安装npm包，包括React相关的包，webpack loader，babel转码器等等。package.json如下：
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.15",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^2.28.0",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"style-loader": "^0.16.1",
"url-loader": "^0.5.8",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
},
"scripts": {
"dev": "webpack-dev-server --inline --hot --quiet",
"build": "webpack",
"watch": "webpack -w"
},
(2) 配置webpack.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {main: './src/app.js'},
output: {
path: __dirname + '/dist',
filename: 'js/bundle.js',
publicPath: '/'
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{ test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: 'css-loader'
})
}
]
},
//webpack-dev-server配置
devServer: {
historyApiFallback: true,
noInfo: true,
//指定服务器文件路径
contentBase: "./dist",
port: 9002
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/index.tpl.html"
}),
new ExtractTextPlugin('css/' + '[name]-[hash].css')
]
};
(3)配置.babelrc
{
"presets": [
["es2015", { "modules": false }],
"react"
]
}
(4) 定义入口JS文件app.js:
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (<h1>Hello</h1>);
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
(5) 运行webpack-dev-server，浏览器中打开http://localhost:9002/，既可以看到效果：
npm run dev
小结
也可以使用官方命令行工具create-react-app，快速创建基于webpack+ES6的最简单的React模板项目，步骤如下：
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
create-react-app生成的目录格式如下所示:
my-app/
README.md
index.html
favicon.ico
node_modules/
package.json
src/
App.css
App.js
index.css
index.js
logo.svg
下一节我们将学习JSX语法，一种将JS和HTML混合使用的语法，类似：
render() {
return (<h1>Hello</h1>); // JSX
}
