React Course: To Do App Example, Implementing UI

Hello. In this article, we will learn how to create a To Do app using React. This tutorial will cover both UI/UX design and functionality implementation. React is a component-based JavaScript library that helps create dynamic user interfaces easily.

Preparing the Project

Before we start, we need to set up the basic configuration of the project. You can build the development environment with the following steps.

npx create-react-app my-todo-app

Running the above command will create the basic template of a React app in a folder named my-todo-app. Let’s navigate to the created folder and run the app.

cd my-todo-app
npm start

If you access http://localhost:3000 in your browser, you will see the basic React app running.

Designing Component Structure

The basic functionality of the To Do app is to add tasks, toggle completion status, and delete them. You can design the component structure as follows.

• App: The root component of the application
• TodoList: The component that displays the list of tasks
• TodoItem: The component that displays each task item
• AddTodo: The form component for adding a task

Implementing Components

Now let’s implement each component.

1. App Component

First, let’s open the App.js file and define the basic state.

import React, { useState } from 'react';
import TodoList from './components/TodoList';
import AddTodo from './components/AddTodo';

const App = () => {
    const [todos, setTodos] = useState([]);

    const addTodo = (todo) => {
        setTodos([...todos, todo]);
    };

    const toggleComplete = (index) => {
        const newTodos = todos.map((todo, i) => {
            if (i === index) {
                return { ...todo, completed: !todo.completed };
            }
            return todo;
        });
        setTodos(newTodos);
    };

    const deleteTodo = (index) => {
        const newTodos = todos.filter((_, i) => i !== index);
        setTodos(newTodos);
    };

    return (
        <div className="App">
            <h1>To Do List</h1>
            <AddTodo addTodo={addTodo} />
            <TodoList todos={todos} toggleComplete={toggleComplete} deleteTodo={deleteTodo} />
        </div>
    );
};

export default App;

2. TodoList Component

Next, we will implement TodoList.js. This component renders the list of tasks.

import React from 'react';
import TodoItem from './TodoItem';

const TodoList = ({ todos, toggleComplete, deleteTodo }) => {
    return (
        <ul>
            {todos.map((todo, index) => (
                <TodoItem 
                    key={index} 
                    todo={todo} 
                    toggleComplete={() => toggleComplete(index)} 
                    deleteTodo={() => deleteTodo(index)} 
                />
            ))}
        </ul>
    );
};

export default TodoList;

3. TodoItem Component

Now, let’s create TodoItem.js to represent each task item.

import React from 'react';

const TodoItem = ({ todo, toggleComplete, deleteTodo }) => {
    return (
        <li style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
            {todo.text}
            <button onClick={toggleComplete}>Complete</button>
            <button onClick={deleteTodo}>Delete</button>
        </li>
    );
};

export default TodoItem;

4. AddTodo Component

Finally, let’s implement the form for adding tasks.

import React, { useState } from 'react';

const AddTodo = ({ addTodo }) => {
    const [inputValue, setInputValue] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        if (inputValue.trim()) {
            addTodo({ text: inputValue, completed: false });
            setInputValue('');
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <input 
                type="text" 
                value={inputValue} 
                onChange={(e) => setInputValue(e.target.value)} 
                placeholder="Enter your task" 
            />
            <button type="submit">Add</button>
        </form>
    );
};

export default AddTodo;

Adding Styling

Now that the basic functionality has been implemented, let’s make the UI more beautiful using CSS. Add the following styles to the App.css file.

body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
}

.App {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
}

form {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

input[type="text"] {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px 15px;
    margin-left: 10px;
    border: none;
    border-radius: 4px;
    background: #4A90E2;
    color: white;
    cursor: pointer;
}

button:hover {
    background: #357ABD;
}

ul {
    list-style-type: none;
    padding: 0;
}

Testing and Deployment

Now that the app is complete, you can proceed to test and deploy it. You can create a production build using the command npm run build.

npm run build

Deploy the generated build folder to a server, and your To Do app will be showcased to the world.

Conclusion

In this tutorial, we implemented a basic To Do app using React. We effectively built the UI using React’s component-based architecture and state management. Next, I recommend trying to add more complex features or using a state management library like Redux.

Developing projects with React is a process of iteration and improvement. Keep learning and practicing to create your own amazing applications!