To-Do App Using React, Vite, and Bootstrap - Part 1: Set Up the Application

In folder icon React Mar 31, 2024

Updated on June 8, 2024

React is a popular JavaScript library for building user interfaces. At its core, React empowers developers to construct interactive web applications through a paradigm centered around components. These building blocks encapsulate distinct UI elements, each with its own functionality and state, fostering a modular and reusable approach to web development. Complementing React's prowess, tools like Vite provide lightning-fast development environments, while frameworks like Bootstrap offer pre-designed components for rapid prototyping. In this tutorial, we'll explore React's component-driven approach using the development environment provided by Vite and the styling conveniences offered by Bootstrap. In this post, we'll build a simple to-do app using React 18.2.0, Vite 5.2.7, and Bootstrap 5.3.3, demonstrating how these technologies seamlessly integrate to create modern web applications.

ALL PARTS:

  1. To-Do App Using React, Vite, And Bootstrap: Set Up the Application
  2. To-Do App Using React, Vite, And Bootstrap: Create Custom Components
  3. To-Do App Using React, Vite, And Bootstrap: Create Tasks
  4. To-Do App Using React, Vite, And Bootstrap: Edit Tasks
  5. To-Do App Using React, Vite, And Bootstrap: Delete and Update Tasks Status

Set Up the Application

To set up our application, we will use the Yarn package manager. Open your terminal and enter the following command: 

yarn create vite to-do-react --template react

This command will initialize a new Vite project named "to-do-react" with the React template.

Next, let's navigate into the new project folder by entering the following command: 

cd to-do-react

Then, let's install the project dependencies by running the following command in the terminal: 

yarn

Next, let's add Bootstrap and React Bootstrap to our project by running the following command in the terminal: 

yarn add bootstrap react-bootstrap

To provide unique IDs to the tasks in our application, let's add the uuid generator to our project. Run the following command in the terminal: 

yarn add uuid

Now, let's start the development server by running the following command in the terminal: 

yarn dev

This command will start the development server and allow you to view your project in the browser at port 5173.

 Let's open this project in our code editor. The source code lives inside the src directory.  You can notice there is a file called App.jsx. App.jsx serves as a root component file. It's the main entry point for our application and contains the App component. This component represents the core of our application and is responsible for rendering the main content and structure of our user interface.  

 You've noticed that  some files are imported into the App component. Among them, there is App.css which contains styles specific to the App component. Here, we can define styles unique to our main application layout or that are used across multiple components within the App.

Let's make some adjustments to the App.css file to remove unnecessary styles. Open the file in your code editor and edit it as follows: 

#root {
    max-width: 1280px;
    padding: 2rem;
  }

Let's import the Bootstrap CSS into our project. At the top of the App.jsx file, add the following line: 

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

Let's edit the return statement inside this component as follows: 

return (
    <div className="container">
      <h1>Tasks</h1>
    </div>
  );

In this return statement, we're returning a div element with the class name "container" containing an h1 element. The className attribute specifies CSS classes that apply to the element.

In this return statement, we're using JSX syntax to define the structure of our user interface. JSX, or JavaScript XML, is a syntax extension that allows us to write HTML-like code directly within JavaScript. 

Key Points about JSX:

Now, let's delete some unnecessary imports and code. In the App.jsx file, remove the following imports: 

import reactLogo from "./assets/react.svg";
  import viteLogo from "/vite.svg";

Additionally, delete the following line of code: 

const [count, setCount] = useState(0);

In our React project, App.jsx is imported into another file called main.jsx. This is where our application is bootstrapped, and where we tell React to start rendering our App component.

Additionally, in main.jsx, another CSS file called index.css is imported. This file serves as the entry point for global styles in our application, where we define styles that apply across the entire project.

Let's edit this file to remove unnecessary styles. Open it and edit it as follows: 

:root {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;
  }
  body {
    margin: 0;
    min-height: 100vh;
  }
  h1 {
    font-size: 3.2em;
    line-height: 1.1;
  }

Display Lists

Below the h1 element, we'll display a list of tasks. For now, we'll create a tasks array and populate it with some data. Each task will have an ID, a title, and a completed status, which is false by default. We'll generate the IDs using the uuid generator. 
In our App component, import the uuid generator below the other import statements: 

import { v4 as uuidv4 } from "uuid";

Before the return statement, let's add the tasks array: 

const tasks = [
    { id: uuidv4(), title: "Feed the cats", completed: false },
    { id: uuidv4(), title: "Exercise", completed: true },
    { id: uuidv4(), title: "Go Shopping", completed: false },
  ];

This array contains some initial tasks with unique IDs generated using the uuid generator, along with their titles and completion status.

Below the h1 tag, we'll display these tasks:  

<ul className="mt-5 list-unstyled">
    {tasks.map((task) => (
      <li key={task.id}>
        <span>{task.title}</span>
      </li>
    ))}
  </ul>

In this code snippet, we're mapping over the tasks array and rendering each task's title within a li element. 

You've noticed that we've used curly braces to retrieve the task titles and IDs. 

Using the JSX syntax,  we can embed JavaScript expressions within curly braces {} directly inside our HTML-like code. This enables us to dynamically render data and execute logic within our components.

When we enclose a JavaScript variable or expression within curly braces {} inside JSX, React will evaluate it and display the result.

To each li element, we've passed a key prop. Props (short for properties) are very important in React. They allow us to customize and configure child components by passing data as attributes. Here, we've passed a key prop from the ul element to the li elements. 

Purpose of the Key Prop:

The key prop is a special attribute that React uses to keep track of elements within a list. It helps React identify each element uniquely and efficiently reconcile changes when the list is updated.

Why Keys Are Important:

Without a key prop, React may re-render every item in the list, leading to performance issues, especially with large datasets. With a key prop, React can optimize updates by only re-rendering the elements that have changed or moved within the list.

Best Practices for Keys:

Keys should be unique among siblings within the same list. They don't need to be globally unique, but they should be unique within the context of their parent component.

It's recommended to use stable identifiers as keys, such as unique IDs from your data, rather than using array indices.

Post last updated on June 8, 2024