How to create Form in React with Bootstrap

This tutorial explains how to create basic user details entry form in React using Bootstrap.

This tutorial assumes you have react set-up as described in article How to create React App with Webpack.

For using css with webpack npm modules css-loader and style-loader are required, lets install these modules with below command

npm install --save-dev css-loader style-loader

Update webpack.config.js with below entries.

{
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],

},

Now webpack.config.js should look like as shown below

const path = require("path");
const HtmlWebPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new HtmlWebPlugin({ template: "./src/index.html" })],
};

Create a new file Form.js inside components directory and write below code in Form.js

import React from "react";

const Form = () => {
  return (
    <div class="col-md-6">
      <div className="card">
        <div className="card-header">Enter User Details</div>
        <div className="card-body">
          <form>
            <div className="form-group">
              <label htmlFor="exampleFormControlInput1">Name</label>
              <input
                type="name"
                className="form-control "
                placeholder="Enter your name.."
              />
            </div>
            <div className="form-group">
              <label htmlFor="exampleFormControlInput2">Email address</label>
              <input
                type="email"
                className="form-control"
                placeholder="Enter your email.."
              />
            </div>
            <div className="form-group">
              <label htmlFor="exampleFormControlInput3">Address</label>
              <input
                type="text"
                className="form-control "
                placeholder="Enter your address.."
              />
            </div>
            <button
              class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0"
              type="submit"
            >
              Submit
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default Form;

Update App.js for bootstrap and newly created form

Import bootstrap in App.js

import 'bootstrap/dist/css/bootstrap.min.css';

Import Form component in App.js

import Form from './Form'

Add Form component in App.js render method

class App extends Component {
  render() {
    return (
     <React.Fragment>
       <div className="App">
         <div className="container">
           <Form />
         </div>
       </div>
     </React.Fragment>
    );
  }
}

Finally App.js should look like as shown below

import React, { Component } from "react";
import Form from "./Form";

import "bootstrap/dist/css/bootstrap.min.css";

class App extends Component {
  render() {
    return (
     <React.Fragment>
       <div className="App">
         <div className="container">
           <Form />
         </div>
       </div>
     </React.Fragment>
    );
  }
}

export default App;

Execute npm run start in terminal, you should see newly created form in browser