ReactJS入门ES6写法
参考：
React 官方网站
ECMAScript 6 入门
React 入门实例教程
HTML 模板
使用 React 的网页源码，结构大致如下。
<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>1.输出”Hello“
//ES5
ReactDOM.render(
Hello, world!
,
document.getElementById('example')
);
//ES6
class HelloMessage extends React.Component{
render(){
return Hello {this.props.name}
;
}
}
class Output extends React.Component{
render(){
return (
<div>
"John" />
div>
);
}
}
ReactDOM.render(,document.getElementById('example')); 2.数组遍历
//ES5
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!div>
})
}
div>,
document.getElementById('example')
);
//ES6
class Greeting extends React.Component {
render() {
const names = ['Alice', 'Emily', 'Kate'];
return (
<div>
{
names.map((name,index) => <div key = {index}>Hello, {name}!div>)
}
div>
);
}
}
ReactDOM.render(3.this.props.children
组件类的 this.props属性，可以在组建对象上获取，
this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点
//ES5
var NotesList = React.createClass({
render: function() {
return (
{
React.Children.map(this.props.children, function (child) {
return - {child}
;
})
}
);
}
});
//ES6
class NotesList extends React.Component {
render() {
return (
{
React.Children.map(this.props.children, (child) => {return - {child}
})
}
)
}
}
ReactDOM.render(
hello
world
,
document.body
);4.PropTypes和defaultProps
定义组件的属性类型和默认属性，统一使用static成员来实现
//ES5
var Video = React.createClass({
getDefaultProps: function() {
return {
autoPlay: false,
maxLoops: 10,
};
},
propTypes: {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
},
render: function() {
return (
5.ref属性
从组件获取真实 DOM节点
//ES5
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
type="text" ref="myTextInput" />
type="button" value="Focus the text input" onClick={this.handleClick} />
);
}
});
//ES6
class MyComponent extends React.Component {
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this)
}
handleClick(){
this.refs.myTextInput.focus()
}
render(){
return(
type="text" ref="myTextInput" />
type="button" value="Focus the text input" onClick={this.handleClick} />
)
}
}
ReactDOM.render(
6.组件状态机 this.state
将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI
//ES5
var LikeButton = React.createClass({
getInitialState: function() {
return {
liked: false,
value: 'crlin'
};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked',
value = this.state.value;
return (
this.handleClick}>You {text} this. Click to toggle.
"text" value={value} onChange={this.handleChange} />
{value}
);
}
});
//ES6
class LikeButton extends React.Component {
constructor(props){
super(props);
this.state = {
liked: false,
value: "crlin"
}
}
handleClick(){
this.setState({
liked: !this.state.liked
})
}
handleChange(event){
this.setState({
value: event.target.value
})
}
render(){
let text = this.state.liked ? 'like' : 'haven\'t liked',
value = this.state.value;
return (
this.handleClick.bind(this)}>You {text} this. Click to toggle.
"text" value={value} onChange={this.handleChange.bind(this)} />
{value}
);
}
}
ReactDOM.render(
7.Component Lifecycle（生命周期）
React Component Lifecycle（生命周期）
//ES5
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 (
opacity: this.state.opacity}}>
Hello {this.props.name}
);
}
});
//ES6
class Hello extends React.Component{
constructor(props) {
super(props);
this.state = {
opacity: 1.0
}
}
componentDidMount() {
let timer = setInterval( () => {
let opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}, 100);
}
render() {
return (
this.state.opacity}}>
Hello {this.props.name}
);
}
};
ReactDOM.render(
"world" />,
document.getElementById('example')
);8.ajax请求
可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI
//ES5
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
if (this.isMounted()) {
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}
}.bind(this));
},
render: function() {
return (
);
}
});
ReactDOM.render(
//api.github.com/users/octocat/gists" />,
document.body
);
//ES6
class UserGist extends React.Component{
constructor(props){
super(props);
this.state = {
username:'',
lastGistUrl:''
}
}
componentDidMount(){
$.get(this.props.source, (result) => {
let lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
});
}
render(){
return(
);
}
}
class RepeatArray extends React.Component{
constructor(props) {
super(props);
}
render(){
return (
"https://api.github.com/users/octocat/gists" />
);
}
}
ReactDOM.render(