Hello! In this post, we will take a closer look at how to implement the task addition feature while creating a simple To Do app using React. This tutorial is designed for those who have a basic understanding of React and will provide useful information for intermediate and advanced users as well. We will start with the basics of React and explain the step-by-step process of completing the app.

1. Introduction to React

React is a JavaScript library developed by Facebook for building user interfaces. React helps build efficient web applications by creating reusable UI components.

2. Setting up the project

To create a To Do app, we will first set up a new project with React. Follow the steps below:

npx create-react-app todo-app

After entering the above command in the terminal, the basic structure of the React app will be created. To navigate to the created directory, enter the following command:

cd todo-app

3. Installing required packages

Our To Do app will need a form for the user to input and add tasks. We will be using the useState and useEffect hooks for this. No additional packages need to be installed, but you may consider using additional libraries to enhance the project.

4. Setting up the basic structure

Create a folder named components inside the src directory and create two component files named TodoList.js and AddTodo.js inside it.

TodoList.js

import React from 'react';

const TodoList = ({ todos }) => {
    return (
        

            
Todo List
            

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

export default TodoList;

AddTodo.js

import React, { useState } from 'react';

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

    const handleChange = (e) => {
        setInputValue(e.target.value);
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        if (inputValue) {
            addTodo(inputValue);
            setInputValue('');
        }
    }

    return (
        

            
            Add
        
    );
}

export default AddTodo;

Modify App.js

We will add the provided TodoList and AddTodo components to App.js. Modify the content as follows:

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]);
    }

    return (
        

            
Todo List App
            
            
        
    );
}

export default App;

5. Running the app

Now let’s run the app. To run the development server, enter the following command:

npm start

When you navigate to localhost:3000 in your browser, you will see a simple To Do app with the task addition feature.

6. Expanding features

We have implemented the basic task addition feature. Now we can enhance the app by adding a few more features. For example:

• Task deletion feature
• Feature to mark tasks as completed
• Task editing feature

Adding these features will allow users to use the To Do app more efficiently.

6.1 Adding Task Deletion Feature

The task deletion feature will help users easily remove completed tasks. Modify TodoList.js as follows:

import React from 'react';

const TodoList = ({ todos, removeTodo }) => {
    return (
        

            
Todo List
            

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

                        {todo}
                         removeTodo(index)}>Delete
                    
                ))}
            
        
    );
}

export default TodoList;

Now we need to implement the functionality to delete a task by adding the removeTodo function in App.js.

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

Finally, we will pass the removeTodo function when calling the AddTodo and TodoList components.

<TodoList todos={todos} removeTodo={removeTodo} />

6.2 Adding Feature to Mark Tasks as Completed

Let’s now add the feature to mark tasks as completed. Modify TodoList.js again to add a checkbox.

import React from 'react';

const TodoList = ({ todos, removeTodo, toggleTodo }) => {
    return (
        

            
Todo List
            

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

                         toggleTodo(index)} 
                        />
                        {todo.text}
                         removeTodo(index)}>Delete
                    
                ))}
            
        
    );
}

export default TodoList;

Now we need to modify the todo object to include the isCompleted property along with the text. Modify the addTodo function in App.js to include this functionality.

const addTodo = (text) => {
    setTodos([...todos, { text, isCompleted: false }]);
};

We also need to add the toggleTodo function.

const toggleTodo = (index) => {
    const newTodos = todos.map((todo, i) => 
        i === index ? { ...todo, isCompleted: !todo.isCompleted } : todo
    );
    setTodos(newTodos);
};

7. Conclusion

We have created a simple To Do app using React. The features we have implemented include adding, deleting, and marking tasks as completed. I hope this tutorial has helped you understand the basic usage of React and the data flow between components.

You can continue to enhance your app by adding various features in this way or by improving styling using CSS. This will help deepen your understanding of React and lay the foundation for utilizing it in real projects.

Thank you. In the next tutorial, we will explore more feature expansions and refactoring methods. Wishing you success in your React learning journey!

React is a widely used JavaScript library for modern web application development. React is based on components that make up the UI and maximizes user experience through client-side state management and efficient UI rendering. In this course, we will explore one of the various concepts of React, Ref, in detail.

1. What is Ref?

In React, Ref is a way to directly access DOM elements or React components. Ref is useful when there is a need to directly modify the DOM within React’s component model and lifecycle. This allows us to access DOM elements or perform tasks such as calling specific methods without using state.

2. The Need for Ref

In React, it is common to update the UI based on the component’s state. However, there are times when we need to directly access specific elements of the UI. In such situations, we use Ref. For example, Ref is helpful when we need to set focus to a specific input element or directly apply animation effects.

3. How to Use Ref

Here is how to create and use Ref in React.

import React, { useRef } from 'react';

function MyComponent() {
    const inputRef = useRef(null);

    const focusInput = () => {
        if (inputRef.current) {
            inputRef.current.focus();
        }
    };

    return (
        

            
            Focus
        
    );
}

In the example above, we used the useRef hook to create inputRef and added the ref attribute to the input element. The focusInput function is called when the button is clicked, setting the focus to the input element.

4. Use Cases for Ref

4.1. Focus Management

We can implement a feature that moves the focus to a specific input field when the user presses the “Enter” key. In this case, we directly access the input field using Ref.

4.2. Animation and DOM Manipulation

When using an animation library with React, it may be necessary to make direct changes to the DOM elements. Using Ref allows us to easily apply fluid animation effects.

4.3. Integration with External Libraries

When there is a need to access DOM elements using specific external libraries, we can use Ref to select those elements and call methods from the library.

5. Difference Between Ref and State Management

While Ref and state appear to serve the same purpose, they are designed for different uses. State is a way to update the UI, while Ref is a way to access DOM elements. State operates alongside React’s lifecycle, whereas Ref is used for direct manipulation of the DOM.

6. Limitations of Ref

Ref has several limitations compared to state management. The main limitations are:

• Changes to Ref do not trigger re-rendering: Ref modifies the DOM directly, and changes to the element do not affect React’s state management system.
• Mainly used for direct DOM manipulation: Ref can lead to poor design patterns. It is recommended to manage state through components.

7. Example Using Ref

The example code below provides a text area where users can input text. When the user presses the “Enter” button, the focus is set to the text area.

import React, { useRef } from 'react';

function TextInput() {
    const textAreaRef = useRef(null);

    const focusTextArea = () => {
        if (textAreaRef.current) {
            textAreaRef.current.focus();
        }
    };

    return (
        

            
            Focus on Text Area
        
    );
}

8. Advanced Ref Usage

Refs can be used in deeper parts of React. For example, we will explain how to pass refs from a parent component to a child component using React’s forwardRef.

import React, { forwardRef, useRef } from 'react';

const FancyInput = forwardRef((props, ref) => (
    
));

function ParentComponent() {
    const inputRef = useRef(null);

    const focusInput = () => {
        if (inputRef.current) {
            inputRef.current.focus();
        }
    };

    return (
        

            
            Focus
        
    );
}

9. Conclusion

Ref is a very useful feature in React that provides a way to directly access and manipulate DOM elements. We hope that this guide has helped you understand the concept, necessity, usage, and advanced features of Ref. Furthermore, we hope you can effectively utilize Ref to provide a better user experience and UI when developing web applications with React.

10. Additional Resources

• React Official Documentation – Refs and the DOM
• React Learn – Refs in React

Please explore various resources to learn more about React and Ref. Thank you!