您的位置：首页 > Web前端 > React

React学习入门实例

2016-01-19 09:15 639 查看

上节中接触的react hello world例子中引用了三个框架脚本文件，react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

注意：browser.js这个和那个开源的bowser.js不一样，那个是用来检测浏览器的小脚本，和BOWSER.JS也不一样，那个是一个JS 3D网页游戏开发的库，和bower也不一样，那个是一个包管理工具，这些名字呀，老纳也是醉了。

这是一个timer计时器的官方例子，直接把组件加到body里，整个源码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding:0;
margin:0;
}

html{
font:14px normal Arial, sans-serif;
color:#626771;
}

body{
padding:60px;
text-align: center;
}
</style>
<script src="../react.min.js"></script>
<script src="../react-dom.min.js"></script>
<script src="../browser.min.js"></script>
</head>
<body>
<script  type="text/babel">
var TimerExample = React.createClass({
getInitialState: function(){
return { elapsed: 0 };
},

componentDidMount: function(){
this.timer = setInterval(this.tick, 50);
},

componentWillUnmount: function(){
clearInterval(this.timer);
},

tick: function(){
this.setState({elapsed: new Date() - this.props.start});
},

render: function() {
var elapsed = Math.round(this.state.elapsed / 100);
var seconds = (elapsed / 10).toFixed(1);
return <p>This example was started <b>{seconds} seconds</b> ago.</p>;
}
});

React.render(
<TimerExample start={Date.now()} />,
document.body
);
</script>
</body>
</html>

定义了一个组件TimerExample ，里面componentDidMount和componentWillUnmount是五个事件中的其中两个，分别表示组件加载完成和组件将被卸载，这里用来初始化计时器和清除计时器。getInitialState设置了一个变量elapsed 初始值为0，计时器每隔50ms执行一次tick方法，设置elapsed 为当前时间减去初始时间，初始时间被定义成了组件的属性start，在组件里获取属性的方式是通过this.props，render返回了格式化的HTML，秒数被格式化保留一位小数。

这个例子很容易理解，里面组件的定义，数据的处理，组件如何被使用都很清楚。

再看一个导航菜单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding:0;
margin:
4000
0;
}

html{
font:14px normal Arial, sans-serif;
color:#626771;
background-color:#fff;
}

body{
padding:60px;
text-align: center;
}

ul{
list-style:none;
display: inline-block;
}

ul li{
display: inline-block;
padding: 10px 20px;
cursor:pointer;
background-color:#eee;
color:#7B8585;

transition:0.3s;
}

ul li:hover{
background-color:#beecea;
}

ul li.focused{
color:#fff;
background-color:#41c7c2;
}

p{
padding-top:15px;
font-size:12px;
}
</style>
<script src="../react.min.js"></script>
<script src="../react-dom.min.js"></script>
<script src="../browser.min.js"></script>
</head>
<body>
<script  type="text/babel">
var MenuExample = React.createClass({
getInitialState: function(){
return { focused: 0 };
},

clicked: function(index){
this.setState({focused: index});
},

render: function() {
var self = this;
return (
<div>
<ul>{ this.props.items.map(function(m, index){
var style = '';
if(self.state.focused == index){
style = 'focused';
}
return <li className={style} onClick={self.clicked.bind(self, index)}>{m}</li>;
}) }
</ul>
<p>Selected: {this.props.items[this.state.focused]}</p>
</div>
);
}
});
React.render(
<MenuExample items={ ['Home', 'Services', 'About', 'Contact us'] } />,
document.body
);
</script>
</body>
</html>

这个导航菜单使用一个变量focused来标记选中的是哪一个，虽然很原始，但扩展一下就可以在项目里用了，哈哈。

搜索智能提示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding:0;
margin:0;
}

html{
font:14px normal Arial, sans-serif;
color:#626771;
background-color:#fff;
}

body{
padding:60px;
text-align: center;
}

input[type=text]{
text-align: center;
font: inherit;
border: 6px solid #a3d8d6;
padding: 13px 12px;
font-size: 15px;
box-shadow: 0 1px 1px #DDD;
width: 384px;
outline: none;
display: block;
color: #7B8585;
margin: 0 auto 20px;
}

ul{
list-style: none;
display: inline-block;
width: 420px;
text-align: left;
}

ul li{
display: block;
padding: 15px 20px;
background-color: #F8F8F8;
color: #7B8585;
margin-bottom: 3px;
position: relative;

transition: 0.3s;
}

ul li a{
position: absolute;
left: 160px;
font-size: 12px;
line-height: 16px;
color: #969d9d;
}

