简单教程
提交运行
代码编辑器:
<title>React Hello World -简单教程 </title> <script src="https://cdn.staticfile.org/react/15.5.4/react.min.js"></script> <script src="https://cdn.staticfile.org/react/15.5.4/react-dom.min.js"></script> <script src="https://cdn.staticfile.org/jquery/1.9.0/jquery.min.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.24.0/babel.min.js"></script> <div id="app"></div> <script type="text/babel"> var UserGist = React.createClass({ getInitialState: function() { return { username: '', lastGistUrl: '' }; }, componentDidMount: function() { this.serverRequest = $.get(this.props.source, function (result) { var lastGist = result[0]; this.setState({ username: lastGist.owner.login, lastGistUrl: lastGist.html_url }); }.bind(this)); }, componentWillUnmount: function() { this.serverRequest.abort(); }, render: function() { return ( <div> {this.state.username} 用户最新的 Gist 共享地址: <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a> </div> ); } }); ReactDOM.render( <UserGist source="https://api.github.com/users/loganrichard/gists" />, document.getElementById('app') ); </script>
运行结果: