Reactjs Introduction to Combat (10)----One-first_app

Index

<! DOCTYPE html>"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, 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> class="main UI text container"> class="UI dividing centered header">popular products"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 toGetStarted. -<!--<script type="Text/babel"Src="./app-complete.js"></script> </body>
Data
Window. Data =(function () {function generatevotecount () {returnMath.floor ((Math.random () * -) + the); }  Constdata =[{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',    },  ]; returndata;}) ();
App
'Use Strict'/** * Product List **/ /*eslint-disable no-undef*/ ConstProductList =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 () {ConstProducts =Data.sort (function (b) {returnB.votes-a.votes;    });  This. SetState ({products:products})}, Handleupvote:function (productId) { for(varIteminchData) {       if(Data[item].id = =productId) {Data[item].votes= Data[item].votes +1; Continue; }     }      This. Updatestate (); }, Render:function () {ConstProducts = 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>     ); }, }); ConstProduct =React.createclass ({handleupvote:function () { This. Props.onvote ( This. props.id); }, Render:function () {return (       <div classname='Item'> <div classname='Image'>  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 Introduction to Combat (10)----One-first_app