In this Learn React From Scratch series, you’ll learn how to get started with React and create a task manager web app using React. In this part of the tutorial series, you’ll learn how to get started with React and creating React component.

Source code from this tutorial is available on GitHub.

Getting Started With React

You’ll be using Create React App for setting up the react application. With npm> 5.2+ you’ll have npx already installed.

You can create the starter template for react app using npx :

// create react app starter template
npx create-react-app react-task-manager

The above command will create the starter project template and install the required dependencies. Navigate to the project directory and start the project.

cd react-task-manager
npm start

You will have the application running on http://localhost:3000/

Creating Web App Using React

First, let’s do a bit of clean up of the files that you don’t need. Remove App.js, App.css, App.test and logo file from the src folder.

You’ll be using bootstrap to for building our task manager app, so include bootstrap style sheet in the public/index.html page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

Ok, so now you are ready to create your first React component. Let’s create a separate folder for our base component inside src folder. Let’s call it a Container component. It would serve as a root component for our task manager web app.

Create a folder called Container. Inside Container create a file called Container.css. Here is how the file looks :

.Container-marginTop {
    margin-top: 50px;
}

.Container-color{
    border: 1px solid #80808047;
}

p {
    font-size: smaller;
    font-family: monospace;
}

Create a file called Container.js which will contain the React component. Here is how it looks:

import React, { Component } from 'react'
import './Container.css'

class Container extends Component {
  render() {
    return (
      <div className="container Container-marginTop Container-color">
        <hr />
        <footer>
          <p>www.codehandbook.org</p>
        </footer>
      </div>
    );
  }
}

export default Container;  

As seen in the above code, you created a react component called Container by extending the React component library. The above created state less component returns an HTML template.

To render the Container component, you need to import the Container component in the src/index.js file and render it using ReactDOM.render. Here is how src/index.js file looks :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Container from './Container/Container.js';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(, document.getElementById('root'));
registerServiceWorker();

Save the above changes and restart the server. Point your browser to http://localhost:3000/ and you will have the web page displayed with the container.

download

Creating React Component - List Task

Create a folder called ListTask inside src folder. Create a file called ListTask/ListTask.js and add the following code :

import React, { Component } from 'react'

class ListTask extends Component {
  render() {
    return (
      <div className="row">
        <div className="col-sm-12">
          <ul className="list-group">
              <li className="list-group-item">Cras justo odio</li>
              <li className="list-group-item">Dapibus ac facilisis in</li>
              <li className="list-group-item">Morbi leo risus</li>
              <li className="list-group-item">Porta ac consectetur ac</li>
              <li className="list-group-item">Vestibulum at eros</li>
          </ul>
        </div>
      </div>
    );
  }
}

export default ListTask;

You just created the ListTask react component which renders a list of tasks using dummy data. You need to make it dynamic once done with creating the react component.

Import the ListTask component in the Container component and include it in its render HTML template as shown:

import React, { Component } from 'react'
import './Container.css'
import List from '../ListTask/ListTask.js'

class Container extends Component {
  render() {
    return (
      <div className="container Container-marginTop Container-color">
        <List></List>
        <hr />
        <footer>
          <p>www.codehandbook.org</p>
        </footer>
      </div>
    );
  }
}

export default Container;

Save the above changes and restart the server and you will have the List component rendered.

download (1)

Creating React Component - Add Task

Once you are done with creating the List Task react component, let’s create another component to add the task. Create a folder called AddTask and inside the AddTask folder create a file called AddTask.css. Here is how the file looks:

.AddTask-header{
    margin-top: 50px;
}

.AddTask-button{
    float: right;
    margin-top: 50px;
}

Create the react component file called AddTask.js. Add the following code :

import React, { Component } from 'react'
import './AddTask.css'

class AddTask extends Component {

  render() {
    return (
      <div className="row">
          <div className="col-sm-8">
            <h3 className="AddTask-header">React Task Manager</h3>
          </div>
          <div className="col-sm-4">
            <button type="button" className="btn btn-success AddTask-button" >Add</button>
          </div>
      </div>
    );
  }
}

export default AddTask;

Import the AddTask react component in the Container component and include it in the HTML template. Here is how the Container component looks like :

import React, { Component } from 'react'
import './Container.css'
import List from '../ListTask/ListTask.js'
import AddTask from '../AddTask/AddTask.js'

