How to Create ToDo App using ReactJS ?

React is a JavaScript library used to develop interactive user interfaces. It is managed by Facebook and a community of individual developers and companies. React mainly focuses on developing single-page web or mobile applications. here, we will create a todo app to understand the basics of reactJS.

Modules required:

• npm
• React
• React Bootstrap

  npm install react-bootstrap bootstrap

Basic setup: Start a project by the following command:

• NPX: It is a package runner tool that comes with npm 5.2+, npx is easy to use CLI tools. The npx is used for executing Node packages. It greatly simplifies a number of things one of which is checked/run a node package quickly without installing it locally or globally.

  npx create-react-app todo-react

• Now, goto the folder

  cd todo-react

  

• Start the server- Start the server by typing the following command in terminal:

  npm start

  open http://localhost:3000/
  

• Change directory to src:

  cd src

• Delete every thing inside the directory

  rm *

• Now create index.js file

  touch index.js 

• This file will render our app to HTML file which is in public folder. Also create a folder name components with file name app.js

  mkdir components && cd components && touch app.js

• app.js will contain our To-Do app:
  
• Edit index.js file in src:

  import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './components/app';
  import 'bootstrap/dist/css/bootstrap.min.css';
  
  ReactDOM.render(<App />, document.getElementById('root'));
• Edit app.js in components:

  import React, {Component} from 'react';
  
  // Bootstrap for react
  import Container from 'react-bootstrap/Container';
  import Row from 'react-bootstrap/Row';
  import Col from 'react-bootstrap/Col';
  import Button from 'react-bootstrap/Button';
  import InputGroup from 'react-bootstrap/InputGroup';
  import FormControl from 'react-bootstrap/FormControl';
  import ListGroup from 'react-bootstrap/ListGroup';
  
  
  class App extends Component  {
    constructor(props) {
      super(props);
  
      // Setting up state
      this.state = {
        userInput : "",
        list:[]
      }
    }
  
    // Set a user input value
    updateInput(value){
      this.setState({
        userInput: value,
      });
    }
  
    // Add item if user input in not empty
    addItem(){
      if(this.state.userInput !== '' ){
        const userInput = {
  
          // Add a random id which is used to delete
          id :  Math.random(),
  
          // Add a user value to list
          value : this.state.userInput
        };
  
        // Update list
        const list = [...this.state.list];
        list.push(userInput);
  
        // reset state
        this.setState({
          list,
          userInput:""
        });
      }
    }
  
    // Function to delete item from list use id to delete
    deleteItem(key){
      const list = [...this.state.list];
  
      // Filter values and leave value which we need to delete
      const updateList = list.filter(item => item.id !== key);
  
      // Update list in state
      this.setState({
        list:updateList,
      });
  
    }
  
    render(){
      return(<Container>
  
            <Row style={{
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    fontSize: '3rem',
                    fontWeight: 'bolder',
                  }}
                  >TODO LIST
              </Row>
  
             <hr/>
            <Row>
            <Col md={{ span: 5, offset: 4 }}>
  
            <InputGroup className="mb-3">
            <FormControl
              placeholder="add item . . . "
              size="lg"
              value = {this.state.userInput}
              onChange = {item => this.updateInput(item.target.value)}
              aria-label="add something"
              aria-describedby="basic-addon2"
            />
            <InputGroup.Append>
              <Button
                variant="dark"
                size="lg"
                onClick = {()=>this.addItem()}
                >
                ADD
              </Button>
            </InputGroup.Append>
          </InputGroup>
  
       </Col>
     </Row>
     <Row>
       <Col md={{ span: 5, offset: 4 }}>
          <ListGroup>
            {/* map over and print items */}
           {this.state.list.map(item => {return(
  
              <ListGroup.Item variant="dark" action
                onClick = { () => this.deleteItem(item.id) }>
                {item.value}
              </ListGroup.Item>
  
           )})}
          </ListGroup>
       </Col>
     </Row>
       </Container>
      );
    }
  }
  
  export default App;
• Save all files and start the server:

  npm start

• Output: Open http://localhost:3000/ in browser: