Bangun Aplikasi Daftar Tugas Sederhana Dengan React

Bangun Aplikasi Daftar Tugas Sederhana Dengan React
Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Mempelajari teknologi baru seperti React dapat membingungkan tanpa pengalaman langsung. Sebagai pengembang, membangun proyek dunia nyata adalah salah satu cara paling efektif untuk memahami konsep dan fitur.





Video MUO hari ini GULIR UNTUK LANJUTKAN DENGAN KONTEN

Ikuti proses pembuatan daftar tugas sederhana dengan React, dan tingkatkan pemahaman Anda tentang dasar-dasar React.



Prasyarat untuk Membuat To-Do List

Sebelum Anda memulai proyek ini, ada beberapa persyaratan. Anda harus memiliki pemahaman dasar tentang hal-hal berikut, HTML, CSS, JavaScript, ES6 , dan Bereaksi. Anda harus memiliki Node.js dan npm, pengelola paket JavaScript . Anda juga memerlukan editor kode, seperti Visual Studio Code.





Inilah CSS yang akan digunakan proyek ini:

 /* styles.css */ 
.App { 
  font-family: sans-serif; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
} 
 
.Todo { 
  background-color: wheat; 
  text-align: center; 
  width: 50%; 
  padding: 20px; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
  margin: auto; 
} 
 
ul { 
  list-style-type: none; 
  padding: 10px; 
  margin: 0; 
} 
 
button { 
  width: 70px; 
  height: 35px; 
  background-color: sandybrown; 
  border: none; 
  font-size: 15px; 
  font-weight: 800; 
  border-radius: 4px; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
} 
 
.input { 
  border: none; 
  width: 340px; 
  height: 35px; 
  border-radius: 9px; 
  text-align: center; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
} 
 
.Top { 
  display: flex; 
  justify-content: center; 
  gap: 12px; 
} 
 
li { 
  display: flex; 
  justify-content: space-evenly; 
  align-items: center; 
  padding: 10px; 
} 
 
li:before { 
  content: "*"; 
  margin-right: 5px; 
}

1. Siapkan Lingkungan Proyek

Tahap ini mencakup semua perintah dan file yang diperlukan untuk menyiapkan proyek. Untuk memulai, buat proyek React baru. Buka terminal dan jalankan perintah ini:



 npx create-react-app todo-list

Ini membutuhkan beberapa menit untuk menginstal semua file yang diperlukan dan juga paket. Itu membuat aplikasi React baru bernama todo-list. Setelah Anda melihat sesuatu seperti ini, Anda berada di jalur yang benar:

Daftar perintah untuk dijalankan di dalam direktori.

Arahkan ke direktori proyek Anda yang baru dibuat menggunakan perintah ini:



 cd todo-list

Jalankan proyek Anda secara lokal dengan perintah ini:

 npm start

Dan kemudian lihat proyek di browser Anda di http://localhost:3000/.



Di folder src proyek Anda, ada beberapa file yang tidak Anda perlukan. Hapus file-file ini: Aplikasi.css , Aplikasi.test.js , logo.svg , laporWebVitals.js , setupTests.js .

File di dalam folder src dari aplikasi React.

Pastikan Anda mencari pernyataan impor di file yang tersedia dan hapus semua referensi ke file yang dihapus.

2. Buat Komponen TodoList

Ini adalah komponen yang akan kami terapkan semua kode yang diperlukan untuk daftar tugas. Buat file bernama 'TodoList.js' di folder src Anda. Kemudian untuk menguji apakah semuanya berfungsi sebagaimana mestinya, tambahkan kode berikut:

 import React from 'react'; 
 
const TodoList = () => { 
    return ( 
        <div> 
            <h2>Hello World </h2> 
        </div> 
    ); 
}; 
 
export default TodoList;  
 

Buka file App.js Anda, impor komponen TodoList, dan render di dalam komponen Aplikasi. Ini akan terlihat seperti ini:

 import React from 'react'; 
import './styles.css' 
import TodoList from './TodoList'; 
 
const App = () => { 
    return ( 
        <div> 
            <TodoList /> 
        </div> 
    ); 
}; 
 
export default App;

