视频学习地址：

官方地址

神坑：

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环境搭建（前期学习使用，后期废弃）

  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset='utf-8'>
  4. <head>
  5.     <title></title>
  6.     <script src="http://cdn.bootcss.com/react/15.0.0/react.min.js"></script>
  7.     <script src="http://cdn.bootcss.com/react/15.0.0/react-dom.min.js"></script>
  8.     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  9. </head>
  10. <body>
  11.  
  12. </body>
  13. </html>

demo 1 渲染

  1.     <script type="text/babel">
  2.       ReactDOM.render(
  3.         <h1>Hello, world!</h1>,
  4.         document.getElementById('example')
  5.       );
  6.     </script>

demo 2 循环

  1. <script type="text/babel">
  2. var nav_li=[
  3. <li><a href='#'>最新电影</a></li>,
  4. <li><a href='#'>最新评论</a></li>
  5.     ];
  6. ReactDOM.render(
  7.          <ul>{nav_li}</ul>,
  8.          document.getElementById('navbar')
  9. )
  10. </script>
  11.  
  12. <script type="text/babel">
  13. var nav_li=['最新电影', '最新评论'];
  14. ReactDOM.render(
  15.          <ul>
  16.          {
  17.              nav_li.map(function(item){
  18.                  return <li><a href='#'>{item}</a></li>;
  19.              })
  20.          }
  21.          </ul>,
  22.          document.getElementById('navbar')
  23. )
  24. </script>

 demo3 : 绑定事件

  1. <script type="text/babel">
  2. var aa = function()
  3. {
  4. alert("123");
  5. }
  6.  
  7. var nav_li=['最新电影', '最新评论'];
  8. ReactDOM.render(
  9.          <ul>
  10.          {
  11.              nav_li.map(function(item){
  12.                  return <li><a href='#' onClick={function(){alert('123')}}>{item}</a></li>;
  13. 　　　　　　　　　　return <li><a href='#' onClick={aa}>{item}</a></li>;
  14.              })
  15.          }
  16.          </ul>,
  17.          document.getElementById('navbar')
  18. )
  19. </script>

demo4 : 组件化(重头戏)

  1. <!DOCTYPE html>
  2.     <html lang="en">
  3.     <head>
  4.     <meta charset="UTF-8">
  5.     <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.production.min.js"></script>
  6.     <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
  7.     <!-- babel6.0以上已经不支持了浏览器了 -->
  8.     <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
  9.     <title>Document</title>
  10. </head>
  11. <style>
  12. </style>
  13. <body>
  14.     <div id="app"></div>
  15.  
  16.     <div id="navbar"></div>
  17.  
  18.     <div id="Welcome"></div>
  19. </body>
  20.  
  21. <!-- 必须标识为 type="text/babel" -->
  22. <script type="text/babel">
  23.     ReactDOM.render(
  24.       <h1>Hello, world!</h1>,
  25.       document.getElementById('app')
  26.     );
  27.  
  28.     var nav_li=['最新电影', '最新评论'];
  29.     ReactDOM.render(
  30.          <ul>
  31.          {
  32.              nav_li.map(function(item){
  33.                  return <li><a href='#'>{item}</a></li>;
  34.              })
  35.          }
  36.          </ul>,
  37.          document.getElementById('navbar')
  38.     )
  39.  
  40.     class Welcome extends React.Component {
  41.       render() {
  42.         return <h1>Hello, {this.props.name}</h1>;
  43.       }
  44.     }
  45.     const element = <Welcome name="Sara" />;
  46.     ReactDOM.render(
  47.       element,
  48.       document.getElementById('Welcome')
  49.     );
  50. </script>
  51. </html>

demo5:嵌套组件、递归属性（this.props.XXX），注意!! HTML的class在这里是className

  1. var NavBar = React.createClass({
  2.     myFunc : function(){alert("123")},
  3.     render : function()
  4.     {
  5.         return  <ul>
  6.                     <li><a href='#' onClick={this.myFunc}>最新电影</a></li>
  7.                     <li><a href='#'>最新评论</a></li>
  8.                     <li><SearchText SearchText_abc={this.props.SearchText_abc} /></li>
  9.                 </ul>
  10.     }
  11. })
  12.  
  13. var SearchText = React.createClass({
  14.     render:function()
  15.     {
  16.         return <input type="text" placeholder = "请输入文字" className = {this.props.SearchText_abc} />
  17.     }
  18. })
  19.  
  20. ReactDOM.render(
  21.          <NavBar SearchText_abc="Lee" />,
  22.          document.getElementById('navbar')
  23. )

