minte9
LearnRemember



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',
    },
}

package.json

Add homepage to test directory 
 
"homepage": "http://tests.local/react-js/myapp2-build/"

Build 

 
npm build run

cp /build /myapp2-build

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: 303 days ago