學習 React(jsx語法) + es2015 + babel + webpack

時間 2019-11-11

標籤學習 react jsx 語法 es2015 babel webpack 欄目 React 简体版

原文原文鏈接

視頻學習地址：javascript

http://www.jtthink.com/course/play/575

官方地址 php

https://facebook.github.io/react/

神坑：css

0、【You need to specify 'babel-loader' instead of 'babel'.】。解決方案：webpack中的loader:"babel-loader"，不要簡寫爲：loader:"babel"html

一、每次this.setState都會從新初始化getInitialState中的參數vue

二、createClass的命名必須以大寫開頭如，var MySelect = React.createClass,這裏若是定義爲myselect就會出錯java

三、render方法的第一個參數return，html代碼的第一行必須和return同一行，剩下的才能夠換行，也就是不能讓 return 孤零零的佔據一行,或者用括號將html代碼括起來node

四、若是你是Linux或者mac系統，在執行工具如babel/webpack時記得加上權限（sudo）react

五、.babelrc文件中的縮進很是有講究，必須是兩個空格。不講究也不要緊。反正是用webpack來代替.babelrc文件的配置的webpack

六、Html的for屬性必須改成htmlFor，class屬性必須改成classNamegit

七、引入組件必須使用以下形式： import { Mysearch } from './header.js'

八、和vue很類似。render函數中return的(jsx)Html，最外層必須包含一個div。也就是說不能同時return兩個同級的div

html環境搭建（前期學習使用，後期廢棄）

<!DOCTYPE html>
<html>
<meta charset='utf-8'>
<head>
    <title></title>
    <script src="http://cdn.bootcss.com/react/15.0.0/react.min.js"></script>
    <script src="http://cdn.bootcss.com/react/15.0.0/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>

</body>
</html>

demo 1 渲染

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

demo 2 循環

<script type="text/babel">
var nav_li=[
<li><a href='#'>最新電影</a></li>,
<li><a href='#'>最新評論</a></li>
    ];
ReactDOM.render(
         <ul>{nav_li}</ul>,
         document.getElementById('navbar')
)    
</script>


<script type="text/babel">
var nav_li=['最新電影', '最新評論']; 
ReactDOM.render(
         <ul>
         {
             nav_li.map(function(item){
                 return <li><a href='#'>{item}</a></li>;
             })
         }
         </ul>,
         document.getElementById('navbar')
)    
</script>

demo3 : 綁定事件

<script type="text/babel">
var aa = function()
{
alert("123");
}

var nav_li=['最新電影', '最新評論']; 
ReactDOM.render(
         <ul>
         {
             nav_li.map(function(item){
                 return <li><a href='#' onClick={function(){alert('123')}}>{item}</a></li>;
　　　　　　　　　　return <li><a href='#' onClick={aa}>{item}</a></li>;
             })
         }
         </ul>,
         document.getElementById('navbar')
)    
</script>

demo4 : 組件化(重頭戲)

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
    <!-- babel6.0以上已經不支持了瀏覽器了 -->
    <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
    <title>Document</title>
</head>
<style>
</style>
<body>
    <div id="app"></div>

    <div id="navbar"></div>

    <div id="Welcome"></div>
</body>

<!-- 必須標識爲 type="text/babel" -->
<script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('app')
    );

    var nav_li=['最新電影', '最新評論'];
    ReactDOM.render(
         <ul>
         {
             nav_li.map(function(item){
                 return <li><a href='#'>{item}</a></li>;
             })
         }
         </ul>,
         document.getElementById('navbar')
    )


    class Welcome extends React.Component {
      render() {
        return <h1>Hello, {this.props.name}</h1>;
      }
    }
    const element = <Welcome name="Sara" />;
    ReactDOM.render(
      element,
      document.getElementById('Welcome')
    );
</script>
</html>

demo5:嵌套組件、遞歸屬性（this.props.XXX），注意!! HTML的class在這裏是className

var NavBar = React.createClass({
    myFunc : function(){alert("123")}, render : function() { return <ul> <li><a href='#' onClick={this.myFunc}>最新電影</a></li> <li><a href='#'>最新評論</a></li> <li><SearchText SearchText_abc={this.props.SearchText_abc} /></li> </ul>  } }) var SearchText = React.createClass({ render:function() { return <input type="text" placeholder = "請輸入文字" className = {this.props.SearchText_abc} />  } }) ReactDOM.render( <NavBar SearchText_abc="Lee" />, document.getElementById('navbar') )

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 <li>{item.moiveName}</li>
        });         
        return <ul>{myli}</ul>
    }
})


