This tutorial will guide you through the process of creating a simple To-Do app using React. We will also implement the functionality to save the To-Do items to the browser's local storage. This tutorial assumes you have a basic understanding of HTML, CSS, and JavaScript.
Prerequisites
Before we begin, make sure you have the following software installed on your machine:
- Node.js (v12 or higher)
- npm (Node Package Manager)
Step 1: Setup
First, let's set up the basic project structure:
- Create a new project directory and navigate into it.
- Open a terminal or command prompt and run the following command to initialize a new React project:
npx create-react-app todo-app
- Once the project is created, navigate into the project directory:
cd todo-app
- Start the development server by running the following command:
npm start
You should see the default React app running in your browser at http://localhost:3000. Now we're ready to start building our To-Do app!
Step 2: Create the To-Do Component
In this step, we'll create the main component for our To-Do app.
- Open the
src
directory in your project. - Delete all the existing files in the
src
directory exceptindex.js
andApp.js
. - Create a new file called
Todo.js
inside thesrc
directory. - Open
Todo.js
and add the following code:
import React, { useState } from 'react';
const Todo = () => {
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');
const handleInputChange = (e) => {
setInputValue(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
if (inputValue.trim() !== '') {
setTodos([...todos, inputValue]);
setInputValue('');
}
};
return (
<div>
<h1>Todo App</h1>
<form onSubmit={handleSubmit}>
<input
type="text"
value={inputValue}
onChange={handleInputChange}
placeholder="Enter a new task"
/>
<button type="submit">Add Task</button>
</form>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
</div>
);
};
export default Todo;
Step 3: Update the App Component
Next, let's update the App
component to render our Todo
component.
- Open
src/App.js
. - Replace the existing code with the following:
import React from 'react';
import Todo from './Todo';
const App = () => {
return (
<div className="App">
<Todo />
</div>
);
};
export default App;
Step 4: Styling the App
Let's add some basic styling to our To-Do app using CSS.
- Open the
src
directory. - Create a new file called
App.css
. - Open
App.css
and add the following styles:
.App {
text-align: center;
padding: 20px;
}
form {
margin-bottom: 20px;
}
input[type='text'] {
padding: 5px;
width: 200px;
margin-right: 10px
;
}
button {
padding: 5px 10px;
}
- Open
App.js
. - Add the following import statement at the top of the file:
import './App.css';
Step 5: Implement Local Storage
Now let's implement the functionality to save the To-Do items to the browser's local storage.
- Open
src/Todo.js
. - Add the following code inside the
handleSubmit
function, aftersetInputValue('')
:
localStorage.setItem('todos', JSON.stringify([...todos, inputValue]));
- Add the following code inside the
Todo
component, before thereturn
statement:
React.useEffect(() => {
const storedTodos = localStorage.getItem('todos');
if (storedTodos) {
setTodos(JSON.parse(storedTodos));
}
}, []);
- Save the file.
Step 6: Finalize and Test
Congratulations! You have successfully created a To-Do app with React and implemented local storage.
- Go to your browser and open the To-Do app at http://localhost:3000.
- Enter a task in the input field and click "Add Task." The task should be added to the list below.
- Refresh the page. The added task should still be visible.
Conclusion
In this tutorial, you learned how to create a simple To-Do app using React and save the To-Do items to the browser's local storage. You can further enhance this app by adding features like deleting tasks, marking tasks as completed, or using a more advanced state management solution like Redux.
Feel free to experiment and modify the code to suit your needs. Happy coding!
Top comments (0)