Skip to content
Related Articles
Open in App
Not now

Related Articles

How to Create ToDo App using ReactJS ?

Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 02 Apr, 2020
Improve Article
Save Article

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) {
        // Setting up state
        this.state = {
          userInput : "",
      // Set a user input value
          userInput: value,
      // Add item if user input in not empty
        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];
          // reset state
      // Function to delete item from list use id to delete
        const list = [...this.state.list];
        // Filter values and leave value which we need to delete
        const updateList = list.filter(item => !== key);
        // Update list in state
              <Row style={{
                      display: "flex",
                      justifyContent: "center",
                      alignItems: "center",
                      fontSize: '3rem',
                      fontWeight: 'bolder',
                    >TODO LIST
              <Col md={{ span: 5, offset: 4 }}>
              <InputGroup className="mb-3">
                placeholder="add item . . . "
                value = {this.state.userInput}
                onChange = {item => this.updateInput(}
                aria-label="add something"
                  onClick = {()=>this.addItem()}
         <Col md={{ span: 5, offset: 4 }}>
              {/* map over and print items */}
             { => {return(
                <ListGroup.Item variant="dark" action 
                  onClick = { () => this.deleteItem( }>
    export default App;


  • Save all files and start the server:
    npm start
  • Output: Open http://localhost:3000/ in browser:

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!