ReactDOM.render(
        <ul>
            <MoviesList />
        </ul>,
        document.getElementById('moiveList')
)

#php代碼

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  <ul>
                    <li><a href='#' onClick={this.myFunc}>最新電影</a></li>
                    <li><a href='#' onClick={this.myRemove}>最新評論</a></li>
                    <li><SearchText SearchText_abc={this.props.SearchText_abc} /></li>
                </ul>
    },
    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 <input type="text" placeholder = "請輸入文字" value={this.state.title} onChange={this.myChange} className = {this.props.SearchText_abc} />  } })

Demo9：引入組件,注意label的for屬性必須改成htmlFor

#index.js var React = require("react")
var ReactDOM = require("react-dom")
import { Mysearch } from './header.js'

ReactDOM.render( 
    <Mysearch />,
    document.getElementById('Header') 
)    
 

#header.js var React = require("react")
var Mysearch = React.createClass({
    render : function()
    {
        return (
                <div className="comm_list_temp">
                        <div className="comm_input">
                            <ul>
                                <li className="oneline"><label htmlFor="min_sales">模板名稱：</label>
                                    <input type="text" value="" name="" className="nomore" />
                                    <button type="button" className="redbutton fl ml-10">搜索</button>
                                    <button type="reset" className="whitebutton fl ml-10">重置</button>
                                </li>
                            </ul>
                        </div>
                 </div>
        )
    }
})

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引用規則）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
     <div id="app"></div>


    <!-- #這個是必須加載的文件 -->
    <script src="http://localhost:9091/webpack-dev-server.js"></script> 

    <!-- #這下面就是須要熱編譯的js,必須是webpack中輸出的文件纔有效 -->
    <script src="http://localhost:9091/common.js"></script>
    <script src="http://localhost:9091/app.js"></script>


</body>
</html>

打開控制檯

#開啓熱編譯
npm start

打開網頁： localhost:9091/test/index1.html

當修改該頁面引入的js文件時。就會自動編譯

注意，這個熱編譯插件，他是將編譯的js放入內存中而且引入到指定的html中。因此並無生成到build文件夾下，若是想生成還須要手動使用webpack命令

開始React和第三方結合

React-bootstrap的學習:http://react-bootstrap.github.io/components.html#navbars

npm install react-bootstrap --save-dev

頁面引入css：

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

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  <Navbar>
                        <Navbar.Header>
                          <Navbar.Brand>
                            <a href="#">React-Bootstrap</a>
                          </Navbar.Brand>
                        </Navbar.Header>
                        <Nav>
                          <NavItem eventKey={1} href="#">Link</NavItem>
                          <NavItem eventKey={2} href="#">Link</NavItem>
                          <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
                            <MenuItem eventKey={3.1}>Action</MenuItem>
                            <MenuItem eventKey={3.2}>Another action</MenuItem>
                            <MenuItem eventKey={3.3}>Something else here</MenuItem>
                            <MenuItem divider />
                            <MenuItem eventKey={3.3}>Separated link</MenuItem>
                          </NavDropdown>
                        </Nav>
               </Navbar>
    }
})



ReactDOM.render(<MyNav />, document.getElementById('demo'));

編譯便可看到結果

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

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(<AMUIReact.Header {...props} />, document.getElementById('demo'));

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 <div>
    <Panel header="面板標題">
      默認面板
    </Panel>
    <Panel header="面板標題" amStyle="primary">
      primary - 面板
    </Panel>
    <Panel header="面板標題" amStyle="secondary">
      secondary - 面板
    </Panel>
    <Panel header="面板標題" amStyle="success">
      success - 面板
    </Panel>
    <Panel header="面板標題" amStyle="warning">
      warning - 面板
    </Panel>
    <Panel header="面板標題" amStyle="danger">
      danger - 面板
    </Panel>
  </div>
    }
})



ReactDOM.render(<MyPanel />, document.getElementById('demo'));

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

#下載
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 --save

sudo npm install babel-plugin-add-module-exports --save-dev

sudo 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：

<script src="http://localhost:9898/webpack-dev-server.js"></script>  <!-- 固定寫法，不一樣的只是端口號 -->
<script type="text/javascript" src='main.js'></script>　　<!-- 按需配置，按需加載 -->

而且注意，熱編譯的html必須在根目錄。

    entry: {
        //表明入口(總)文件 ，能夠寫多個。
        main:['./src/main.js'],
        user:['./src/login.js']
    },

html

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

</body>
</html>

