# 1、hello world
学习一个语言，最好的方式，我们需要去官网去查看文档（https://facebook.github.io/react），通过JSFiddle,便可以看到最简单的demo.
目前为止最新版本为15.3.0，后续没有特别说明，我们都是基于该版本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react</title>
<style>
.styleT{
color: #f40;
}
</style>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel"> var Hello = React.createClass({
render:function(){
return <h1 className="styleT">Hello,{this.props.name}</h1>;
}
});
ReactDOM.render(
<Hello name="苍老师" />,
document.getElementById("example")
);
</script>
</body>
</html>
需要注意的点：
+ 引入文件 ：当前版本需要引入react\react-dom\browser三个文件，版本不同，引入文件有出入。
- 问题来了，我们browser的为啥要用，文件这么大？它的作用是使浏览器支持babel，你可以使用ES2015（javascript下一代标准ECMAScript 6）进行编码。如果你用ES5，可以不引入。
+ ReactDOM.render该方法的两个参数
- dom节点，(并不是真正的dom节点，是个实例而已)需要注意的是class不在支持样式，因为关键字的原因，应该用className
- 需要插入的节点。
+ 传参，“苍老师”
# 2、事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
</head>
<body>
<div id="main"></div>
<script type="text/babel">
var Btn=React.createClass({
render:function () {
return <div><button onClick={this.onClick}>显示与隐藏</button> <span ref="tip">看我消失～～!</span></div>;
},
onClick:function(evt){
var ele=ReactDOM.findDOMNode(this.refs.tip);
if(ele.style.display=="none"){
ele.style.display="inline";
}else{
ele.style.display="none";
}
}
}); var Ipt=React.createClass({
render:function (){
return （
<div>
<input onChange={this.onChange} />
<span ref="infoShadow">{this.state.inputVal}</span>
</div>
）;
},
onChange:function(evt){
this.setState({
inputVal:evt.target.value,
});
},
getInitialState:function(){
return {
inputVal:"默认的字符"
}
},
}); ReactDOM.render(
<div>
<Btn />
<br/><br/><br/><br/>
<Ipt />
</div>,
document.getElementById('main')
);
</script>
</body>
</html>
注意点：
+ type类型为text/babel，而非text/JSX
+ 渲染React组件,声明变量采用首字母大写（老纸用小写，踩坑了，半天死活没效果，也不报错）
+ React.createClass() 接受的参数为对象，{ xxx }
+ 绑定事件为 onXxx={this.fn}
+ 查找节点ReactDOM.findDOMNode
- 接受参数为虚拟dom节点this.refs.xxx
- ref="xxx"(我暂时理解为id)
+ 状态
- 状态初始化 getInitialState:fn(){return {xxx:"初始化"}}
- 改变状态 setState({xxx:"改变后的状态"})
+ 创建组件虚拟dom的结构，一行显示为一坨，很恶心
- 放在小括号内 （虚拟dom...）注意接触是分号