React is a JavaScript library for building user interfaces. It&#x27;s used to create components, handle state and props, and interact with other libraries and APIs. With React, you can create simple or complex user interfaces that are easy to maintain and update. In this tutorial, we&#x27;ll be building a basic todo app in React. We&#x27;ll cover setting up the project, adding, deleting, and editing todo items, listing all todo items, marking a todo item as complete, and styling the todo app.

![react todo app](https:&#x2F;&#x2F;devbrite.io&#x2F;media&#x2F;cover16.jpg)
## Setting Up The React Project

Before we can start building our todo app, we need to set up our React project. We&#x27;ll be using [Create React App](https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;create-react-app) to set up our project. Create React App is a tool that will generate a basic React project structure for us, so we don&#x27;t have to worry about configuring webpack, Babel, or any other tools.

First, open a terminal window and create a new directory for our project:

&#96;&#96;&#96;
$ mkdir todo-app
$ cd todo-app
&#96;&#96;&#96;

Next, we&#x27;ll use Create React App to generate the project structure:

&#96;&#96;&#96;
$ npx create-react-app .
&#96;&#96;&#96;

This will create the React project structure in the current directory. Once the project has been created, we can start the development server:

&#96;&#96;&#96;
$ npm start
&#96;&#96;&#96;

This will start the development server and open a browser window with the React application. Now that we have the project set up, we can start building our todo app.

## Adding a Todo Item

The first thing we need to do is add a way for users to add todo items to our app. We&#x27;ll start by creating a &#96;TodoForm&#96; component that will handle this functionality. We&#x27;ll use a &#96;Form&#96; component from [React Bootstrap](https:&#x2F;&#x2F;react-bootstrap.github.io&#x2F;) to create our form.

&#96;&#96;&#96;jsx
import React, { useState } from &#x27;react&#x27;;
import { Form, Button } from &#x27;react-bootstrap&#x27;;

const TodoForm = () =&gt; {
  const [todo, setTodo] = useState(&#x27;&#x27;);

  const handleSubmit = (e) =&gt; {
    e.preventDefault();
    &#x2F;&#x2F; Add todo item to list
    setTodo(&#x27;&#x27;);
  };

  return (
    &lt;Form onSubmit={handleSubmit}&gt;
      &lt;Form.Group controlId=&quot;formTodo&quot;&gt;
        &lt;Form.Control
          type=&quot;text&quot;
          placeholder=&quot;Enter a todo item&quot;
          value={todo}
          onChange={(e) =&gt; setTodo(e.target.value)}
        &#x2F;&gt;
      &lt;&#x2F;Form.Group&gt;
      &lt;Button type=&quot;submit&quot;&gt;Add Todo Item&lt;&#x2F;Button&gt;
    &lt;&#x2F;Form&gt;
  );
};

export default TodoForm;
&#96;&#96;&#96;

In the above code, we&#x27;ve created a simple form with a text input and a submit button. We&#x27;re using the &#96;useState&#96; hook to keep track of the todo item that the user has entered. When the user submits the form, we&#x27;ll call the &#96;handleSubmit&#96; function, which will add the todo item to the list.

## Deleting a Todo Item

Now that we have a way for users to add todo items to our app, we need to add a way to delete them. We&#x27;ll create a &#96;TodoList&#96; component that will handle this functionality.

&#96;&#96;&#96;jsx
import React from &#x27;react&#x27;;
import { ListGroup, Button } from &#x27;react-bootstrap&#x27;;

const TodoList = ({ todos, onDeleteTodo }) =&gt; {
  return (
    &lt;ListGroup&gt;
      {todos.map((todo) =&gt; (
        &lt;ListGroup.Item key={todo.id}&gt;
          {todo.title}
          &lt;Button
            variant=&quot;danger&quot;
            className=&quot;float-right&quot;
            onClick={() =&gt; onDeleteTodo(todo.id)}
          &gt;
            Delete
          &lt;&#x2F;Button&gt;
        &lt;&#x2F;ListGroup.Item&gt;
      ))}
    &lt;&#x2F;ListGroup&gt;
  );
};

export default TodoList;
&#96;&#96;&#96;

In the above code, we&#x27;ve created a &#96;ListGroup&#96; component from React Bootstrap that will list out all of the todo items. We&#x27;ve also added a delete button next to each item that will call the &#96;onDeleteTodo&#96; function when clicked. This function will remove the item from the list.

## Editing a Todo Item

Next, we&#x27;ll add a way for users to edit todo items. We&#x27;ll create an &#96;EditTodoForm&#96; component that will handle this functionality.

&#96;&#96;&#96;jsx
import React, { useState } from &#x27;react&#x27;;
import { Form, Button } from &#x27;react-bootstrap&#x27;;

const EditTodoForm = ({ todo, onEditTodo }) =&gt; {
  const [title, setTitle] = useState(todo.title);

  const handleSubmit = (e) =&gt; {
    e.preventDefault();
    onEditTodo(todo.id, title);
  };

  return (
    &lt;Form onSubmit={handleSubmit}&gt;
      &lt;Form.Group controlId=&quot;formTodo&quot;&gt;
        &lt;Form.Control
          type=&quot;text&quot;
          placeholder=&quot;Enter a todo item&quot;
          value={title}
          onChange={(e) =&gt; setTitle(e.target.value)}
        &#x2F;&gt;
      &lt;&#x2F;Form.Group&gt;
      &lt;Button type=&quot;submit&quot;&gt;Edit Todo Item&lt;&#x2F;Button&gt;
    &lt;&#x2F;Form&gt;
  );
};

export default EditTodoForm;
&#96;&#96;&#96;

In the above code, we&#x27;ve created a form with a text input and a submit button. We&#x27;re using the &#96;useState&#96; hook to keep track of the todo item that the user has entered. When the user submits the form, we&#x27;ll call the &#96;onEditTodo&#96; function, which will update the todo item in the list.

## Listing All Todo Items

Now that we have a way to add, delete, and edit todo items, we need to list them all out. We&#x27;ll create a &#96;TodoList&#96; component that will handle this functionality.

&#96;&#96;&#96;jsx
import React from &#x27;react&#x27;;
import { ListGroup } from &#x27;react-bootstrap&#x27;;

const TodoList = ({ todos }) =&gt; {
  return (
    &lt;ListGroup&gt;
      {todos.map((todo) =&gt; (
        &lt;ListGroup.Item key={todo.id}&gt;{todo.title}&lt;&#x2F;ListGroup.Item&gt;
      ))}
    &lt;&#x2F;ListGroup&gt;
  );
};

export default TodoList;
&#96;&#96;&#96;

In the above code, we&#x27;ve created a &#96;ListGroup&#96; component from React Bootstrap that will list out all of the todo items.

## Marking a Todo Item as Complete

Next, we&#x27;ll add a way for users to mark a todo item as complete. We&#x27;ll create a &#96;TodoList&#96; component that will handle this functionality.

&#96;&#96;&#96;jsx
import React from &#x27;react&#x27;;
import { ListGroup, Button } from &#x27;react-bootstrap&#x27;;

const TodoList = ({ todos, onCompleteTodo }) =&gt; {
  return (
    &lt;ListGroup&gt;
      {todos.map((todo) =&gt; (
        &lt;ListGroup.Item key={todo.id}&gt;
          {todo.title}
          &lt;Button
            variant=&quot;success&quot;
            className=&quot;float-right&quot;
            onClick={() =&gt; onCompleteTodo(todo.id)}
          &gt;
            Complete
          &lt;&#x2F;Button&gt;
        &lt;&#x2F;ListGroup.Item&gt;
      ))}
    &lt;&#x2F;ListGroup&gt;
  );
};

export default TodoList;
&#96;&#96;&#96;

In the above code, we&#x27;ve added a complete button next to each item that will call the &#96;onCompleteTodo&#96; function when clicked. This function will mark the item as complete.

## Styling the Todo App

Finally, we&#x27;ll add some basic styling to our todo app. We&#x27;ll use [Bootstrap](https:&#x2F;&#x2F;getbootstrap.com&#x2F;) to make our app look more presentable. We&#x27;ll also use [React Bootstrap](https:&#x2F;&#x2F;react-bootstrap.github.io&#x2F;) to make it easier to use Bootstrap components in our React app.

First, we&#x27;ll install the React Bootstrap package:

&#96;&#96;&#96;
$ npm install react-bootstrap
&#96;&#96;&#96;

Next, we&#x27;ll import the Bootstrap CSS file into our &#96;index.js&#96; file:

&#96;&#96;&#96;js
import &#x27;bootstrap&#x2F;dist&#x2F;css&#x2F;bootstrap.min.css&#x27;;
&#96;&#96;&#96;

Now, we can use the React Bootstrap components to style our app. For example, we can add a &#96;Container&#96; component to our &#96;App&#96; component to give our app a nice centered layout:

&#96;&#96;&#96;jsx
import React from &#x27;react&#x27;;
import { Container } from &#x27;react-bootstrap&#x27;;

const App = () =&gt; {
  return (
    &lt;Container&gt;
      {&#x2F;* App content here *&#x2F;}
    &lt;&#x2F;Container&gt;
  );
};

export default App;
&#96;&#96;&#96;

We can also use the React Bootstrap components to style our form and list components.

## Conclusion

In this tutorial, we&#x27;ve seen how to build a basic todo app in React. We&#x27;ve covered setting up the project, adding, deleting, and editing todo items, listing all todo items, marking a todo item as complete, and styling the todo app. I hope you&#x27;ve found this tutorial helpful and that you&#x27;ll be able to use it to build your own todo app!

Building a Basic Todo App in React

About

Legal

Products

Resources

Category: