1.Hello,world!
ReactDOM.render( <h1>Hello,world!</h1>,document.getElementById('example') );
2.遍历数组
var names = ['Alice','Emily','Kate']; ReactDOM.render( <div> { names.map(function (name) { return <div>Hello,{name}!</div> }) } </div>,document.getElementById('example') );
3.数组渲染
var arr = [ <h1>Hello World!</h1>,<h2>React is awesome</h2>,]; ReactDOM.render( <div>{arr}</div>,document.getElementById('example') );
4.属性值传递
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="John" />,document.getElementById('example') );
5.子元素传递
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 );
6.属性类型限制
var data = 123; var MyTitle = React.createClass({ propTypes: { title: React.PropTypes.string.isrequired,},render: function() { return <h1> {this.props.title} </h1>; } }); ReactDOM.render( <MyTitle title={data} />,document.body );
7.事件
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') );
8.利用state制作LikeButton
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') );
9.利用state制作input
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);
10.定时器
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 );
11.与jquery配合实现ajax
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 );
12.利用state实现一个组件的loading/error画面
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> ); } } }); ReactDOM.render( <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,document.body );
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。