Create Todo List App in 1+ hrs. using React and Vitejs

If you are a beginner in web development and want to create a simple todo list app using React and Vitejs, you have come to the right place. In this article, we will guide you through creating a basic todo list app in 1+ hours.

Prerequisites

Before we start, make sure you have the following installed:

• Node.js
• npm (Node package manager)

Setting up the Project

First, let’s create a new directory for our project. Open your terminal and run the following commands:


mkdir todo-list-app
cd todo-list-app


Next, initialize a new npm project by running:


npm init -y


Installing Dependencies

Now, we need to install the necessary dependencies for our project. Run the following commands in your terminal:


npm install react react-dom vite


Creating the Todo List App

Now that our project is set up and dependencies are installed, let’s create our todo list app. First, create a new file called App.js in the root directory of your project and add the following code:


import React, { useState } from 'react';

function App() {
const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');

const addTodo = () => {
setTodos([...todos, input]);
setInput('');
};

return (

Todo List

setInput(e.target.value)} />
Add Todo

{todos.map((todo, index) => (
• {todo}

))}

);
}

export default App;


Next, create a file called index.jsx in the src directory and add the following code:


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(, document.getElementById('root'));


Now, open your index.html file in the root directory and add the following code:

Running the App

Finally, open your terminal and run the following command to start the Vitejs development server:


npm run dev


Now, open your web browser and navigate to http://localhost:3000 to see your todo list app in action!

Conclusion

Congratulations! You have successfully created a simple todo list app using React and Vitejs in just 1+ hours. Feel free to experiment with the app and add more features to enhance your learning experience.

If you want to explore the complete source code for this project, you can find it here.