demo6: AJAX实战，在success后必须重新绑定this指针

  1. #js代码
  2. var MoviesList = React.createClass
  3. ({
  4.     getInitialState:function()
  5.     {
  6.         return {
  7.             movie:[]
  8.         }
  9.     },
  10.     componentDidMount:function()
  11.     {
  12.         $.ajax
  13.         ({
  14.             url:"http://zhaohong.com",
  15.             success:function(data)
  16.             {
  17.                 data = JSON.parse(data);
  18.                 console.log(data);
  19.                 this.setState({movie:data});
  20.             }.bind(this)  //将AJAX中的this的指针更换为当前对象
  21.         })
  22.     },
  23.     render:function()
  24.     {
  25.         //console.log("我是reander",this.state.movie);
  26.         var myli = this.state.movie.map(function(item)
  27.         {
  28.             console.log(item);
  29.             return <li>{item.moiveName}</li>
  30.         });
  31.         return <ul>{myli}</ul>
  32.     }
  33. })
  34.  
  35. ReactDOM.render(
  36.         <ul>
  37.             <MoviesList />
  38.         </ul>,
  39.         document.getElementById('moiveList')
  40. )
  41.  
  42. #php代码
  1. header("Access-Control-Allow-Origin:*");
  2.         $arr = array();
  3.         $arr[0]["moiveName"] = "美国队长3内战";
  4.         $arr[1]["moiveName"] = "X战警3天启";
  5.         $arr[2]["moiveName"] = "大鱼海棠";
  6.  
  7.         $arr[0]["id"] = "1";
  8.         $arr[1]["id"] = "2";
  9.         $arr[2]["id"] = "3";
  10.  
  11.         $arr[0]["info"] = "奥创纪元之后，全球政府联合颁布法令，管控超能力活动。对这条法令的不同态度，使复仇者阵营一分为二，钢铁侠和美国队长各据一方，其他复仇者则不得不做出自己的选择，最终引发前任盟友间的史诗大战。";
  12.         $arr[1]["info"] = "该片故事以20世纪80年代为背景，讲述了古老强大的第一个变种人天启在埃及醒来，他想统治并改变这个世界，而引发一系列变种人大战的故事";
  13.         $arr[2]["info"] = "所有人类的灵魂都是海里一条巨大的鱼，出生的时候从海的此岸出发，在路途中，有时相遇，有时分开，死的时候去到海的彼岸，之后变成一条沉睡的小鱼，等待多年后的再次出发，这个旅程永远不会结束，生命往复不息。十六岁生日那天，居住在“神之围楼”里的一个名叫椿的女孩变作一条海豚到人间巡礼，被大海中的一张网困住，一个人类男孩因为救她而落入深海死去。为了报恩，为了让人类男孩复活，她需要在自己的世界里，历经种种困难与阻碍，帮助死后男孩的灵魂——一条拇指那么大的小鱼，成长为一条比鲸更巨大的鱼并回归大海";
  14.         exit(json_encode($arr));
  1.  

demo7 : 移除组件、移除时的事件

  1. var NavBar = React.createClass({
  2.     myFunc : function(){alert("")},
  3.     myRemove:function(){ReactDOM.unmountComponentAtNode(document.getElementById('navbar'))},
  4.     render : function()
  5.     {
  6.         return  <ul>
  7.                     <li><a href='#' onClick={this.myFunc}>最新电影</a></li>
  8.                     <li><a href='#' onClick={this.myRemove}>最新评论</a></li>
  9.                     <li><SearchText SearchText_abc={this.props.SearchText_abc} /></li>
  10.                 </ul>
  11.     },
  12.     componentWillUnmount: function() {
  13.         alert("我被移除了");
  14.     }
  15. })

