引入文件下载 参考阮一峰文档
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>
上边三个js文件必须在开头就引入,browser.js是转换jsx代码的类库
下边script 的src是text/babel 使用jsx 必须加上把src换成这个
首页写一个helloworld
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
jsx语法
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
js代码放入html中 不需要加引号,jsx语法当遇到<就会解析成html,遇到{就会解析成js
会把数组的成员自动提取出来
组件
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);
注意事项:首字母必须大写,一般采用驼峰命名法,有且只能有一个顶层标签,另外标签的class必须写成className
this.props能拿到传递过来的值,也就是对象的属性
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
);
this.props.children 能拿到所有的子节点,然后通过React.Children.map(obj,function(){}) 去除所有节点
获取真实DOM
React都需虚DOM，想要获取真实Dom,你可能会用到ref属性
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
上边代码当你点击focus的时候 input;text 会获取焦点,因为获取的真实demo,所以必须等dom加载完毕,才能执行,否则会报错,可以加到事件之后
React支持js的原生事件,类似onclick变成onClick 等 就是驼峰命名法
this.state
交互,组件可以把它看成一个状态机,一开始有了初始状态,用户互动,状态改变,重新渲染
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')
);
上边代码 利用getInitialState 创建一个stata liked 就行licked的改变 就行不选的render,
this.state 和this.props 的区别:props一般都是不改变的参数
表单
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);
上边例子当用户输入的时候,state 实时渲染 从而改变p的值
生命周期
组建的生命周期分为三种状态
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
每种状态又有两个处理函数 Will 和Did ,渲染前 渲染后
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
一个组建被渲染后的 例子
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},
render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});
ReactDOM.render(
<Hello name="world"/>,
document.body
);
dom插入后,开启一个定时器 改变文件透明度
注意 style的写法 第一层大括号 是jsx语法 第二层是样式对象
一个ajax请求的例子
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
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
);
渲染demo 之后 通过利用jquery 发送一个ajax 改变state 进行重新渲染