Buka browser lokal Anda yang menjalankan localhost:3000 dan periksa untuk melihat tulisan “Hello World” dengan berani. Semuanya bagus? Ke langkah selanjutnya.

3. Menangani Input dan Perubahan Input

Langkah ini memungkinkan Anda memicu kejadian saat Anda mengetikkan tugas ke dalam kotak input. Impor hook useState dari paket React Anda. useState adalah pengait React yang memungkinkan Anda mengelola status secara efisien .

 import React, { useState } from 'react';

Gunakan hook useState untuk membuat variabel status bernama 'inputTask' dengan nilai awal string kosong. Selain itu, tetapkan fungsi 'setInputTask' untuk memperbarui nilai 'inputTask' berdasarkan input pengguna.

 const [inputTask, setInputTask] = useState("");

Buat fungsi yang disebut 'handleInputChange', dengan memasukkan parameter peristiwa. Itu harus memperbarui status inputTask menggunakan fungsi setInputTask. Akses nilai target acara dengan event.target.value. Ini akan berjalan setiap kali nilai kolom input berubah.

 const handleInputChange = (event) => { 
    setInputTask(event.target.value); 
};

Kembalikan beberapa elemen JSX. Yang pertama adalah heading yang bertuliskan “My Todo-List”, Anda bisa menentukan heading mana saja yang Anda suka. Sertakan beberapa atribut ke elemen input Anda. ketik = “teks” : Ini menentukan jenis masukan Anda sebagai teks, nilai={inputTask} : Ini mengikat nilai kolom input ke variabel status inputTask, memastikan bahwa itu mencerminkan nilai saat ini. onChange={handleInputChange} : Ini memanggil fungsi handleInputChange saat nilai kolom input berubah, memperbarui status inputTask.

 <div className="Todo"> 
    <h1>My To-Do List</h1> 
    <div className="Top"> 
        <input className="input" type="text" value={inputTask} 
           onChange={handleInputChange} placeholder="Enter a task" />

Selanjutnya, buat tombol yang akan menambahkan tugas yang dimasukkan ke dalam daftar.

         <button className="btn">ADD</button> 
   </div> 
</div>

Pada tahap ini, seperti inilah tampilan keluaran browser Anda.

Daftar tugas yang kosong.

4. Tambahkan Fungsionalitas ke Tombol 'TAMBAHKAN'.

Menggunakan useState hook untuk membuat variabel status bernama 'daftar' dengan nilai awal dari array kosong. Variabel 'setList' menyimpan berbagai tugas berdasarkan input pengguna.

 const [list, setList] = useState([]);

Buat fungsi handleAddTodo yang akan dijalankan saat pengguna mengklik tombol “TAMBAHKAN” untuk menambahkan tugas baru. Dibutuhkan parameter todo, yang mewakili tugas baru yang dimasukkan oleh pengguna. Kemudian, buat objek newTask dengan id unik yang dihasilkan menggunakan Math.random(), dan properti todo yang menyimpan teks masukan.

Selanjutnya, perbarui status daftar dengan menggunakan operator spread […list] untuk membuat larik baru dengan tugas yang ada dalam daftar. Tambahkan newTask ke akhir array. Ini memastikan bahwa kami tidak mengubah larik status asli. Terakhir, setel ulang status inputTask ke string kosong, bersihkan kolom input saat pengguna mengklik tombol.

 const handleAddTodo = (todo) => { 
    const newTask = { 
        id: Math.random(), 
        todo: todo 
   }; 
 
   setList([...list, newTask]); 
    setInputTask(''); 
};

Sertakan onClick atribut ke elemen tombol dengan teks 'ADD'. Saat diklik, ini memicu fungsi handleAddTodo, yang menambahkan tugas baru ke status daftar

 <button onClick={() => handleAddTodo(inputTask)}>ADD</button>

Pada tahap ini, keluaran browser Anda akan terlihat sama tetapi jika Anda mengklik tombol 'TAMBAHKAN' setelah memasukkan tugas, kolom masukan akan kosong. Jika itu berhasil, lanjutkan ke langkah berikutnya.

5. Tambahkan Tombol Hapus