demo8 : Input设置value属性时的问题、由于value是React的保留字段，当对Input书写该属性的时候，会造成input只读。需要配合state + onChange + e.target.value来实现正常input

  1. var SearchText = React.createClass
  2. ({
  3.     getInitialState:function()
  4.     {
  5.         return {
  6.             title:"请输入文字"
  7.         }
  8.     },
  9.     myChange:function(e)
  10.     {
  11.         var v = e.target.value;
  12.         this.setState({title:v});
  13.     },
  14.     render:function()
  15.     {
  16.         return <input type="text" placeholder = "请输入文字" value={this.state.title} onChange={this.myChange} className = {this.props.SearchText_abc} />
  17.     }
  18. })
  1.  

Demo9：引入组件,注意label的for属性必须改为htmlFor

  1. #index.js
  2. var React = require("react")
  3. var ReactDOM = require("react-dom")
  4. import { Mysearch } from './header.js'
  5.  
  6. ReactDOM.render(
  7.     <Mysearch />,
  8.     document.getElementById('Header')
  9. )     
  10.  
  11. #header.js
  12. var React = require("react")
    var Mysearch = React.createClass({
  13.     render : function()
  14.     {
  15.         return (
  16.                 <div className="comm_list_temp">
  17.                         <div className="comm_input">
  18.                             <ul>
  19.                                 <li className="oneline"><label htmlFor="min_sales">模板名称：</label>
  20.                                     <input type="text" value="" name="" className="nomore" />
  21.                                     <button type="button" className="redbutton fl ml-10">搜索</button>
  22.                                     <button type="reset" className="whitebutton fl ml-10">重置</button>
  23.                                 </li>
  24.                             </ul>
  25.                         </div>
  26.                  </div>
  27.         )
  28.     }
  29. })
  30.  
  31. exports.Mysearch = Mysearch;

正片开始，前方高能

安装babel以及各种插件（es2015/react/react-dom/react解析）

（神坑：文件夹如果也叫react，那么你在npm init时的项目命名千万别和react重名（默认会是你的文件夹名），当然包括其他组件名和框架名都要避免。否则会报错）

  1. 安装nodejs 
    http://nodejs.cn/
  2.  
  3. 安装 babel 
    npm install babel-cli -g
  4.  
  5. 安装webpack 
    npm install webpack -g
  6.  
  7. 安装插件（在命令行使用的时候，记得先整合成一行）
  8. npm install
  9.              babel-core
  10.              babel-preset-react
  11.              babel-preset-es2015
  12.              babel-preset-stage-0
  13.              react
  14.              react-dom
  15.              webpack
  16.              babel-loader
  17.              css-loader
  18.              style-loader
  19.              webpack-dev-server
  20.              html-webpack-plugin
  21.              url-loader
  22.  --save-dev
  1. webpack.config.js
  1. var HtmlWebpackPlugin = require('html-webpack-plugin');
  2. var webpack = require('webpack');
  3. var path = require("path");
  4.  
  5. module.exports = {
  6.     entry:{
  7.        app : ['./src/js/index.js']
  8.     },
  9.     output: {
  10.          path: path.resolve(__dirname, "build/js"),
  11.          filename:'[name].js'   //最终打包生成的文件名
  12.     },
  13.     devServer: {
  14.         historyApiFallback: true,
  15.         hot: true,
  16.         inline: true,
  17.         progress: true,
  18.         port:9091    //这个端口你可以自定义
  19.     },
  20.     module: {
  21.         loaders: [
  22.             {
  23.                 test: /\.js|jsx$/,   //是一个正则，代表js或者jsx后缀的文件要使用
  24.                 loader: 'babel',
  25.                 query:{
  26.                     presets:['es2015','react','stage-0'] //必须先安装babel-preset-es2015和babel-preset-react
  27.                 }
  28.             },
  29.             {
  30.                 test: /\.css$/,
  31.                 loaders: ['style', 'css'],  //必须先安装css-loader和style-loader
  32. 　　　　　　},
  33.             {
  34.                 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  35.                 loader: 'url',
  36.                 query: {
  37.                   limit: 10000,
  38.                   name: './build/img/[name].[hash:7].[ext]'
  39.                 }
  40.             },
  41.             {
  42.                 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  43.                 loader: 'url',
  44.                 query: {
  45.                   limit: 10000,
  46.                   name: './build/fonts/[name].[hash:7].[ext]'
  47.                 }
  48.             }　　　　
  49.  　　　　]
  50. 　　},
  51.     plugins:[
  52.         //动态将上面编译好的js文件导入到以下html文件中并且生成到指定目录
  53.         new HtmlWebpackPlugin({
  54.              template:__dirname + '/src/tpl/index.html',
  55.              filename:__dirname + '/build/tpl/index.html',
  56.              hash:true,
  57.              inject:"body",
  58.              chunks:['common','app']
  59.         }),
    　　　　 //提取出公共的代码
  60.         new webpack.optimize.CommonsChunkPlugin({
  61.             name:"common",  //对应entry的对象名称
  62.             chunks:['app']
  63.         })
  64.     ]　　
  65. }
  1.  
  1. 使用webpack：
  1. sudo webpack

