This content originally appeared on DEV Community and was authored by △ LUKE知る
In this blog post, I'll walk you through the process of building a simple Todo List application using React and TailwindCSS. This project is perfect for beginners who want to dive deeper into React for managing state and learn how to style components using the utility-first CSS framework, TailwindCSS.
Project Overview
The goal of this project is to create a basic Todo List where users can:
Add new tasks.
Toggle tasks between completed and uncompleted.
Delete tasks they no longer need.
We’ll leverage React’s state management capabilities and style everything using TailwindCSS.
Step1: Setting up the project
To begin, we’ll set up a React project using create-react-app and install TailwindCSS.
- Create React App:
npx create-react-app todo-list
cd todo-list
- Install TailwindCSS: TailwindCSS needs to be installed along with PostCSS and autoprefixer for automatic browser compatibility.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
- Configure Tailwind: In tailwind.config.js, update the content section to point to your React app’s files:
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
- Include Tailwind in your CSS: In
src/index.css, import the TailwindCSS directives:
@tailwind base;
@tailwind components;
@tailwind utilities;
Now, TailwindCSS is fully integrated into our React app!
Step 2: Creating the Todo List Component
Next, let's create a Todo List component where users can add, delete, and toggle tasks.
Here’s the core structure of the TodoList.js component:
import { useState } from 'react';
function TodoList() {
const [tasks, setTasks] = useState([]);
const [newTask, setNewTask] = useState('');
const addTask = () => {
if (newTask.trim()) {
setTasks([...tasks, { text: newTask, completed: false }]);
setNewTask('');
}
};
const toggleTaskCompletion = (index) => {
const updatedTasks = tasks.map((task, i) =>
i === index ? { ...task, completed: !task.completed } : task
);
setTasks(updatedTasks);
};
const deleteTask = (index) => {
const updatedTasks = tasks.filter((_, i) => i !== index);
setTasks(updatedTasks);
};
return (
<div className="max-w-md mx-auto mt-10 p-4 bg-white rounded-lg shadow-lg">
<h1 className="text-2xl font-bold mb-4">Todo List</h1>
<div className="flex mb-4">
<input
type="text"
className="flex-1 p-2 border rounded"
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
placeholder="Add a new task..."
/>
<button
onClick={addTask}
className="ml-2 p-2 bg-blue-500 text-white rounded hover:bg-blue-600"
>
Add
</button>
</div>
<ul>
{tasks.map((task, index) => (
<li key={index} className="flex justify-between items-center mb-2">
<span
className={`flex-1 ${task.completed ? 'line-through text-gray-500' : ''}`}
onClick={() => toggleTaskCompletion(index)}
>
{task.text}
</span>
<button
onClick={() => deleteTask(index)}
className="ml-4 p-1 bg-red-500 text-white rounded hover:bg-red-600"
>
Delete
</button>
</li>
))}
</ul>
</div>
);
}
export default TodoList;
Step 3: Integrating the Component into the App
Once the TodoList component is ready, integrate it into the main App.js file. Here’s how:
import './App.css';
import TodoList from './components/TodoList';
function App() {
return (
<div className="App">
<TodoList />
</div>
);
}
export default App;
Step 4: Testing your work!
By running:
npm start
We can see the basic layout of our Todo List Page like this:
Typing your todos:
Clicking the Add button to add the todos:
Toggle the tasks that have been completed:
Delete the task that you don't want anymore by clicking the Delete button:
Conclusion
Building this Todo List with React and TailwindCSS helped demonstrate the power of combining a component-based library like React with a utility-first CSS framework. React's state management, combined with Tailwind's simple, intuitive styling, allowed us to quickly create a responsive, interactive application.
You can continue enhancing this app by:
Persisting the tasks in localStorage so they’re saved between page refreshes.
Adding due dates or priority levels to tasks.
Expanding the design with more complex styles and animations.
Thanks for reading! I hope this project inspired you to explore more with React and TailwindCSS.
This content originally appeared on DEV Community and was authored by △ LUKE知る
△ LUKE知る | Sciencx (2024-10-04T01:35:37+00:00) Easy Todo List App with React and Tailwind CSS. Retrieved from https://www.scien.cx/2024/10/04/easy-todo-list-app-with-react-and-tailwind-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.