ReactJS结合ES6入门Template

一、前言

二、介绍

ReactJS

ECMAScript 6

三、入门DEMO

"Hello,XXX“ 输出

　　ES5写法

<div id="example"></div>
<script type="text/jsx">
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>

　　ES6

import React,{Component} from 'react';

class HelloMessage extends Component{
constructor() {
super();
}
render(){
return <h1>Hello {this.props.name}</h1>;
}
}
class Output extends Component{
constructor() {
super();
}
render(){

return (
<div>
<HelloMessage name="John" />
</div>
);
}
}
export default Output;

　　2. 数组遍历显示

　　ES5

　

<script type="text/jsx">
var names = ['Alice', 'Emily', 'Kate'];

React.render(
<div>
{
names.map((name)=>return <div>Hello, {name}!</div>; );
}
</div>,
document.getElementById('example')
);
</script>

<script type="text/jsx">
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
React.render(
<div>{arr}</div>,
document.getElementById('example')
);
</script>

　　ES6

class RepeatArray extends Component{
constructor() {
super();
}
render(){
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
var names = ['Alice', 'Emily', 'Kate'];
return (
<div>
{arr}
{
names.map((name) =>{return <div>Hello, {name}!</div>;} )
}
</div>
);
}
}
export default RepeatArray;

　　3. ol与li的实现

　　ES5

<script type="text/jsx">
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
this.props.children.map(function (child) {
return <li>{child}</li>
})
}
</ol>
);
}
});

React.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.body
);
</script>

　　ES6

class RepeatLi extends Component{
render(){
return (
<ol>
{
this.props.children.map((child)=>{return <li>{child}</li>})
}
</ol>
);
}
}
class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
<div>

<RepeatLi>
<span>hello</span>
<span>world</span>
</RepeatLi>

</div>
);
}
}
export default RepeatArray;

　　4. Click事件

　　ES5

script type="text/jsx">
var MyComponent = React.createClass({
handleClick: function() {
React.findDOMNode(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>
);
}
});

React.render(
<MyComponent />,
document.getElementById('example')
);
</script>

　　ES6

class FocusText extends Component{
handleClick(){
React.findDOMNode(this.refs.myText).focus();
}
render(){
return(
<div>
<input type="text" ref="myText" />
<input type="button" value="focus the text input" onClick={this.handleClick.bind(this)} />
</div>
);
}
}
class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
<div>
<FocusText />
</div>
);
}
}
export default RepeatArray;

　　5. State的用法，以toggel显示文字为例

　　ES5

<script type="text/jsx">
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>
);
}
});

React.render(
<LikeButton />,
document.getElementById('example')
);
</script>

　　ES6

class StateUse extends Component{
constructor(){
super();
this.state={
like:true
}
}
handleClick(){
this.setState({like:!this.state.like});
}
render(){
var text = this.state.like?'Like':"Unlike";
return(
<div>
<p onClick={this.handleClick.bind(this)}>
You {text} this.Click the toggle;
</p>
</div>
);
}
}
class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
<div>
<StateUse />
</div>
);
}
}
export default RepeatArray;

　　6. onChange事件，以及变量值的同步

　　ES5

<script type="text/jsx">
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>
);
}
});

React.render(<Input/>, document.body);
</script>

　　ES6

class AsyncText extends Component{
constructor(){
super();
this.state={
value:'Hello!'
}
}
handleChange(e){
this.setState({value:e.target.value});
}
render(){
var value= this.state.value;
return(
<div>
<input type="text" value={value} onChange={this.handleChange.bind(this)} />
<p>
{value}
</p>
</div>
);
}
}
class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
<AsyncText />
</div>
);
}
}
export default RepeatArray;

　　7. 定时任务事件的嵌入

　　ES5

<script type="text/jsx">
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>
);
}
});

React.render(
<Hello name="world"/>,
document.body
);
</script>

　　ES6

class OpacityWord extends Component{
constructor(){
super();
this.state={
opacity:1.0
}
}
componentWillMount(){
let time  =  setInterval(()=>{
let opacity = this.state.opacity;
opacity -= 0.5;
if (opacity<0.1) {
opacity=1.0;
}
this.setState({opacity:opacity});
}.bind(this),100);
}
render(){
return (
<div style={{ opacity:this.state.opacity }}>
Hello, {this.props.name}!
</div>
);
}

}

class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
<div>
<OpacityWord />
</div>
);
}
}
export default RepeatArray;

　　8. 从服务端获取数据

　　ES5

<script type="text/jsx">
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>
);
}
});

React.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.body
);
</script>

　　ES6

class UserGist extends Component{
constructor(){
super();
this.state={
username:'',
lastGistUrl:''
}
}
componentWillMount(){
$.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(){
return(
<div>
{this.state.username} ..
<a href={this.state.lastGistUrl} >here</a>
</div>
);
}
}
class RepeatArray extends Component{
constructor() {
super();
}
render(){
return (
<div>
<UserGist source="https://api.github.com/users/octocat/gists" />
</div>
);
}
}
export default RepeatArray;