二、React初体验之React组件创建

             1 import React from ‘react‘;//引入react模块，用来创建组件
 2 3var MyComponent= React.createClass({//创建总组件,记得组件名一定要大写哦！不然会报错！！！
 4   render: function() {
 5return (
 6       <div>
 7         <Component1 name={this.props.name}/>//通过props传递name属性 8         <Component2 name={this.props.name}/>
 9       </div>
10    );
11  }
12});
1314var Component1 = React.createClass({//创建子组件Component1
15     getDefaultProps:function () { //设置初始Props16return {
17         inputValue:‘随便写些啥‘,
18      };
19    },
20     getInitialState:function () { //设置初始State21return {
22         content:"Hello World",
23      };
24    },
25     handleClick:function () { //用户自己定义的动作函数26this.setState({content:"就是"+this.refs.myTextInput.value+"!!!"});//用于修改state27    },
28     handleChange:function () {  //用户自己定义的动作函数29this.setState({content:this.refs.myTextInput.value});
30    },
31     render:function () {  //组件渲染函数，最外层只能有一个标签！！！！！32return (
33         <div>
34           <h1>{this.props.name}:Component1</h1>
35           <input type="text" ref="myTextInput" placeholder={this.props.inputValue} onChange={this.handleChange} />
36           <input type="button" value="点击" onClick={this.handleClick} />
37           <h3>{this.state.content}</h3>
38         </div>
39      );
40    },
41});
4243var Component2 = React.createClass({//创建子组件Component2
4445   getInitialState:function(){//设置state的默认初始值
46return{
47       counter:0,
48    };
49  },
50   handleAdd:function () {//action函数，state加一
51this.state.counter+=1;
52this.setState({counter:this.state.counter});//设置当前的state值
53  },
54   handleMinus:function () {//action函数，state减一
55this.state.counter-=1;
56this.setState({counter:this.state.counter});
57  },  
58   handleBack:function () {//action函数，state归零
59this.state.counter=0;
60this.setState({counter:this.state.counter});
61  },
62   render:function(){//组件渲染
63return(
64       <div>
65         <h1>{this.props.name}:Component2</h1>
66         <input type="button" value="Add 1" onClick={this.handleAdd} />
67         <input type="button" value="Minus 1" onClick={this.handleMinus} />
68         <input type="button" value="Back 0" onClick={this.handleBack} />
69         <h2>{this.state.counter}</h2>
70       </div>
71    );
72  },
73});
74 export {MyComponent} ;//组件输出，（这儿插一句题外话，export是ES6制定的模块加载方式，与import配合使用，而exports是CommonJS的标准，与require等配合使用，他们的区别有机会另开文章将）

            1 import React from ‘react‘;//引入“react”组件
2 import ReactDOM from ‘react-dom‘;//引入“react-dom”组件
3 import {MyComponent} from ‘./App.jsx‘;//引入我们刚才写好的MyComponent组件
4 ReactDOM.render(<MyComponent  name="chen" />,document.getElementById(‘app‘));