Tutorial : Membuat Aplikasi Todo List menggunakan React JS

Pada tutorial ini, kita akan belajar membuat aplikasi Todo List sederhana menggunakan React JS. Aplikasi ini akan memungkinkan pengguna untuk menambah, menghapus, dan menandai selesai tugas-tugas yang perlu dilakukan.

Persiapan Awal

Sebelum memulai, pastikan Anda sudah menginstal Node.js dan npm (Node Package Manager) di komputer Anda. Anda juga harus memiliki pengetahuan dasar tentang HTML, CSS, dan JavaScript.

Langkah 1: Membuat Proyek React

1. Buka terminal atau command prompt.
2. Buatlah direktori baru untuk proyek Anda dan pindah ke direktori tersebut.
3. Jalankan perintah berikut untuk membuat proyek React baru:

npx create-react-app todo-list

1. Setelah proses selesai, masuk ke direktori proyek dengan menjalankan perintah:

cd todo-list

Langkah 2: Membuat Komponen Todo

1. Buka file src/App.js dengan menggunakan editor teks.
2. Hapus semua kode yang ada di dalam file tersebut dan gantikan dengan kode berikut:

import React, { useState } from 'react';

function App() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    if (inputValue.trim() !== '') {
      setTodos([...todos, inputValue]);
      setInputValue('');
    }
  };

  const deleteTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  const toggleTodo = (index) => {
    const newTodos = [...todos];
    newTodos[index] = newTodos[index].startsWith('✅') ? newTodos[index].substring(2) : `✅ ${newTodos[index]}`;
    setTodos(newTodos);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Add a new todo"
      />
      <button onClick={addTodo}>Add</button>
      {todos.map((todo, index) => (
        <div key={index}>
          <span onClick={() => toggleTodo(index)}>{todo}</span>
          <button onClick={() => deleteTodo(index)}>Delete</button>
        </div>
      ))}
    </div>
  );
}

export default App;

Langkah 3: Menjalankan Aplikasi

1. Buka terminal atau command prompt.
2. Pastikan Anda berada di dalam direktori proyek todo-list.
3. Jalankan perintah berikut untuk menjalankan aplikasi:

npm start

1. Buka browser dan akses http://localhost:3000 untuk melihat aplikasi Todo List yang telah dibuat.

Kesimpulan

Sekarang Anda telah berhasil membuat aplikasi Todo List sederhana menggunakan React JS. Anda dapat mengembangkan aplikasi ini lebih lanjut dengan menambahkan fitur-fitur tambahan, seperti penyimpanan data menggunakan database atau integrasi dengan backend.

Selamat mencoba! 😊