class Container extends Component {
  render() {
    return (
      <div className="container Container-marginTop Container-color">
        <AddTask></AddTask>
        <List></List>
        <hr />
        <footer>
          <p>www.codehandbook.org</p>
        </footer>
      </div>
    );
  }
}

export default Container;

Save the above changes and restart the application. Point your application to http://localhost:3000 and you will have the application running with the AddPost component.

Creating React Component

Adding Bootstrap Modal In React Component

You’ll be using react-bootstrap to show modal pop up in the react task manager web app. Let’s start by installing the react-bootstrap using npm.

// installing react-bootstrap
npm install --save react-bootstrap

Once the package has been installed, import the react-bootstrap modals in the AddTask.js file.

// importing modal
import { Modal } from 'react-bootstrap';

Once imported create a modal pop-up inside the render() method of the AddTask component. Here is how the AddTask render HTML code looks :

render() {
    return (
      <div className="row">
          <div className="col-sm-8">
            <h3 className="AddTask-header">React Task Manager</h3>
          </div>
          <div className="col-sm-4">
            <button type="button" className="btn btn-success AddTask-button" onClick = {this.handleShow}>Add</button>
          </div>
          <Modal show={this.state.show} onHide={this.handleClose}>
            <Modal.Header>
              <Modal.Title>React Task Manager</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <form>
                  <div className="form-group">
                      <input type="text" className="form-control" id="inputTask" placeholder="Enter task to add"></input>
                  </div>
                  <button type="button" onClick={this.handleAdd} className="btn btn-primary">Add </button>
              </form>
            </Modal.Body>
          </Modal>
      </div>
    );
  }

As seen in the above code, you have added a onClick events to the Add button and the button inside the modal pop-up. Inside the modal you have also added a show and onHide event to show and hide the pop-up respectively.

You need to define the events used in the render HTML inside the AddTask react component.

handleClose(){
    this.setState({
      show : false
    })
  }

  handleShow(){
    this.setState({
      show : true
    })
  }

  handleAdd(){
    alert('add')
  }

Register the events and define the state inside the AddTask constructor method. Here is how it looks :

constructor(props){
    super(props)
    this.handleClose = this.handleClose.bind(this)
    this.handleShow = this.handleShow.bind(this)
    this.handleAdd = this.handleAdd.bind(this)
    this.state = {
      show : false
    }
  }

Here is how the complete AddTask component looks like :

import React, { Component } from 'react'
import './AddTask.css'
import { Modal } from 'react-bootstrap';

class AddTask extends Component {
  constructor(props){
    super(props)
    this.handleClose = this.handleClose.bind(this)
    this.handleShow = this.handleShow.bind(this)
    this.handleAdd = this.handleAdd.bind(this)
    this.state = {
      show : false
    }
  }

  handleClose(){
    this.setState({
      show : false
    })
  }

  handleShow(){
    this.setState({
      show : true
    })
  }

  handleAdd(){
    alert('add')
  }

  render() {
    return (
      <div className="row">
          <div className="col-sm-8">
            <h3 className="AddTask-header">React Task Manager</h3>
          </div>
          <div className="col-sm-4">
            <button type="button" className="btn btn-success AddTask-button" onClick = {this.handleShow}>Add</button>
          </div>
          <Modal show={this.state.show} onHide={this.handleClose}>
            <Modal.Header>
              <Modal.Title>React Task Manager</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <form>
                  <div className="form-group">
                      <input type="text" className="form-control" id="inputTask" placeholder="Enter task to add"></input>
                  </div>
                  <button type="button" onClick={this.handleAdd} className="btn btn-primary">Add </button>
              </form>
            </Modal.Body>
          </Modal>
      </div>
    );
  }
}

export default AddTask;

Save the above changes and restart the server. Point your browser to http://localhost:3000 and click the Add button and you will have the modal pop up displayed.

creating react component

Wrapping It Up

In this Learn React From Scratch series tutorial, you learnt how to get started with React and creating web app using React. You saw how to create React component and how to combine different react components to create a complete web app.

In this part of the tutorial series, you create the user interface for the react component based task manager. In the next part of the tutorial series, you’ll see how to implement the add and list task functionality for the React Task Manager web app.

Do let us know your thoughts in the comments below.