Use Click Event in Component in React.js

Create New Project

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

Install ReactJS Libraries

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

Add Image Files

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

Add CSS Files

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;
}

Create Component

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 {

    constructor() {
        super();
        this.state = {
            age: 20,
            username: 'abc',
            product: {
                id: 'p01',
                name: 'name 1',
                price: 2,
                quantity: 3,
                photo: './assets/images/thumb1.gif'
            }
        };
    }

    changeState() {
        // Get current product
        let productInfo = Object.assign({}, this.state.product);

        // Assign with new values
        productInfo.name = 'name 2';
        productInfo.price = 9999;
        productInfo.photo = './assets/images/thumb2.gif';

        this.setState({
            age: 22,
            username: 'PMKLab',
            product: productInfo
        });
    }

    render() {
        return (
            <div>
                <input type="button" value="Update State" onClick={this.changeState.bind(this)} />
                <br />
                Age: {this.state.age}
                <br />
                Username: {this.state.username}
                <h3>Product Info</h3>
                <table cellPadding="5" cellSpacing="5">
                    <tr>
                        <td>Id</td>
                        <td>{this.state.product.id}</td>
                    </tr>
                    <tr>
                        <td>Name</td>
                        <td>{this.state.product.name}</td>
                    </tr>
                    <tr>
                        <td>Photo</td>
                        <td>
                            <img src={this.state.product.photo} width="100" />
                        </td>
                    </tr>
                    <tr>
                        <td>Price</td>
                        <td>{this.state.product.price}</td>
                    </tr>
                    <tr>
                        <td>Quantity</td>
                        <td>{this.state.product.quantity}</td>
                    </tr>
                    <tr>
                        <td>Total</td>
                        <td>{this.state.product.price * this.state.product.quantity}</td>
                    </tr>
                </table>
            </div>
        );
    }

}

export default DemoComponent;

Create Entry File

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';

ReactDOM.render(<DemoComponent />, document.getElementById('app'));

Create WebPack Config File

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;

Create HTML File

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>

Create package.json

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"
}

Structure of Project

Run Application

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

Output

Click Update State button to update values of state