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="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')
 );

 

posted @ 2016-06-07 18:14  快乐~  阅读(471)  评论(0)  编辑  收藏  举报