在pc端中使用react，在移动端使用react native。
1，环境部署
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script> //react想要跟dom交互就靠它
<script src="../build/browser.min.js"></script>//将JSX语法(就是js和html混搭语言)转为 JavaScript 语法
2，ReactDOM.render()
将虚拟dom插入页面中，成为真实dom显示出来
<body>
<div id="example"></div>
<script type="text/babel"> //这里要注意类型，说明是用了jsx语法
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
3，JSX 语法
HTML 语言直接写在 JavaScript 语言之中，混合就是jsx
为了浏览器能识别所以要加载browser.min.js，都转化为js
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
数组里面直接加入html不需要单引号和加号串联：
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
4、组件React.createClass({})
var HelloMessage = React.createClass({ //这个称为组件，组件名称首字母必须大写
render: function() {
return <h1>Hello {this.props.name}</h1>; //顶级层只能有一个父容器，this.props用来获取用户传来的参数
}
});
ReactDOM.render(
<HelloMessage name="John" />, //可以看成是调用一个fn函数,HelloMessage("John")，注意class和for是js关键词，如果想要自定义这样的名称只能写成className和htmlFor
document.getElementById('example')
);
5，this.props
用来获取用户传来的参数或者顶级容器的所有子节点，（一般声明了就不会改变）
this.props.自定义属性 //获取用户传来的参数
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>; //获取name的值即是John"
}
});
ReactDOM.render(
<HelloMessage name="John" /> //name="John"是用户自定义的参数
document.getElementById('example')
);
this.props.children //获取顶级容器的所以子节点
下面例子使用this.props.children就是获取到所有的span，因为它们是顶级容器的子节点
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.body
);
这里需要注意， this.props.children 的值有三种可能：
如果当前组件没有子节点，它就是 undefined ;
如果有一个子节点，数据类型是 object ；
如果有多个子节点，数据类型就是 array 。
所以，处理 this.props.children 的时候要小心。
React 提供一个工具方法 React.Children 来处理 this.props.children，使用案例：
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.body
);
我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object
6，PropTypes
用来判断用户传来的参数是否符合要求
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired, //title值必须是字符串
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
var data = 123;
ReactDOM.render(
<MyTitle title={data} />, //title的值必须是字符串，如果别的类型值就会报错
document.body
);
7，this.refs react获取DOM节点
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" /> //这里的ref就相当于id,这样react能方便获取
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
8，this.state
动态值、状态值，会随着用户跟界面交互随时改变
var LikeButton = React.createClass({
getInitialState: function() { //初始化动态值在此函数中进行
return {liked: false}; //动态值都声明在这里面，获取里面的值使用：this.state.xxx
},
handleClick: function(event) {
this.setState({liked: !this.state.liked}); //修改动态值使用this.setState({})
},
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')
);
9，事件
react也有自己的事件方法，例如 click、hover等等，下面看一个例子：
var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input/>, document.body);
1,{}:在jsx语法中传变量到虚拟html要用到
2,event.target:就相当于$(this)
3,on+事件名:想给哪个虚拟dom绑定事件就加上on+事件名
10，css样式
render: function () {
return (
<div style={{opacity: 0.5,marginLeft:10px}}>
Hello {this.props.name}
</div>
);
}
11，ajax (使用了jquery)
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
$.get(this.props.source, function(result) { //这里使用的是jquery的$.get
var lastGist = result[0];
if (this.isMounted()) {
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}
}.bind(this));
},
render: function() {
return (
<div>
{this.state.username}'s last gist is
<a href={this.state.lastGistUrl}>here</a>.
</div>
);
}
});
ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.body
);
http://www.ruanyifeng.com/blog/2015/03/react.html
学习react必须要了解 生命周期，不然很难学习下去：《react native生命周期》
