React入门简单实践
2016-02-26 16:33
633 查看
参考文献:
1、React入门示例教程——阮一峰
2、React仅仅只是你的界限
React主要的优点就是增量更新(虚拟DOM)和组件化(状态机)。
View Code
1、React入门示例教程——阮一峰
2、React仅仅只是你的界限
React主要的优点就是增量更新(虚拟DOM)和组件化(状态机)。
<!DOCTYPE html> <html> <head> <script src="react.js"></script> <script src="react-dom.js"></script> <script src="browser.min.js"></script> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> 1<div id="example1"></div><br><br> 2<div id="example2"></div><br><br> 3<div id="example3"></div><br><br> 4<div id="example4"></div><br><br> 5<div id="example5"></div><br><br> 6<div id="example6"></div><br><br> 7<div id="example7"></div><br><br> 8<div id="example8"></div><br><br> 9<div id="example9"></div><br><br> 10<div id="example10"></div><br><br> <script type="text/babel"> //ReactDOM.render() var names=['LiMing','Zhangsam','Xiaoming']; var addr=[<p>Beijing</p>,<p>Tianjin</p>]; ReactDOM.render( <div> {addr}, { names.map ( function(name) { return <div>hell0,{name}</div> } ) } </div>, document.getElementById('example1')); //组件,组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM var HelloMessage1=React.createClass ({ render:function() { return (<h5>hello,{this.props.nameStr},{this.props.size}</h5>) } }); ReactDOM.render( <HelloMessage1 nameStr='John' size='12'/>,document.getElementById("example2") ); var HelloMessage2=React.createClass ({ render:function() { return ( <ol> { React.Children.map(this.props.children, function (child) { return <li>{child}</li> }) } </ol> ); } }); ReactDOM.render( <HelloMessage2> <span>one</span> <span>two</span> <span>three</span> </HelloMessage2> ,document.getElementById("example3") ); //PropTypes验证参数 var MyTitle = React.createClass({ propTypes: { title: React.PropTypes.string.isRequired,//PropTypes验证组件参数 }, getDefaultProps : function () {//getDefaultProps设置组件默认值 return { msg : 'Hello World' }; }, render: function() { return <h1> {this.props.title},{this.props.msg} </h1>; } }); var data = 123; ReactDOM.render( <MyTitle title={data} />, document.getElementById("example4") );//you can see message in console: Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`. //获得真实的DOM节点,ref属性 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('example5') ); //this.state,React的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化 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('example6') ); //this.props 和 this.state 都用于描述组件的特性,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性 //表单 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.getElementById('example7')); //组件的生命周期 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), 200); }, render: function () { return ( <div style={{opacity: this.state.opacity}}> Hello {this.props.name} </div> );//React 组件样式是一个对象,所以style里第一重大括号表示这是 JavaScript 语法,第二重大括号表示样式对象。// } }); ReactDOM.render( <Hello name="world"/>, document.getElementById('example8') ); //Ajax (1) 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}> {this.state.lastGistUrl}</a>. </div> ); } }); ReactDOM.render( <UserGist source="https://api.github.com/users/ruanyf/gists" />, document.getElementById('example9') ) //Ajax (2) Promise 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.getElementById('example10') ); </script> </body> </html>
View Code
相关文章推荐
- React-数据流详解
- 安装react-native遇到的问题
- React-Native hello word 搭建及新手常见问题
- React—组件生命周期详解
- React-Native的学习指南
- react-native学习资源
- React动画实践
- React-JSX详解
- React Native学习笔记-4:CSS优先级速记
- 学习iOS、React Native、算法开发的建议
- React Native iOS 的 TransformErrorerror错误(.babelrc.stage)
- React Native学习笔记-3: unable to find module in its module map
- React Native 组件生命周期
- React-参考
- React-PurePenderMixin
- React-不可变数据的辅助工具
- React-插件-性能分析工具
- React插件-测试工具集-克隆组件
- React Native-15.React Native 常用API及实践 AlertIOS AlertSheetIOS
- React插件-类名操作