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="0" />
<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() * 50) + 15); } const data = [ { id: 1, 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: 2, 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: 3, 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: 4, 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 +1; 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') );