React创建table

首先引入react相关框架

    <script src="../../build/react.js"></script>
   <script src="../../build/react-dom.js"></script>
   <script src="../../build/browser.min.js"></script>
 ``` 
  其次制作个div标签
  ``` script
  <div id="example" style="text-align-all:center"></div>
  ``` 

写js代码

``` script
<script type="text/babel">
  var DivInput=React.createClass({
        render(){
            var value="用户名：";
            var style= {
                backgroundColor: "blue",
                textAlign: "center"
            }
                return(
                    <div style={style}>
                        <label>{value}</label>
                        <input/>
                    </div>

                )
        }
    });
    var DivTd=React.createClass({
       render(){
           var text=["","",""];
           return(
               <td>{text[0]}</td>
           )
       }
    });

    var DivTr=React.createClass({
       render(){
           var texts=["序号","用户名","密码","密码"];
           return(
               <tr>
                   <td>{texts[0]}</td>
                   <td>{texts[1]}</td>
                   <td>{texts[2]}</td>
               </tr>
           )
       }
    });

    var DivTrValues1=React.createClass({
        render(){
            var textsValues_1=["1","s1","123456"];
            var style={
                backgroundColor:"blue",
                width:"100%",
                height:"10px"
            };
            return(
                    <tr style={style}>
                        <td>{textsValues_1[0]}</td>
                        <td>{textsValues_1[1]}</td>
                        <td>{textsValues_1[2]}</td>
                    </tr>
            )
        }
    });
    var DivTrValues2=React.createClass({
        render(){
            var textsValues_2=["2","s2","123456"];
            var style={
                backgroundColor:"blue",
                width:"100%",
                height:"10px"
            };
            return(
                    <tr style={style}>
                        <td>{textsValues_2[0]}</td>
                        <td>{textsValues_2[1]}</td>
                        <td>{textsValues_2[2]}</td>
                    </tr>
            )
        }
    });

    var DivTable=React.createClass({
       render(){
           var style={
               backgroundColor:'red'
           };
           return(
               <table style={style}>
                   <tbody>
                   <DivTr/>
                   <DivTrValues1/>
                   <DivTrValues2/>
                   </tbody>
               </table>
           )
       }
    });
    var DivForm=React.createClass({
       render(){
         return(
             <form>
                 <DivTable/>
             </form>
         )
       }
    });
    ReactDOM.render(
        <DivForm/>,
        document.getElementById('example')
    )
    </script>