热编译

每次修改完代码都要手动在控制台中输入webpack是很变态的一件事，最好能每次保存js文件时自动编译。这就是热编译

但是，热编译是热编译、build是build（这里的build指的是在控制台单独使用webpack编译）、一定要区分开来各自的作用。

打开package.json加入

  1. "scripts": {
    　　"start": "webpack-dev-server --hot --inline"
  2. }

在根目录中新建test/index1.html （请务必注意以下代码的script引用规则）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.      <div id="app"></div>
  9.  
  10.     <!-- #这个是必须加载的文件 -->
  11.     <script src="http://localhost:9091/webpack-dev-server.js"></script> 
  12.  
  13.     <!-- #这下面就是需要热编译的js,必须是webpack中输出的文件才有效 -->
  14.     <script src="http://localhost:9091/common.js"></script>
  15.     <script src="http://localhost:9091/app.js"></script>
  16.  
  17. </body>
  18. </html>

打开控制台

  1. #开启热编译
    npm start

打开网页 ： localhost:9091/test/index1.html

当修改该页面引入的js文件时。就会自动编译

注意，这个热编译插件，他是将编译的js放入内存中并且引入到指定的html中。所以并没有生成到build文件夹下，如果想生成还需要手动使用webpack命令

开始React和第三方结合

React-bootstrap的学习:http://react-bootstrap.github.io/components.html#navbars

  1. npm install react-bootstrap --save-dev

页面引入css：

  1. <link href="https://cdn.bootcss.com/bootstrap/3.3.6//css/bootstrap.min.css" rel="stylesheet">

js

  1. const React =require('react');
  2. const ReactDOM = require('react-dom');
  3.  
  4. var Nav = require('react-bootstrap').Nav;
  5. var NavItem = require('react-bootstrap').NavItem;
  6. var NavDropdown = require('react-bootstrap').NavDropdown;
  7. var MenuItem = require('react-bootstrap').MenuItem;
  8. var Navbar = require('react-bootstrap').Navbar; 
  9.  
  10. let MyNav = React.createClass({
  11.     render:function()
  12.     {
  13.         return  <Navbar>
  14.                         <Navbar.Header>
  15.                           <Navbar.Brand>
  16.                             <a href="#">React-Bootstrap</a>
  17.                           </Navbar.Brand>
  18.                         </Navbar.Header>
  19.                         <Nav>
  20.                           <NavItem eventKey={1} href="#">Link</NavItem>
  21.                           <NavItem eventKey={2} href="#">Link</NavItem>
  22.                           <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
  23.                             <MenuItem eventKey={3.1}>Action</MenuItem>
  24.                             <MenuItem eventKey={3.2}>Another action</MenuItem>
  25.                             <MenuItem eventKey={3.3}>Something else here</MenuItem>
  26.                             <MenuItem divider />
  27.                             <MenuItem eventKey={3.3}>Separated link</MenuItem>
  28.                           </NavDropdown>
  29.                         </Nav>
  30.                </Navbar>
  31.     }
  32. })
  33.  
  34. ReactDOM.render(<MyNav />, document.getElementById('demo'));

编译即可看到结果

