视频学习地址：
官方地址
神坑：
0、【You need to specify 'babel-loader' instead of 'babel'.】。解决方案：webpack中的loader:"babel-loader"，不要简写为：loader:"babel"
1、每次this.setState都会重新初始化getInitialState中的参数
2、createClass的命名必须以大写开头如，var MySelect = React.createClass,这里如果定义为myselect就会出错
3、render方法的第一个参数return，html代码的第一行必须和return同一行，剩下的才可以换行，也就是不能让 return 孤零零的占据一行,或者用括号将html代码括起来
4、如果你是Linux或者mac系统，在执行工具如babel/webpack时记得加上权限（sudo）
5、.babelrc文件中的缩进非常有讲究，必须是两个空格。不讲究也没关系。反正是用webpack来代替.babelrc文件的配置的
6、Html的for属性必须改为htmlFor，class属性必须改为className
7、引入组件必须使用如下形式： import { Mysearch } from './header.js'
8、和vue很相似。render函数中return的(jsx)Html，最外层必须包含一个div。也就是说不能同时return两个同级的div
html环境搭建（前期学习使用，后期废弃）
demo 1 渲染
demo 2 循环
demo3 : 绑定事件
demo4 : 组件化(重头戏)
Document
demo5:嵌套组件、递归属性（this.props.XXX），注意!! HTML的class在这里是className
var NavBar = React.createClass({ myFunc : function(){alert("123")}, render : function() { return }})var SearchText = React.createClass({ render:function() { return } }) ReactDOM.render(
demo6: AJAX实战，在success后必须重新绑定this指针
#js代码var MoviesList = React.createClass({ getInitialState:function() { return { movie:[] } }, componentDidMount:function() { $.ajax ({ url:"http://zhaohong.com", success:function(data) { data = JSON.parse(data); console.log(data); this.setState({movie:data}); }.bind(this) //将AJAX中的this的指针更换为当前对象 }) }, render:function() { //console.log("我是reander",this.state.movie); var myli = this.state.movie.map(function(item) { console.log(item); return - {myli}
header("Access-Control-Allow-Origin:*"); $arr = array(); $arr[0]["moiveName"] = "美国队长3内战"; $arr[1]["moiveName"] = "X战警3天启"; $arr[2]["moiveName"] = "大鱼海棠"; $arr[0]["id"] = "1"; $arr[1]["id"] = "2"; $arr[2]["id"] = "3"; $arr[0]["info"] = "奥创纪元之后，全球政府联合颁布法令，管控超能力活动。对这条法令的不同态度，使复仇者阵营一分为二，钢铁侠和美国队长各据一方，其他复仇者则不得不做出自己的选择，最终引发前任盟友间的史诗大战。"; $arr[1]["info"] = "该片故事以20世纪80年代为背景，讲述了古老强大的第一个变种人天启在埃及醒来，他想统治并改变这个世界，而引发一系列变种人大战的故事"; $arr[2]["info"] = "所有人类的灵魂都是海里一条巨大的鱼，出生的时候从海的此岸出发，在路途中，有时相遇，有时分开，死的时候去到海的彼岸，之后变成一条沉睡的小鱼，等待多年后的再次出发，这个旅程永远不会结束，生命往复不息。十六岁生日那天，居住在“神之围楼”里的一个名叫椿的女孩变作一条海豚到人间巡礼，被大海中的一张网困住，一个人类男孩因为救她而落入深海死去。为了报恩，为了让人类男孩复活，她需要在自己的世界里，历经种种困难与阻碍，帮助死后男孩的灵魂——一条拇指那么大的小鱼，成长为一条比鲸更巨大的鱼并回归大海"; exit(json_encode($arr));
demo7 : 移除组件、移除时的事件
var NavBar = React.createClass({ myFunc : function(){alert("123")}, myRemove:function(){ReactDOM.unmountComponentAtNode(document.getElementById('navbar'))}, render : function() { return }, componentWillUnmount: function() { alert("我被移除了"); }})
demo8 : Input设置value属性时的问题、由于value是React的保留字段，当对Input书写该属性的时候，会造成input只读。需要配合state + onChange + e.target.value来实现正常input
var SearchText = React.createClass({ getInitialState:function() { return { title:"请输入文字" } }, myChange:function(e) { var v = e.target.value; this.setState({title:v}); }, render:function() { return } })
Demo9：引入组件,注意label的for属性必须改为htmlFor
#index.jsvar React = require("react")var ReactDOM = require("react-dom")import { Mysearch } from './header.js'ReactDOM.render( -
) }})exports.Mysearch = Mysearch;
正片开始，前方高能
安装babel以及各种插件（es2015/react/react-dom/react解析）
（神坑：文件夹如果也叫react，那么你在npm init时的项目命名千万别和react重名（默认会是你的文件夹名），当然包括其他组件名和框架名都要避免。否则会报错）
安装nodejs http://nodejs.cn/安装 babel npm install babel-cli -g安装webpack npm install webpack -g安装插件（在命令行使用的时候，记得先整合成一行）npm install babel-core babel-preset-react babel-preset-es2015 babel-preset-stage-0 react react-dom webpack babel-loader css-loader style-loader webpack-dev-server html-webpack-plugin url-loader --save-dev
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');var webpack = require('webpack');var path = require("path");module.exports = { entry:{ app : ['./src/js/index.js'] }, output: { path: path.resolve(__dirname, "build/js"), filename:'[name].js' //最终打包生成的文件名 }, devServer: { historyApiFallback: true, hot: true, inline: true, progress: true, port:9091 //这个端口你可以自定义 }, module: { loaders: [ { test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用 loader: 'babel', query:{ presets:['es2015','react','stage-0'] //必须先安装babel-preset-es2015和babel-preset-react } }, { test: /\.css$/, loaders: ['style', 'css'], //必须先安装css-loader和style-loader }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url', query: { limit: 10000, name: './build/img/[name].[hash:7].[ext]' } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url', query: { limit: 10000, name: './build/fonts/[name].[hash:7].[ext]' } } ] }, plugins:[ //动态将上面编译好的js文件导入到以下html文件中并且生成到指定目录 new HtmlWebpackPlugin({ template:__dirname + '/src/tpl/index.html', filename:__dirname + '/build/tpl/index.html', hash:true, inject:"body", chunks:['common','app'] }), //提取出公共的代码 new webpack.optimize.CommonsChunkPlugin({ name:"common", //对应entry的对象名称 chunks:['app'] }) ] } 使用webpack：
sudo webpack
热编译
每次修改完代码都要手动在控制台中输入webpack是很变态的一件事，最好能每次保存js文件时自动编译。这就是热编译
但是，热编译是热编译、build是build（这里的build指的是在控制台单独使用webpack编译）、一定要区分开来各自的作用。
打开package.json加入
"scripts": { "start": "webpack-dev-server --hot --inline"}
在根目录中新建test/index1.html （请务必注意以下代码的script引用规则）
Document
打开控制台
#开启热编译 npm start
打开网页 ： localhost:9091/test/index1.html
当修改该页面引入的js文件时。就会自动编译
注意，这个热编译插件，他是将编译的js放入内存中并且引入到指定的html中。所以并没有生成到build文件夹下，如果想生成还需要手动使用webpack命令
开始React和第三方结合
React-bootstrap的学习:
npm install react-bootstrap --save-dev
页面引入css：
js
const React =require('react');const ReactDOM = require('react-dom');var Nav = require('react-bootstrap').Nav;var NavItem = require('react-bootstrap').NavItem;var NavDropdown = require('react-bootstrap').NavDropdown;var MenuItem = require('react-bootstrap').MenuItem;var Navbar = require('react-bootstrap').Navbar; let MyNav = React.createClass({ render:function() { return React-Bootstrap }})ReactDOM.render( 编译即可看到结果
React-amazeui（PC端）的学习:
npm install amazeui-react --save-dev npm install babel-preset-stage-0 npm install babel-plugin-transform-object-rest-spread
.babelrc
{ "presets":["es2015","react","stage-0"], "plugins":['transform-object-rest-spread']} index.js(demo1)
const React =require('react');const ReactDOM = require('react-dom');const AMUIReact = require('amazeui-react');var props = { title: 'Amaze UI', link: '#title-link', data: { left: [ { link: '#left-link', icon: 'home' } ], right: [ { link: '#right-link', icon: 'bars' } ] }, onSelect: function(nav, e) { e.preventDefault(); console.log('你点击了', nav); // do something }};ReactDOM.render( index.js(demo2)
const React =require('react');const ReactDOM = require('react-dom');const AMUIReact = require('amazeui-react');const Panel = AMUIReact.Panel;let MyPanel = React.createClass({ render:function() { return 默认面板 primary - 面板 secondary - 面板 success - 面板 warning - 面板 danger - 面板 }})ReactDOM.render(
amazeui touch(移动端)：
#下载 npm install --save-dev amazeui-touch
sudo npm install react-router --save-dev
#根据错误提示和 amazeui-touch 下的.babelrc文件中的内容，下载如下内容 sudo npm install babel-preset-stage-0 sudo npm install babel-plugin-transform-object-assign --savesudo npm install babel-plugin-add-module-exports --save-devsudo npm install transform-object-rest-spread #这个是根据错误提示加入的sudo npm install react-addons-css-transition-group --save-dev sudo npm install babel-preset-stage-0 --save-dev #注意要在.babelrc和webpack.config.js的配置位置中加入stage-0才行
为了更好的配合编译，推荐将webpack.config.js中的entry配置为如下示例。
在html中只需要加载如下两个Js：
并且注意，热编译的html必须在根目录。
entry: { //代表入口(总)文件 ，可以写多个。 main:['./src/main.js'], user:['./src/login.js'] },
html
Document Amaze UI Touch
demo1:
var React = require('react');var ReactDOM = require('react-dom');import {Button} from 'amazeui-touch';ReactDOM.render( , document.getElementById('demo') ) demo2:剥离引用（口述）
新建一个card.js，随意利用React.createClass创建一个类，命名为CardExample，然后exports.CardExample = CardExample;
在index.js中.其中react和react-dom不需要担心重复引用的问题，系统自动会判断
var React = require('react');var ReactDOM = require('react-dom');var card = require('./card.js');ReactDOM.render(
学习蚂蚁：
npm install antd
demo1
import React from 'react';import ReactDOM from 'react-dom';import 'antd/dist/antd.css'; import { Table, Icon } from 'antd';const columns = [{ title: 'Name', dataIndex: 'name', key: 'name', render: text => {text},}, { title: 'Age', dataIndex: 'age', key: 'age',}, { title: 'Address', dataIndex: 'address', key: 'address',}, { title: 'Action', key: 'action', render: (text, record) => ( Action 一 {record.name} Delete More actions demo2
import React from 'react';import ReactDOM from 'react-dom';import 'antd/dist/antd.css'; import { DatePicker, message } from 'antd';class App extends React.Component { constructor(props) { super(props); this.state = { date: '', }; } handleChange(date) { message.info('您选择的日期是: ' + date.toString()); this.setState({ date }); } render() { return ( this.handleChange(value)} /> 当前日期：{this.state.date.toString()} ); }}ReactDOM.render( demo3
import React from 'react';import ReactDOM from 'react-dom';import 'antd/dist/antd.css'; import { Layout, Menu, Icon } from 'antd';const { Header, Sider, Content } = Layout;class SiderDemo extends React.Component { state = { collapsed: false, }; toggle = () => { this.setState({ collapsed: !this.state.collapsed, }); } render() { return ( Content ); }}ReactDOM.render(
官方路由
学习地址：http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu
官方github：https://github.com/ReactTraining/react-router
下载：$ npm install -S react-router
demo
const React =require('react');const ReactDOM = require('react-dom');import { Router, Route, hashHistory } from 'react-router';let TeacherForm = React.createClass({ render() { return }})let StudentForm = React.createClass({ render:function() { return }})ReactDOM.render((