Building a Basic Todo App in React

React is a JavaScript library for building user interfaces. It'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'll be building a basic todo app in React. We'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.

Setting Up The React Project

Before we can start building our todo app, we need to set up our React project. We'll be using 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'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:

$ mkdir todo-app
$ cd todo-app

Next, we'll use Create React App to generate the project structure:

$ npx create-react-app .

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

$ npm start

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'll start by creating a TodoForm component that will handle this functionality. We'll use a Form component from React Bootstrap to create our form.

import React, { useState } from 'react';
import { Form, Button } from 'react-bootstrap';

const TodoForm = () => {
  const [todo, setTodo] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // Add todo item to list
    setTodo('');
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Group controlId="formTodo">
        <Form.Control
          type="text"
          placeholder="Enter a todo item"
          value={todo}
          onChange={(e) => setTodo(e.target.value)}
        />
      </Form.Group>
      <Button type="submit">Add Todo Item</Button>
    </Form>
  );
};

export default TodoForm;

In the above code, we've created a simple form with a text input and a submit button. We're using the useState hook to keep track of the todo item that the user has entered. When the user submits the form, we'll call the handleSubmit 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'll create a TodoList component that will handle this functionality.

import React from 'react';
import { ListGroup, Button } from 'react-bootstrap';

const TodoList = ({ todos, onDeleteTodo }) => {
  return (
    <ListGroup>
      {todos.map((todo) => (
        <ListGroup.Item key={todo.id}>
          {todo.title}
          <Button
            variant="danger"
            className="float-right"
            onClick={() => onDeleteTodo(todo.id)}
          >
            Delete
          </Button>
        </ListGroup.Item>
      ))}
    </ListGroup>
  );
};

export default TodoList;

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

Editing a Todo Item

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

import React, { useState } from 'react';
import { Form, Button } from 'react-bootstrap';

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

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

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Group controlId="formTodo">
        <Form.Control
          type="text"
          placeholder="Enter a todo item"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
      </Form.Group>
      <Button type="submit">Edit Todo Item</Button>
    </Form>
  );
};

export default EditTodoForm;

In the above code, we've created a form with a text input and a submit button. We're using the useState hook to keep track of the todo item that the user has entered. When the user submits the form, we'll call the onEditTodo 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'll create a TodoList component that will handle this functionality.

import React from 'react';
import { ListGroup } from 'react-bootstrap';

const TodoList = ({ todos }) => {
  return (
    <ListGroup>
      {todos.map((todo) => (
        <ListGroup.Item key={todo.id}>{todo.title}</ListGroup.Item>
      ))}
    </ListGroup>
  );
};

export default TodoList;

In the above code, we've created a ListGroup component from React Bootstrap that will list out all of the todo items.

Marking a Todo Item as Complete

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

import React from 'react';
import { ListGroup, Button } from 'react-bootstrap';

const TodoList = ({ todos, onCompleteTodo }) => {
  return (
    <ListGroup>
      {todos.map((todo) => (
        <ListGroup.Item key={todo.id}>
          {todo.title}
          <Button
            variant="success"
            className="float-right"
            onClick={() => onCompleteTodo(todo.id)}
          >
            Complete
          </Button>
        </ListGroup.Item>
      ))}
    </ListGroup>
  );
};

export default TodoList;

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

Styling the Todo App

Finally, we'll add some basic styling to our todo app. We'll use Bootstrap to make our app look more presentable. We'll also use React Bootstrap to make it easier to use Bootstrap components in our React app.

First, we'll install the React Bootstrap package:

$ npm install react-bootstrap

Next, we'll import the Bootstrap CSS file into our index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

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

import React from 'react';
import { Container } from 'react-bootstrap';

const App = () => {
  return (
    <Container>
      {/* App content here */}
    </Container>
  );
};

export default App;

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

Conclusion

In this tutorial, we've seen how to build a basic todo app in React. We'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've found this tutorial helpful and that you'll be able to use it to build your own todo app!