React-amazeui（PC端）的学习:http://amazeui.org/react/getting-started

  1. npm install amazeui-react --save-dev
  2.  
  3. npm install  babel-preset-stage-0
  4.  
  5. npm install babel-plugin-transform-object-rest-spread 

.babelrc

  1. {
  2.   "presets":["es2015","react","stage-0"],
  3.   "plugins":['transform-object-rest-spread']
  4. }

index.js(demo1)

  1. const React =require('react');
  2. const ReactDOM = require('react-dom');
  3. const AMUIReact = require('amazeui-react');
  4.  
  5. var props = {
  6.   title: 'Amaze UI',
  7.   link: '#title-link',
  8.   data: {
  9.     left: [
  10.       {
  11.         link: '#left-link',
  12.         icon: 'home'
  13.       }
  14.     ],
  15.     right: [
  16.       {
  17.         link: '#right-link',
  18.         icon: 'bars'
  19.       }
  20.     ]
  21.   },
  22.   onSelect: function(nav, e) {
  23.     e.preventDefault();
  24.     console.log('你点击了', nav);
  25.     // do something
  26.   }
  27. };
  28.  
  29. ReactDOM.render(<AMUIReact.Header {...props} />, document.getElementById('demo'));

index.js(demo2)

  1. const React =require('react');
  2. const ReactDOM = require('react-dom');
  3. const AMUIReact = require('amazeui-react');
  4. const Panel = AMUIReact.Panel;
  5.  
  6. let MyPanel = React.createClass({
  7.     render:function()
  8.     {
  9.         return <div>
  10.     <Panel header="面板标题">
  11.       默认面板
  12.     </Panel>
  13.     <Panel header="面板标题" amStyle="primary">
  14.       primary - 面板
  15.     </Panel>
  16.     <Panel header="面板标题" amStyle="secondary">
  17.       secondary - 面板
  18.     </Panel>
  19.     <Panel header="面板标题" amStyle="success">
  20.       success - 面板
  21.     </Panel>
  22.     <Panel header="面板标题" amStyle="warning">
  23.       warning - 面板
  24.     </Panel>
  25.     <Panel header="面板标题" amStyle="danger">
  26.       danger - 面板
  27.     </Panel>
  28.   </div>
  29.     }
  30. })
  31.  
  32. ReactDOM.render(<MyPanel />, document.getElementById('demo'));

amazeui touch(移动端)：http://t.amazeui.org/#/docs?_k=4cmux8

  1. #下载
    npm install --save-dev amazeui-touch
  1. sudo npm install react-router --save-dev
  1. #根据错误提示和 amazeui-touch 下的.babelrc文件中的内容，下载如下内容
  2. sudo npm install  babel-preset-stage-0
  3. sudo npm install babel-plugin-transform-object-assign --save
  4.  
  5. sudo npm install babel-plugin-add-module-exports --save-dev
  6.  
  7. sudo npm install transform-object-rest-spread
  8. #这个是根据错误提示加入的
  9.  
  10. sudo npm install react-addons-css-transition-group --save-dev
  11.  
  12. sudo npm install babel-preset-stage-0 --save-dev   #注意要在.babelrc和webpack.config.js的配置位置中加入stage-0才行

为了更好的配合编译，推荐将webpack.config.js中的entry配置为如下示例。

在html中只需要加载如下两个Js：

  1. <script src="http://localhost:9898/webpack-dev-server.js"></script>  <!-- 固定写法，不同的只是端口号 -->
  2. <script type="text/javascript" src='main.js'></script>　　<!-- 按需配置，按需加载 -->

并且注意，热编译的html必须在根目录。

  1.     entry: {
  2.         //代表入口(总)文件 ，可以写多个。
  3.         main:['./src/main.js'],
  4.         user:['./src/login.js']
  5.     },

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Document</title>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="description" content="">
  8.     <meta name="keywords" content="">
  9.     <meta name="viewport" content="width=device-width,initial-scale=1">
  10.     <title>Amaze UI Touch</title>
  11.     <meta name="renderer" content="webkit">
  12.     <!-- No Baidu Siteapp-->
  13.     <meta http-equiv="Cache-Control" content="no-siteapp">
  14.     <link rel="alternate icon" type="image/png" href="i/favicon.png">
  15.     <link rel="apple-touch-icon-precomposed" href="i/app-icon72x72@2x.png">
  16.     <meta name="apple-mobile-web-app-title" content="AMUI React">
  17.     <meta name="apple-mobile-web-app-capable" content="yes">
  18.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  19.     <link rel="stylesheet" href="https://npmcdn.com/amazeui-touch@1.0.0-beta.3/dist/amazeui.touch.min.css">
  20. </head>
  21. <body>
  22.     <div id="demo"></div>
  23.  
  24.     <script src="http://localhost:9898/webpack-dev-server.js"></script>
  25.     <script type="text/javascript" src='index-webpack.js'></script>
  26.  
  27. </body>
  28. </html>

demo1:

  1. var React = require('react');
  2. var ReactDOM = require('react-dom');
  3. import {Button} from 'amazeui-touch';
  4.  
  5. ReactDOM.render(
  6.     <Button>Hello World!</Button>,
  7.     document.getElementById('demo')
  8. )

demo2:剥离引用（口述）

新建一个card.js，随意利用React.createClass创建一个类，命名为CardExample，然后exports.CardExample = CardExample;

在index.js中.其中react和react-dom不需要担心重复引用的问题，系统自动会判断

  1. var React = require('react');
  2. var ReactDOM = require('react-dom');
  3. var card = require('./card.js');
  4.  
  5. ReactDOM.render(
  6.     <card.CardExample />,
  7.     document.getElementById('demo')
  8. )

学习蚂蚁：http://ant.design/docs/react/introduce

  1. npm install antd

demo1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import 'antd/dist/antd.css';
  4. import { Table, Icon } from 'antd';
  5.  
  6. const columns = [{
  7.   title: 'Name',
  8.   dataIndex: 'name',
  9.   key: 'name',
  10.   render: text => <a href="#">{text}</a>,
  11. }, {
  12.   title: 'Age',
  13.   dataIndex: 'age',
  14.   key: 'age',
  15. }, {
  16.   title: 'Address',
  17.   dataIndex: 'address',
  18.   key: 'address',
  19. }, {
  20.   title: 'Action',
  21.   key: 'action',
  22.   render: (text, record) => (
  23.     <span>
  24.       <a href="#">Action 一 {record.name}</a>
  25.       <span className="ant-divider" />
  26.       <a href="#">Delete</a>
  27.       <span className="ant-divider" />
  28.       <a href="#" className="ant-dropdown-link">
  29.         More actions <Icon type="down" />
  30.       </a>
  31.     </span>
  32.   ),
  33. }];
  34.  
  35. const data = [{
  36.   key: '1',
  37.   name: 'John Brown',
  38.   age: 32,
  39.   address: 'New York No. 1 Lake Park',
  40. }, {
  41.   key: '2',
  42.   name: 'Jim Green',
  43.   age: 42,
  44.   address: 'London No. 1 Lake Park',
  45. }, {
  46.   key: '3',
  47.   name: 'Joe Black',
  48.   age: 32,
  49.   address: 'Sidney No. 1 Lake Park',
  50. }];
  51.  
  52. ReactDOM.render(<Table columns={columns} dataSource={data} />,document.getElementById('app'));

demo2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import 'antd/dist/antd.css';
  4. import { DatePicker, message } from 'antd';
  5.  
  6. class App extends React.Component {
  7.   constructor(props) {
  8.     super(props);
  9.     this.state = {
  10.       date: '',
  11.     };
  12.   }
  13.   handleChange(date) {
  14.     message.info('您选择的日期是: ' + date.toString());
  15.     this.setState({ date });
  16.   }
  17.   render() {
  18.     return (
  19.       <div style={{ width: 400, margin: '100px auto' }}>
  20.         <DatePicker onChange={value => this.handleChange(value)} />
  21.         <div style={{ marginTop: 20 }}>当前日期：{this.state.date.toString()}</div>
  22.       </div>
  23.     );
  24.   }
  25. }
  26.  
  27. ReactDOM.render(<App />, document.getElementById('app'));

