Html文件里，弄一个container，但会被replace
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
js里，一个render方法，（A,B），A是组件名称，里面还能插入组件属性，如下面的name="world"，并通过this.prop.xxx调用，B是插入到html的那个标签并replace掉
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
关于组件新建，就是
React.createClass（{
XXX:XXX;
XXX:xxx;
...
}
）
就是一个对象下面各种属性方法哈
react与css
两种写法，一个写在css文件中，但要注意的是，给标签添加class时，根据es6最新特性，要写成className
<Hello name="World" className="ddd" />
另一种写法，是写在js新建组件里面，render方法return时加上style={（键值对写法）}（react规定）
来个例子
var Hello=React.createClass({
render:function(){
var styleObj={
color:"red";(react规定要以字符串形式，所以双引号)
fontSize:"40px"(react规定名字要驼峰式写法）
}；
return<div style={styleObj}></div>;
}
生命周期和this.state
一张图，一个hook的理念，在creatClass方法中的hook方法进行使用，应该就把生命周期阐述完了。
讲到生命周期，不得不说this.state.在图中你能看到，mounting阶段，有一个getinitialState()方法是处于所有hook之前，这个方法用于定义初始状态，也就是一个对象，这个对象可以在接下来的creatClass方法通过 this.state.xxx读取属性
既然有了this.state了，肯定要有改变值的方法，就是this.setState，这个可谓是核心，每次修改以后，自动调用 this.render方法，再次渲染组件。就是所谓的动态改变了，弄一个例子看看
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
获取真实的dom
其实就是给标签绑定一个ref值，通过索引ref值得到真实dom节点
最后来一个实例来结束入门
var TestClickComponent=React.createClass({
render:funtion(){
handleClick:function(event){
var tipE =React.findDomNode(this.refs.ddd);
if(tipE.style.display="none")
{
.......
}
return(
<div>
<button onClick={this.handleClick}>显示隐藏</button><span ref="ddd">测试点击隐藏
<div>
);
}
});
var TestInputComponent=React.createClass({
getInitialState:function(){
return {
inputContent:""
}
},
render:function(){
changHandler:function(event){
this.setState({
inputContent:event.target.value
})；
}
return(
<div>
<input type="text" onChange={this.changeHandler}}/><span>{this.state.inputContent}</span>
<div>
);
}
});
React.render(
<div>
<TestClickCompent/>
<TestInputCompent/>
</div>
document.getElementById("container"));
- 文本输入框的值，不能用this.props.value读取，而要定义一个onChange
事件的回调函数，通过event.target.value读取用户输入的值。textarea元素，select元素，radio元素都属于这种情况 - 尽量都使用驼峰式写法命名，能避免很多bug，有一个特别注意，组件命名第一个字母要大写的
- React的监听事件中，要获取真实的dom，有React.findDomNode(this.refs.XXX)，就是相当于原来的选择器，但这里要和文本框内容区分开
- 在render中，对两个组件用了个div包起来，因为render不能直接放两个组件
- 第一个组件，就是在button中添加事件（注意大小写）handleClick，在handClick方法中获取span的真实dom节点及其属性并进行操作
- 第二个组件中，就是一个state和setState进行动态交互的一个小例子，在 getInitialState中定义属性inputContent，并在事件对调函数中改变他进行动态输出（event.target.value）
