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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Edit app.js in components:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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;

    chevron_right

    
    

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

react-js-img




My Personal Notes arrow_drop_up

A Computer Science and Engineering undergraduate student at IERT, Allahabad with an interest in Programming, Data Science/AI and web development

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.