2015年最熱門前端框架React 入門實例教程
$ git clone git@github.com:ruanyf/react-demos.git
<!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>
$ babel src --out-dir build
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example')
);
var names = ['Alice', 'Emily', 'Kate'];ReactDOM.render( <div> { names.map(function (name) { return <div>Hello, {name}!</div> }) } </div>, document.getElementById('example')
);
var arr = [ <h1>Hello world!</h1>, <h2>React is awesome</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example')
);
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; }});
ReactDOM.render( <HelloMessage name="John" />, document.getElementById('example')
);
var NotesList = React.createClass({ render: function() { return ( <ol> { React.Children.map(this.props.children, function (child) { return {child}; }) } </ol> ); } }); ReactDOM.render( <NotesList> <span>hello</span> <span>world</span> </NotesList>, document.body
);
var MyTitle = React.createClass({ propTypes: { title: React.PropTypes.string.isRequired, }, render: function() { return <h1> {this.props.title} </h1>; }
});
var data = 123;
ReactDOM.render( <MyTitle title={data} />, document.body
);
Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.
var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle />,
document.body);
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')
);
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')
);
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);
Mounting：已插入真實 DOM
Updating：正在被從新渲染
Unmounting：已移出真實 DOM
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
componentWillReceiveProps(object nextProps)：已加載組件收到新的參數時調用
shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否從新渲染時調用
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);
style="opacity:{this.state.opacity};"
style={{opacity: this.state.opacity}}
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 (
<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
);
ReactDOM.render( <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />, document.body
);
var RepoList = React.createClass({ getInitialState: function() { return { loading: true, error: null, data: null}; }, componentDidMount() { this.props.promise.then( value => this.setState({loading: false, data: value}), error => this.setState({loading: false, error: error})); }, render: function() { if (this.state.loading) { return <span>Loading...</span>; } else if (this.state.error !== null) { return <span>Error: {this.state.error.message}</span>; } else { var repos = this.state.data.items; var repoList = repos.map(function (repo) { return ( <li> <a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description} </li> ); }); return ( <main> <h1>Most Popular JavaScript Projects in Github</h1> <ol>{repoList}</ol> </main> ); } }
});
React (Virtual) DOM Terminology, by Sebastian Markbge
The React Quick Start Guide, by Jack Callister
Learning React.js: Getting Started and Concepts, by Ken Wheeler
Getting started with React, by Ryan Clark
React JS Tutorial and Guide to the Gotchas, by Justin Deal
React Primer, by Binary Muse
jQuery versus React.js thinking, by zigomir
相關文章
- 1. 2015年最熱門前端框架React 入門實例教程
- 2. React 入門實例教程
- 3. 前端框架React Js入門教程【精】
- 4. 前端框架AngularJS入門
- 5. 【前端】Bootstrap框架入門
- 6. 前端框架Vue入門
- 7. React 入門實例教程 --阮一峯
- 8. React 入門實例教程總結
- 9. 前端熱門框架的兼容性
- 10. 推薦幾款目前最熱門的前端框架
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • Neo4j數據庫入門教程 - NoSQL教程
- • YAML 入門教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 2015年最熱門前端框架React 入門實例教程
- 2. React 入門實例教程
- 3. 前端框架React Js入門教程【精】
- 4. 前端框架AngularJS入門
- 5. 【前端】Bootstrap框架入門
- 6. 前端框架Vue入門
- 7. React 入門實例教程 --阮一峯
- 8. React 入門實例教程總結
- 9. 前端熱門框架的兼容性
- 10. 推薦幾款目前最熱門的前端框架