Forms Controls in ReactJS

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

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

class DemoComponent extends React.Component {

    constructor() {
        super();
        this.state = {
            username: '',
            password: '',
            description: '',
            status: true,
            gender: 'male',
            role: 'r2',
            languages: ['lang1', 'lang3']
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        const target = event.target;
        let value = target.value;
        if (target.type === 'checkbox') {
            value = target.checked;
        }
        if (target.type === 'select-multiple') {
            var options = event.target.options;
            value = [];
            for (var i = 0; i < options.length; i++) {
                if (options[i].selected) {
                    value.push(options[i].value);
                }
            }
        }
        const name = target.name;
        this.setState({
            [name]: value
        });
    }

    handleSubmit(event) {
        event.preventDefault();
        var result = 'Account Info<br/>';
        result += 'Username: ' + this.state.username + '<br/>';
        result += 'Password: ' + this.state.password + '<br/>';
        result += 'Description: ' + this.state.description + '<br/>';
        result += 'Status: ' + this.state.status + '<br/>';
        result += 'Gender: ' + this.state.gender + '<br/>';
        result += 'Role: ' + this.state.role + '<br/>';
        result += 'Languages: ' + this.state.languages + '<br/>';
        this.refs.result.innerHTML = result;
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit.bind(this)}>
                    <table cellPadding="2" cellSpacing="2">
                        <tr>
                            <td>Username</td>
                            <td><input type="text" name="username" value={this.state.username} onChange={this.handleChange} /></td>
                        </tr>
                        <tr>
                            <td>Password</td>
                            <td><input type="password" name="password" value={this.state.password} onChange={this.handleChange} /></td>
                        </tr>
                        <tr>
                            <td>Description</td>
                            <td>
                                <textarea name="description" cols="20" rows="5" value={this.state.description} onChange={this.handleChange}></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td>Status</td>
                            <td>
                                <input type="checkbox" name="status" checked={this.state.status} onChange={this.handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <td>Gender</td>
                            <td>
                                <input type="radio" name="gender" value="male" checked={this.state.gender == 'male'} onChange={this.handleChange} /> Male
                                <input type="radio" name="gender" value="female" checked={this.state.gender == 'female'} onChange={this.handleChange} /> Female
                            </td>
                        </tr>
                        <tr>
                            <td>Role</td>
                            <td>
                                <select name="role" value={this.state.role} onChange={this.handleChange}>
                                    <option value="r1">Role 1</option>
                                    <option value="r2">Role 2</option>
                                    <option value="r3">Role 3</option>
                                    <option value="r4">Role 4</option>
                                    <option value="r5">Role 5</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>Languages</td>
                            <td>
                                <select name="languages" multiple={true} value={this.state.languages} onChange={this.handleChange}>
                                    <option value="lang1">Language 1</option>
                                    <option value="lang2">Language 2</option>
                                    <option value="lang3">Language 3</option>
                                    <option value="lang4">Language 4</option>
                                    <option value="lang5">Language 5</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td><input type="submit" value="Save" /></td>
                        </tr>
                    </table>
                </form>
                <div ref="result"></div>
            </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