Pass Object List to Parameters in Component in React.js


Create new folder named LearnReactJSWithRealApps and select to this folder in
Visual Studio Code

Open Terminal windows in Visual Studio Code and type:

npm install -g babel
npm install -g babel-cli
npm install webpack --save
npm install webpack-dev-server --save
npm install react --save
npm install react-dom --save
npm install --save-dev style-loader
npm install --save-dev css-loader




In root folder of project, create assets\images folder. Copy images need to use in project to images folder

In assets folder, create new folder named css. In this folder, create new css file named style.css as below:

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
 }

td {
    height: 50px;
    vertical-align: middle;
}

In root folder of project, create new folder src\components. In this folder, create new file named demo.component.jsx as below:

import React from 'react';

import styles from '../../assets/css/style.css';

class DemoComponent extends React.Component {

    render() {
        return (
            <div>
                <h3>Product List</h3>
                <table cellPadding="5" cellSpacing="5">
                    <tr>
                        <th>No.</th>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Photo</th>
                        <th>Price</th>
                        <th>Quantity</th>
                        <th>Sub Total</th>
                    </tr>
                    {this.props.products.map(function (product, index) {
                        return (
                            <tr>
                                <td>{index}</td>
                                <td>{product.id}</td>
                                <td>{product.name}</td>
                                <td><img src={product.photo} width="100" /></td>
                                <td>{product.price}</td>
                                <td>{product.quantity}</td>
                                <td>{product.price * product.quantity}</td>
                            </tr>
                        );
                    })}
                </table>
            </div>
        );
    }

}

export default DemoComponent;




In root folder of project, create new file named main.js as below:

import React from 'react';
import ReactDOM from 'react-dom';

import DemoComponent from './src/components/demo.component.jsx';

var products = [
    {
        id: 'p01',
        name: 'name 1',
        price: 2,
        quantity: 3,
        photo: './assets/images/thumb1.gif'
    },
    {
        id: 'p02',
        name: 'name 2',
        price: 7,
        quantity: 3,
        photo: './assets/images/thumb2.gif'
    },
    {
        id: 'p03',
        name: 'name 3',
        price: 9,
        quantity: 6,
        photo: './assets/images/thumb3.gif'
    }
];
ReactDOM.render(<DemoComponent products={products} />, document.getElementById('app'));

In root folder of project, create new file named webpack.config.js as below:

var config = {
    entry: './main.js',

    output: {
        path: __dirname,
        filename: 'index.js',
    },

    devServer: {
        inline: true,
        port: 8081 // server port
    },

    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader'
            },
            {
                test: /\.css$/,
                loader: 'css-loader',
                query: {
                    modules: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                }
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}

module.exports = config;




In root folder of project, create new file named index.html as below:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Learn ReactJS With Real Apps</title>
</head>
<body>

    <div id="app"></div>
    <script src="index.js"></script>

</body>
</html>

In root folder of project, create new file named package.json as below:

{
  "name": "learnreactjswithrealapps",
  "version": "1.0.0",
  "description": "Learn ReactJS With Real Apps",
  "main": "main.js",
  "dependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  },
  "devDependencies": {
    "css-loader": "^0.28.11",
    "style-loader": "^0.21.0"
  },
  "scripts": {
    "start": "webpack-dev-server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/reactjs/react-tutorial.git"
  },
  "keywords": [
    "react"
  ],
  "author": "PMK Lab",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/reactjs/react-tutorial/issues"
  },
  "homepage": "https://github.com/reactjs/react-tutorial#readme"
}

In Terminal windows in Visual Studio Code and type: npm start,
program will open url http://localhost:8081/ on browser