demo3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3.  
  4. import 'antd/dist/antd.css';
  5. import { Layout, Menu, Icon } from 'antd';
  6. const { Header, Sider, Content } = Layout;
  7.  
  8. class SiderDemo extends React.Component {
  9.   state = {
  10.     collapsed: false,
  11.   };
  12.   toggle = () => {
  13.     this.setState({
  14.       collapsed: !this.state.collapsed,
  15.     });
  16.   }
  17.   render() {
  18.     return (
  19.       <Layout>
  20.         <Sider
  21.           trigger={null}
  22.           collapsible
  23.           collapsed={this.state.collapsed}
  24.         >
  25.           <div className="logo" />
  26.           <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
  27.             <Menu.Item key="1">
  28.               <Icon type="user" />
  29.               <span className="nav-text">nav 1</span>
  30.             </Menu.Item>
  31.             <Menu.Item key="2">
  32.               <Icon type="video-camera" />
  33.               <span className="nav-text">nav 2</span>
  34.             </Menu.Item>
  35.             <Menu.Item key="3">
  36.               <Icon type="upload" />
  37.               <span className="nav-text">nav 3</span>
  38.             </Menu.Item>
  39.           </Menu>
  40.         </Sider>
  41.         <Layout>
  42.           <Header style={{ background: '#fff', padding: 0 }}>
  43.             <Icon
  44.               className="trigger"
  45.               type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
  46.               onClick={this.toggle}
  47.             />
  48.           </Header>
  49.           <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
  50.             Content
  51.           </Content>
  52.         </Layout>
  53.       </Layout>
  54.     );
  55.   }
  56. }
  57.  
  58. ReactDOM.render(<SiderDemo />, document.getElementById('app'));

官方路由

学习地址：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

  1. const React =require('react');
  2. const ReactDOM = require('react-dom');
  3. import { Router, Route, hashHistory } from 'react-router';
  4.  
  5. let TeacherForm = React.createClass({
  6.     render()
  7.     {
  8.         return <form id='TeacherForm'>
  9.                     <h2>教师登录</h2>
  10.                      <div className='control-group input-append'>
  11.                             <input type='text' name='nickname' id='nickname' data-required='true' />
  12.  
  13.                             <label for='nickname' className='add-on'><span className='icon-asterisk'></span> Nickname</label>
  14.                         </div>
  15.  
  16.                         <div className='control-group input-append'>
  17.                             <input type='text' name='site' id='site' />
  18.  
  19.                             <label for='site' className='add-on'>Site</label>
  20.                         </div>
  21.  
  22.                         <div className='control-group input-append'>
  23.                             <input type='text' name='age' id='age' data-required data-pattern='^[0-9]+$' />
  24.  
  25.                             <label for='age' className='add-on'><span className='icon-asterisk'></span> Age</label>
  26.                         </div>
  27.  
  28.                         <div className='btn-group'>
  29.                             <button type='submit' className='btn btn-primary'>Send</button>
  30.  
  31.                             <button type='reset' className='btn'>Reset</button>
  32.                         </div>
  33.                 </form>
  34.     }
  35. })
  36.  
  37. let StudentForm = React.createClass({
  38.     render:function()
  39.     {
  40.         return  <form id='StudentForm'>
  41.                     <h2>学生登录</h2>
  42.                      <div className='control-group input-append'>
  43.                             <input type='text' name='nickname' id='nickname' data-required='true' />
  44.  
  45.                             <label for='nickname' className='add-on'><span className='icon-asterisk'></span> Nickname</label>
  46.                         </div>
  47.  
  48.                         <div className='control-group input-append'>
  49.                             <input type='text' name='site' id='site' />
  50.  
  51.                             <label for='site' className='add-on'>Site</label>
  52.                         </div>
  53.  
  54.                         <div className='control-group input-append'>
  55.                             <input type='text' name='age' id='age' data-required data-pattern='^[0-9]+$' />
  56.  
  57.                             <label for='age' className='add-on'><span className='icon-asterisk'></span> Age</label>
  58.                         </div>
  59.  
  60.                         <div className='btn-group'>
  61.                             <button type='submit' className='btn btn-primary'>Send</button>
  62.  
  63.                             <button type='reset' className='btn'>Reset</button>
  64.                         </div>
  65.                 </form>
  66.     }
  67. })
  68.  
  69. ReactDOM.render((
  70.   <Router history={hashHistory}>
  71.     <Route path="/" component={StudentForm}/>
  72.     <Route path="t" component={TeacherForm}/>
  73.     <Route path="s" component={StudentForm}/>
  74.   </Router>
  75. ), document.getElementById('form'));