ul li:hover{
background-color:#d8f2f1;
}
</style>
<script src="../react.min.js"></script>
<script src="../react-dom.min.js"></script>
<script src="../browser.min.js"></script>
</head>
<body>
<script  type="text/babel">
var SearchExample = React.createClass({
getInitialState: function(){
return { searchString: '' };
},

handleChange: function(e){
this.setState({searchString:e.target.value});
},

render: function() {
var libraries = this.props.items,
searchString = this.state.searchString.trim().toLowerCase();
if(searchString.length > 0){
libraries = libraries.filter(function(l){
return l.name.toLowerCase().match( searchString );
});
}

return <div>
<input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Type here" />
<ul>
{ libraries.map(function(l){
return <li>{l.name} <a href={l.url}>{l.url}</a></li>
}) }
</ul>
</div>;
}
});

var libraries = [
{ name: 'Backbone.js', url: 'http://documentcloud.github.io/backbone/'},
{ name: 'AngularJS', url: 'https://angularjs.org/'},
{ name: 'jQuery', url: 'http://jquery.com/'},
{ name: 'Prototype', url: 'http://www.prototypejs.org/'},
{ name: 'React', url: 'http://facebook.github.io/react/'},
{ name: 'Ember', url: 'http://emberjs.com/'},
{ name: 'Knockout.js', url: 'http://knockoutjs.com/'},
{ name: 'Dojo', url: 'http://dojotoolkit.org/'},
{ name: 'Mootools', url: 'http://mootools.net/'},
{ name: 'Underscore', url: 'http://documentcloud.github.io/underscore/'},
{ name: 'Lodash', url: 'http://lodash.com/'},
{ name: 'Moment', url: 'http://momentjs.com/'},
{ name: 'Express', url: 'http://expressjs.com/'},
{ name: 'Koa', url: 'http://koajs.com/'}
];
React.render(
<SearchExample items={ libraries } />,
document.body
);
</script>
</body>
</html>

就一个handleChange和filter就简单地实现了强大的过滤功能，react真的挺好用的。

表格计算

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding:0;
margin:0;
}

html{
font:14px normal Arial, sans-serif;
color:#626771;
background-color:#fff;
}

body{
padding:60px;
text-align: center;
}

h1{
font-size:18px;
margin-bottom:20px;
}

#services{
list-style: none;
display: inline-block;
width: 340px;
text-align: left;
}

#services p{
display: block;
padding: 15px 20px;
background-color: #F8F8F8;
color: #7B8585;
margin-bottom: 3px;
position: relative;
cursor: pointer;

transition: 0.3s;
}

#services p b{
position: absolute;
right: 28px;
line-height: 16px;
width: 100px;
color: #808787;
text-align: right;
}

#services p:hover{
background-color:#d8f2f1;
}

#services p.active{
color:#fff;
background-color:#41c7c2;
}

#services p.active b{
color: #fff;
}

#total{
background: none !important;
cursor: default !important;
padding-top: 10px !important;
}
</style>
<script src="../react.min.js"></script>
<script src="../react-dom.min.js"></script>
<script src="../browser.min.js"></script>
</head>
<body>
<script  type="text/babel">
var ServiceChooser = React.createClass({
getInitialState: function(){
return { total: 0 };
},
addTotal: function( price ){
this.setState( { total: this.state.total + price } );
},
render: function() {
var self = this;
var services = this.props.items.map(function(s){
return <Service name={s.name} price={s.price} active={s.active} addTotal={self.addTotal} />;
});
return <div>
<h1>Our services</h1>
<div id="services">
{services}
<p id="total">Total <b>${this.state.total.toFixed(2)}</b></p>
</div>
</div>;

}
});

var Service = React.createClass({
getInitialState: function(){
return { active: false };
},
clickHandler: function (){
var active = !this.state.active;
this.setState({ active: active });
this.props.addTotal( active ? this.props.price : -this.props.price );
},
render: function(){
return  <p className={ this.state.active ? 'active' : '' } onClick={this.clickHandler}>
{this.props.name} <b>${this.props.price.toFixed(2)}</b>
</p>;
}
});

var services = [
{ name: 'Web Development', price: 300 },
{ name: 'Design', price: 400 },
{ name: 'Integration', price: 250 },
{ name: 'Training', price: 220 }
];

React.render(
<ServiceChooser items={ services } />,
document.body
);
</script>
</body>
</html>

这个例子演示了两个组件怎么配合使用，ServiceChooser 使用了Service组件，一个Service 相当于一行，而ServiceChooser 是Service的组合，根据click事件和state.active来控制总量的计算。

以上示例均来自官方，代码整合到一个html文件中，直接运行就可见效果。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript dom

相关文章推荐

新的分享

章节导航