reactjs入门到实战（十）----one-first_app
index
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<!-- Disable browser cache -->
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<title>Project One</title>
<link rel="stylesheet" href="vendor/semantic-ui/semantic.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="vendor/babel-core-5.8.25.js"></script>
<script src="vendor/react.js"></script>
<script src="vendor/react-dom.js"></script>
</head> <body>
<div class="main ui text container">
<h1 class="ui dividing centered header">Popular Products</h1>
<div id="content"></div>
</div>
<script src="./data.js"></script>
<script type="text/babel" src="./app.js"></script>
<script src="http://localhost:35729/livereload.js?snipver=1"></script>
<!-- Delete the line below to get started. -->
<!-- <script type="text/babel" src="./app-complete.js"></script> -->
</body> </html>
data：
window.Data = (function () {
function generateVoteCount() {
return Math.floor((Math.random() * ) + );
}
const data = [
{
id: ,
title: 'Yellow Pail',
description: 'On-demand sand castle construction expertise.',
url: '#',
votes: generateVoteCount(),
submitter_avatar_url: 'images/avatars/daniel.jpg',
product_image_url: 'images/products/image-aqua.png',
},
{
id: ,
title: 'Supermajority: The Fantasy Congress League',
description: 'Earn points when your favorite politicians pass legislation.',
url: '#',
votes: generateVoteCount(),
submitter_avatar_url: 'images/avatars/kristy.png',
product_image_url: 'images/products/image-rose.png',
},
{
id: ,
title: 'Tinfoild: Tailored tinfoil hats',
description: 'We already have your measurements and shipping address.',
url: '#',
votes: generateVoteCount(),
submitter_avatar_url: 'images/avatars/veronika.jpg',
product_image_url: 'images/products/image-steel.png',
},
{
id: ,
title: 'Haught or Naught',
description: 'High-minded or absent-minded? You decide.',
url: '#',
votes: generateVoteCount(),
submitter_avatar_url: 'images/avatars/molly.png',
product_image_url: 'images/products/image-yellow.png',
},
];
return data;
})();
app：
'use strict'
/**
*产品列表
**/ /* eslint-disable no-undef */ const ProductList = React.createClass({
// getInitialState: function () {
// return {
// products: [],
// };
// },
// componentDidMount: function () {
// this.updateState();
// },
// updateState: function () {
// const products = Data.sort((a, b) => {
// return b.votes - a.votes;
// });
// this.setState({ products: products });
// },
// handleUpVote: function (productId) {
// Data.forEach((el) => {
// if (el.id === productId) {
// el.votes = el.votes + 1;
// return;
// }
// });
// this.updateState();
// }, getInitialState: function() {
return {
products:[],
};
},
componentDidMount:function (){
this.updateState();
},
updateState:function(){
const products = Data.sort(function(a,b){
return b.votes - a.votes;
});
this.setState({products:products})
},
handleUpVote: function (productId) {
for(var item in Data){
if(Data[item].id == productId){
Data[item].votes = Data[item].votes +;
continue;
}
}
this.updateState();
}, render: function () {
const products = this.state.products.map((product) => {
return (
<Product
key={product.id}
id={product.id}
title={product.title}
description={product.description}
url={product.url}
votes={product.votes}
submitter={product.submitter}
submitter_avatar_url={product.submitter_avatar_url}
product_image_url={product.product_image_url}
onVote={this.handleUpVote}
/>
);
});
return (
<div className='ui items'>
{products}
</div>
);
},
}); const Product = React.createClass({
handleUpVote: function () {
this.props.onVote(this.props.id);
},
render: function () {
return (
<div className='item'>
<div className='image'>
<img src={this.props.product_image_url} />
</div>
<div className='middle aligned content'>
<div className='ui grid'>
<div className='three wide column'>
<div className='ui basic center aligned segment'>
<a onClick={this.handleUpVote}>
<i className='large caret up icon'></i>
</a>
<p><b>{this.props.votes}</b></p>
</div>
</div>
<div className='twelve wide column'>
<div className='header'>
<a href={this.props.url}>
{this.props.title}
</a>
</div>
<div className='meta'>
<span></span>
</div>
<div className='description'>
<p>{this.props.description}</p>
</div>
<div className='extra'>
<span>Submitted by:</span>
<img
className='ui avatar image'
src={this.props.submitter_avatar_url}
/>
</div>
</div>
</div>
</div>
</div>
);
},
}); ReactDOM.render(
<ProductList />,
document.getElementById('content')
);
reactjs入门到实战（十）----one-first_app的更多相关文章
- reactjs入门到实战（七）---- React的组件的生命周期
React的组件的生命周期有三个状态分别是:挂载(生产组件示例化.准备挂载到页面.挂载到页面).更新(更新值.更新DOM).和卸载(卸载后). >>>其他 getInitia ...
- reactjs入门到实战（九）----ajax的应用
利用外部的jquery: <script type="text/babel"> } }, componentDidMount:function(){ ]['value' ...
- reactjs入门到实战（八）----表单组件的使用
表单组件支持几个受用户交互影响的属性: value,用于 <input>.<textarea> 组件. checked,用于类型为 checkbox 或者 radio 的 &l ...
- reactjs入门到实战（六）---- ReactJS组件API详解
全局的api 1.React.createClass 创建一个组件类,并作出定义.组件实现了 render() 方法,该方法返回一个子级.该子级可能包含很深的子级结构.组件与标准原型类的不同之处在于, ...
- reactjs入门到实战（五）---- props详解
1>>>基础的props使用 不可修改父属性 getDefaultProps 对于外界/父组件的属性值,无法直接修改,它是只读的. <script type= ...
- reactjs入门到实战（四）---- state详解
this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性. 组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开 ...
- reactjs入门到实战（三）---- 组件详解
owner >>> 传递 props this >>>是默认指向组件本身 key>>>不能没有,在复用的情况下 组件:例子 <!-- 输入 ...
- reactjs入门到实战（二）---- jxs详解
>>>如何转换 JSX transformer Babel 官网:http://babeljs.io/ 里面有一个可以看转换的测试器,es6什么的也可以应用: 注 ...
- reactjs入门到实战（一）---- hello world例子
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西 ...
随机推荐
- linux第12天 线程
今天主要学习了共享内存,信号量的封装,还有线程. POSIX线程库 与线程有关的函数构成了一个完整的系列,绝大多数函数的名字都是以“pthread_”打头的 要使用这些函数库,要通过引入头文<p ...
- linux kernel.shmall shemax shemin 參數解釋
分类: oracle linux 2010-06-17 14:30 6193人阅读 评论(0) 收藏 举报 linuxoracleredhat数据库服务器x86 Linux X86-64操作系统,Or ...
- apache高负载性能调优
先阅读apache配置优化建议如下,再对相关参数进行调整,观察服务器状况.Apache配置优化建议:进入/usr/local/apache2/conf/extra 目录下Apache优化,经过上述操作 ...
- 开发系统时候运行程序突然报出“WebDev.WebServer40.exe已停止工作”的错误
已经解决,问题描述:在开发系统时候运行程序突然报出“WebDev.WebServer40.exe已停止工作”的错误,程序调试运行,发现程序在打开数据库时候报错,也就是Connection.Open() ...
- (转)oracle 查看表所占用的空间大小
1.查看表所占空间 SELECT TABLESPACE_NAME,TO_CHAR(SUM(BYTES)/(1024*1024),'999G999D999') CNT_MB FROM ...
- 夺命雷公狗---DEDECMS----18dedecms之无可奈何标签-sql标签取出今天更新
我们在一些开发时候遇到普通标签都解决不了的问题的时候可以尝试下我们dedecms自带的sql标签,几乎可以完成任何的查询需求 语法如下所示: 我们在这里将刚才首页今天更新那块给改写下,原先的是: {d ...
- MyEclipse 死掉，JVM terminated. Exit code=1073807364
刚入手的新成员,刚开始使用myeclipse,是不是会有一大堆的问题,然后没有目标的走,这里有个小技巧,那就是如果做项目出现问题,一定要自己现在网络搜寻答案,网络时代.技术时代走到现在,一定有他的道理 ...
- js同步访问后台资源
$.ajax( { type : 'post', url : url, data : data, async : false,//false代表只有在等待ajax执行完毕后才执行window. ...
- dataTabel转成dataview插入列后排序
if (!string.IsNullOrEmpty(strQuyu) && !string.IsNullOrEmpty(strZuhao)) { string[] param = { ...
- 专为物联网开发的开源操作系统Contiki（转）
专为物联网开发的开源操作系统Contiki(转) (2012-04-19 15:31:09) 原文网址:http://blog.sina.com.cn/s/blog_6de000c201010z7n ...