index.php
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Products from './Products.js';
import Rating from './Rating.js';
class App extends Component
{
render()
{
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
</div>
<div className="App-intro">
<h2>Products</h2>
</div>
<div className="App-body">
<Products />
</div>
</div>
);
}
}
export default App;
Products.js
import React, { Component } from 'react';
import Product from './Product.js';
class Products extends Component
{
products; // class properties
constructor(props)
{
super(props);
this.products = this.getProducts();
}
getProducts() {
return [
{
imageUrl: "http://loremflickr.com/150/150?random=1",
productName: "Product 1",
rating: 4,
numOfReviews: 10,
},
{
imageUrl: "http://loremflickr.com/150/150?random=2",
productName: "Product 2",
rating: 2,
numOfReviews: 23,
},
];
}
render()
{
const listProducts = this.products.map(
(product) => <Product key={product.productName} data={product} />
);
return (
<div>
<ul>{listProducts}</ul>
</div>
);
}
}
export default Products;
Product.js
import React, { Component } from 'react';
import Rating, { component } from './Rating.js';
class Product extends Component
{
constructor(props)
{
super(props);
}
render()
{
return (
<div>
<h5>{this.props.data.productName}</h5>
<Rating rating={this.props.data.rating} numOfReviews={this.props.data.numOfReviews}/>
</div>
);
}
}
export default Product;
Rating.js
import React, { Component } from 'react';
import { IoIosStar, IoIosStarOutline } from 'react-icons/io'; // icons
class Rating extends Component
{
constructor(props)
{
super(props); // props are read-only
this.state = {rating: this.props.rating}; // state can be modified
}
handleClick(value)
{
this.setState({rating: value}); // setState
}
showStar(value)
{
return (
this.state.rating >= value ?
<IoIosStar style={styles.star}
onClick={this.handleClick.bind(this, value)} /> : // onClick
<IoIosStarOutline style={styles.starOutline}
onClick={this.handleClick.bind(this, value)} />
);
}
render()
{
return(
<span style={styles.rating}>
{this.showStar(1)}
{this.showStar(2)}
{this.showStar(3)}
{this.showStar(4)}
{this.showStar(5)} <br/>
Reviews: {this.props.numOfReviews} <br/>
Rating: {this.state.rating}
</span>
);
}
}
export default Rating;
const styles = {
star: {
color: 'orange', fontSize: '18px',
},
starOutline: {
color: '#666', fontSize: '18px',
},
rating: {
color: '#666', fontSize: '12px',
},
}
index.htm
<!doctype html>
<link rel="shortcut icon" href="/react-js/myapp2-build/favicon.ico">
<link href="/react-js/myapp2-build/static/css/main.9df83c25.css" rel="stylesheet">
<div id="root"></div>
<script type="text/javascript" src="/react-js/myapp2-build/static/js/main.17419e72.js">
</script>
Last update: 402 days ago