demo1:

var React = require('react');
var ReactDOM = require('react-dom');
import {Button} from 'amazeui-touch';

ReactDOM.render(
    <Button>Hello World!</Button>,
    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( 
    <card.CardExample />,
    document.getElementById('demo') 
)

學習螞蟻：http://ant.design/docs/react/introduce

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 => <a href="#">{text}</a>,
}, {
  title: 'Age',
  dataIndex: 'age',
  key: 'age',
}, {
  title: 'Address',
  dataIndex: 'address',
  key: 'address',
}, {
  title: 'Action',
  key: 'action',
  render: (text, record) => (
    <span>
      <a href="#">Action 一 {record.name}</a>
      <span className="ant-divider" />
      <a href="#">Delete</a>
      <span className="ant-divider" />
      <a href="#" className="ant-dropdown-link">
        More actions <Icon type="down" />
      </a>
    </span>
  ),
}];

const data = [{
  key: '1',
  name: 'John Brown',
  age: 32,
  address: 'New York No. 1 Lake Park',
}, {
  key: '2',
  name: 'Jim Green',
  age: 42,
  address: 'London No. 1 Lake Park',
}, {
  key: '3',
  name: 'Joe Black',
  age: 32,
  address: 'Sidney No. 1 Lake Park',
}];


ReactDOM.render(<Table columns={columns} dataSource={data} />,document.getElementById('app'));

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 (
      <div style={{ width: 400, margin: '100px auto' }}>
        <DatePicker onChange={value => this.handleChange(value)} />
        <div style={{ marginTop: 20 }}>當前日期：{this.state.date.toString()}</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

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 (
      <Layout>
        <Sider
          trigger={null}
          collapsible
          collapsed={this.state.collapsed}
        >
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1">
              <Icon type="user" />
              <span className="nav-text">nav 1</span>
            </Menu.Item>
            <Menu.Item key="2">
              <Icon type="video-camera" />
              <span className="nav-text">nav 2</span>
            </Menu.Item>
            <Menu.Item key="3">
              <Icon type="upload" />
              <span className="nav-text">nav 3</span>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }}>
            <Icon
              className="trigger"
              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={this.toggle}
            />
          </Header>
          <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
            Content
          </Content>
        </Layout>
      </Layout>
    );
  }
}

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

const React =require('react');
const ReactDOM = require('react-dom');
import { Router, Route, hashHistory } from 'react-router';


let TeacherForm = React.createClass({
    render()
    {
        return <form id='TeacherForm'>
                    <h2>教師登陸</h2>
                     <div className='control-group input-append'>
                            <input type='text' name='nickname' id='nickname' data-required='true' />

                            <label for='nickname' className='add-on'><span className='icon-asterisk'></span> Nickname</label>
                        </div>

                        <div className='control-group input-append'>
                            <input type='text' name='site' id='site' />

                            <label for='site' className='add-on'>Site</label>
                        </div>

                        <div className='control-group input-append'>
                            <input type='text' name='age' id='age' data-required data-pattern='^[0-9]+$' />

                            <label for='age' className='add-on'><span className='icon-asterisk'></span> Age</label>
                        </div>

                        <div className='btn-group'>
                            <button type='submit' className='btn btn-primary'>Send</button>

                            <button type='reset' className='btn'>Reset</button>
                        </div>
                </form>
    }
})

let StudentForm = React.createClass({
    render:function()
    {
        return  <form id='StudentForm'>
                    <h2>學生登陸</h2>
                     <div className='control-group input-append'>
                            <input type='text' name='nickname' id='nickname' data-required='true' />

                            <label for='nickname' className='add-on'><span className='icon-asterisk'></span> Nickname</label>
                        </div>

                        <div className='control-group input-append'>
                            <input type='text' name='site' id='site' />

                            <label for='site' className='add-on'>Site</label>
                        </div>

                        <div className='control-group input-append'>
                            <input type='text' name='age' id='age' data-required data-pattern='^[0-9]+$' />

                            <label for='age' className='add-on'><span className='icon-asterisk'></span> Age</label>
                        </div>

                        <div className='btn-group'>
                            <button type='submit' className='btn btn-primary'>Send</button>

                            <button type='reset' className='btn'>Reset</button>
                        </div>
                </form>
    }
})


ReactDOM.render((
  <Router history={hashHistory}>
    <Route path="/" component={StudentForm}/>
    <Route path="t" component={TeacherForm}/>
    <Route path="s" component={StudentForm}/>
  </Router>
), document.getElementById('form'));