学习 React(jsx语法) + es2015 + babel + webpack的更多相关文章

  1. 2. React JSX语法及特点介绍

    什么是JSX         JSX 是一种类 XML 语言,全称是 JavaScript XML .React 可以不使用 JSX来编写组件,但是使用JSX可以让代码可读性更高.语义更清晰.对 Re ...

  2. React JSX语法说明

    原文:http://my.oschina.net/leogao0816/blog/379487 什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代 ...

  3. React(JSX语法)-----JSX基本语法

    JSX------HTML tags vs React Components: 1.To render a html tag,just use lower-case tag names in JSX; ...

  4. React(JSX语法)----动态UI

    1.React honws how to bubble and capture events according to the spec,and events passed to your event ...

  5. React(JSX语法)----JSX拼写

    注意:For DOM differences,such as the inline style attribute,check here. // bad: it displays "FIrs ...

  6. React(JSX语法)-----JSX属性

    1. if you know all the propertities that you want to place on a component ahead of time,it is easy t ...

  7. 二、react开发环境配置与webpack入门

    Webpack 模块打包工具(module bundler)功能: 将 CSS.图片与其他资源打包 打包之前预处理(Less.CoffeeScript.JSX.ES6 等)档案 依 entry 文件不 ...

  8. 22-React JSX语法

    React JSX语法 JSX只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用JSX,组件的结构和 ...

  9. React 简单实例 （React-router + webpack + Antd ）

    React Demo  Github 地址 经过React Native 的洗礼之后,写了这个 demo :React 是为了使前端的V层更具组件化,能更好的复用,同时可以让你从操作dom中解脱出来, ...

随机推荐

  1. head标签详细讲解

    head标签详细讲解 head位于html网页的头部,后前的标签,并以开始以结束的一html标签. Head标签位置如图: head标签示意图 head包含标签 meta,title,link,bas ...

  2. addEventListener详解

    为什么需要addEventListener? 先来看一个片段: html代码 <div id="box">追梦子</div> 用on的代码 window.o ...

  3. C 标准库系列之ctype.h

    ctype.h 主要提供了一些函数用以测试字符或字符处理的功能函数:包括字符判断检测.字符转换: 目前ASCII字符可分为以下一些类型,如:大写.小写.字母.数字.十六进制.空白字符.可打印字符.控制 ...

  4. Codeforces #380 Subordinates(贪心 构造)

    从前往后扫,找到一出现次数为0的数,从后面找一个出现不为0的数转化而来.设置两指针l, r来处理. #include<cstdio> #include<iostream> #i ...

  5. [Linux] 查看jar包内容

    jar vtf  fileName.jar 用法: jar {ctxui}[vfm0Me] [jar-file] [manifest-file] [entry-point] [-C dir] file ...

  6. DTMF三种模式(SIPINFO,RFC2833,INBAND)

    转自:http://www.tuicool.com/articles/n6Vb2iJ 1.DTMF(双音多频)定义:由高频音和低频音的两个正弦波合成表示数字按键(0~9 * # A B C D). 2 ...

  7. WPF下的Richtextbox中实现表格合并，添加删除行列等功能

    .Net中已有现在的方法实现这些功能,不过可能是由于未完善,未把方法公开出来.只能用反射的方法去调用它. 详细信息可以查看.Net Framework 的源代码 http://referencesou ...

  8. jQuery中事件绑定到bind、live、delegate、on方法的探究

    1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...

  9. Ie8+，强制默认使用ie8模式

  10. iframe中positioin:fixed失效问题

    页面中嵌套的iframe 内的 position:fixed元素定位失效fixed正常页面 此时position:fixed是根据浏览器窗口定位的,下拉一直位于左上角:以iframe形式嵌入后 此时p ...