Creating a Todo App Part 1 in React js + Vite
Today, we will be creating a simple todo app using React js and Vite. This will be the first part of a series of tutorials where we will build a fully functional todo app.
Step 1: Installing Vite
To start off, we need to install Vite, a fast and opinionated frontend build tool. You can do this by running the following command in your terminal:
npm init @vitejs/app todo-app
cd todo-app
npm install
npm run dev
Once Vite is installed, we can start building our todo app.
Step 2: Creating a Todo Component
Now, let’s create a new file called Todo.js inside the src/components directory. This file will contain the code for our todo component.
import React from 'react';
const Todo = () => {
return (
Todo List
- Task 1
- Task 2
- Task 3
);
}
export default Todo;
Our todo component will simply display a list of tasks for now. In future parts of this series, we will add functionality to add, edit, and delete tasks.
Step 3: Using the Todo Component
Now that our todo component is created, we can use it in our main App component. Open the App.js file inside the src directory and add the following code:
import React from 'react';
import Todo from './components/Todo';
function App() {
return (
Todo App
);
}
export default App;
Now, when you run npm run dev in your terminal, you should see the todo component being rendered in your browser.
Congratulations! You have successfully created the first part of our todo app using React js and Vite. In the next part of this series, we will add functionality to add tasks to our todo list.
😑 'Promo sm'