Buat Sendiri Saja Dengan REACT JS !! Aplikasi Pencatatanmu | Membuat To Do List Dengan React JS

Introduction

In this tutorial, we will build a simple To Do List application using React JS. This project will help you understand the basics of React while implementing CRUD (Create, Read, Update, Delete) functionalities. By following these steps, you'll learn how to manage data effectively within your application.

Step 1: Set Up the Project

• Install React using Create React App:
  • Open your terminal and run:

    npx create-react-app todo-list
    cd todo-list
    npm start
    

• This command sets up a new React project and starts the development server.

Step 2: Create the Form Component

• Create a new file for the Form component:
  • Navigate to the src directory and create a file named Form.js.
• In Form.js, implement a simple form for adding new tasks:

  import React, { useState } from 'react';
  
  const Form = ({ addTask }) => {
      const [task, setTask] = useState('');
  
      const handleSubmit = (e) => {
          e.preventDefault();
          addTask(task);
          setTask('');
      };
  
      return (
          <form onSubmit={handleSubmit}>
              <input
                  type="text"
                  value={task}
                  onChange={(e) => setTask(e.target.value)}
                  placeholder="Add a new task"
              />
              <button type="submit">Add</button>
          </form>
      );
  };
  
  export default Form;
  

Step 3: Create the List Component

• Create a List.js file in the src directory.
• In List.js, implement the display of tasks:

  import React from 'react';
  
  const List = ({ tasks, deleteTask }) => {
      return (
          <ul>
              {tasks.map((task, index) => (
                  <li key={index}>
                      {task}
                      <button onClick={() => deleteTask(index)}>Delete</button>
                  </li>
              ))}
          </ul>
      );
  };
  
  export default List;
  

Step 4: Handle Input and State Management

• In App.js, manage the state for tasks:

  import React, { useState } from 'react';
  import Form from './Form';
  import List from './List';
  
  const App = () => {
      const [tasks, setTasks] = useState([]);
  
      const addTask = (task) => {
          setTasks([...tasks, task]);
      };
  
      const deleteTask = (index) => {
          const newTasks = tasks.filter((_, i) => i !== index);
          setTasks(newTasks);
      };
  
      return (
          <div>
              <h1>To Do List</h1>
              <Form addTask={addTask} />
              <List tasks={tasks} deleteTask={deleteTask} />
          </div>
      );
  };
  
  export default App;
  

Step 5: Implement Update Functionality

• To update a task, modify the List component to include an edit option:

  const List = ({ tasks, editTask, deleteTask }) => {
      return (
          <ul>
              {tasks.map((task, index) => (
                  <li key={index}>
                      {task}
                      <button onClick={() => editTask(index)}>Edit</button>
                      <button onClick={() => deleteTask(index)}>Delete</button>
                  </li>
              ))}
          </ul>
      );
  };
  

• Update the App component to handle editing.

Step 6: Store Tasks in Local Storage

• Add functionality to save tasks in local storage, so they persist between page refreshes:

  const saveTasksToLocalStorage = (tasks) => {
      localStorage.setItem('tasks', JSON.stringify(tasks));
  };
  
  useEffect(() => {
      const savedTasks = JSON.parse(localStorage.getItem('tasks'));
      if (savedTasks) {
          setTasks(savedTasks);
      }
  }, []);
  
  useEffect(() => {
      saveTasksToLocalStorage(tasks);
  }, [tasks]);
  

Step 7: Deploy the Application

• Deploy your application using Vercel:
  • Install Vercel CLI:

    npm install -g vercel
    

  • Run the following command to deploy:

    vercel
    

Conclusion

Congratulations! You have successfully built a To Do List application using React JS. By implementing CRUD operations and local storage, you now have a functional application. Next steps include enhancing your app with additional features or styling for better user experience. Happy coding!