Ini adalah langkah terakhir untuk memungkinkan pengguna menghapus tugas mereka jika mereka melakukan kesalahan atau telah menyelesaikan tugas. Buat fungsi handleDeleteTodo yang berfungsi sebagai pengendali kejadian saat pengguna mengklik tombol 'Hapus' untuk tugas tertentu. Dibutuhkan id tugas sebagai parameter.

Di dalam fungsi, gunakan metode filter pada larik daftar untuk membuat larik baru DaftarBaru yang mengecualikan tugas dengan id yang cocok. Metode filter mengulang setiap item dalam larik daftar dan mengembalikan larik baru yang hanya berisi item yang memenuhi kondisi yang diberikan. Dalam hal ini, periksa apakah ID setiap tugas sama dengan ID yang diteruskan sebagai parameter. Perbarui status daftar dengan memanggil setList(newList), yang menyetel status ke array baru yang difilter, secara efektif menghapus tugas dengan id yang cocok dari daftar.

 const handleDeleteTodo = (id) => { 
    const newList = list.filter((todo) =>  
        todo.id !== id 
   ); 
 
    setList(newList);  
};

Gunakan metode peta untuk mengulangi setiap item dalam larik daftar dan mengembalikan larik baru. Kemudian, buat elemen

  • untuk merepresentasikan tugas untuk setiap objek todo dalam larik daftar. Pastikan untuk menambahkan atribut key saat merender daftar elemen di React. Ini membantu React secara unik mengidentifikasi setiap item daftar dan memperbarui UI secara efisien saat berubah. Dalam hal ini, setel kunci ke id dari setiap objek todo untuk memastikan keunikan.

    Akses properti todo dari setiap objek todo. terakhir, buat tombol yang ketika diklik, memicu fungsi handleDeleteTodo dengan id tugas terkait sebagai parameter, memungkinkan kita untuk menghapus tugas dari daftar.

     <ul> 
    { list.map((todo) => ( 
       <li className="task" key={todo.id}> 
            {todo.todo} 
            <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button> 
        </li> 
    ))} 
    </ul>

    Seperti inilah tampilan kode akhir Anda:

     import React, { useState } from 'react'; 
     
    const TodoList = () => { 
        const [inputTask, setInputTask] = useState(''); 
        const [list, setList] = useState([]); 
     
        const handleAddTodo = () => { 
            const newTask = { 
                id: Math.random(), 
                todo: inputTask 
            }; 
     
           setList([...list, newTask]); 
            setInputTask(''); 
        }; 
     
       const handleDeleteTodo = (id) => { 
            const newList = list.filter((todo) => todo.id !== id); 
            setList(newList); 
        }; 
     
       const handleInputChange = (event) => { 
            setInputTask(event.target.value); 
        }; 
     
       return ( 
            <div className="Todo"> 
                <h1>My To-Do List</h1> 
     
                <div className="Top"> 
                    <input className="input" type="text" value={inputTask} 
                       onChange={handleInputChange} placeholder="Enter a task" /> 
     
                    <button className="btn" onClick={handleAddTodo}>ADD</button> 
                </div> 
     
               <ul> 
                    { list.map((todo) => ( 
                        <li className="task" key={todo.id}> 
                            {todo.todo} 
                            <button onClick={() => handleDeleteTodo(todo.id)}> 
                               Delete 
                           </button> 
                        </li> 
                    ))} 
                </ul> 
            </div> 
        ); 
    }; 
     
    export default TodoList;

    Beginilah hasil akhir Anda, dengan tombol tambah dan hapus berfungsi seperti yang diharapkan.

    sambungkan pengontrol xbox one ke kabel pc
    Daftar tugas yang menampilkan beberapa tugas.

    Selamat, Anda telah membuat Daftar tugas yang menambah dan menghapus tugas. Anda dapat melangkah lebih jauh dengan menambahkan gaya dan lebih banyak fungsi.

    Gunakan Proyek Dunia Nyata untuk Mempelajari React

    Latihan bisa menjadi cara belajar yang efektif. Ini memungkinkan Anda untuk menerapkan konsep React dan praktik terbaik secara langsung, memperkuat pemahaman Anda tentang kerangka kerja. Ada banyak proyek di luar sana, Anda harus mencari yang tepat.