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.

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:

/* style.css */
.Aplikasi {
font-family: Sans Serif;
menampilkan: melenturkan;
membenarkan-konten: tengah;
menyelaraskan-item: tengah;
tinggi: 100vh;
}
.Melakukan {
warna latar belakang: gandum;
perataan teks: tengah;
lebar: 50%;
lapisan: 20px;
bayangan kotak: rgba(0, 0, 0, 0.24) 0px 3px 8px;
batas: mobil;
}





instagram viewer

ul {
daftar-gaya-jenis: tidak ada;
lapisan: 10px;
batas: 0;
}
tombol {
lebar: 70px;
tinggi: 35px;
warna latar belakang: coklat berpasir;
berbatasan: tidak ada;
ukuran huruf: 15px;
font-berat: 800;
radius perbatasan: 4px;
bayangan kotak: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.memasukkan {
berbatasan: tidak ada;
lebar: 340px;
tinggi: 35px;
radius perbatasan: 9px;
perataan teks: tengah;
bayangan kotak: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.Atas {
menampilkan: melenturkan;
membenarkan-konten: tengah;
celah: 12px;
}
li {
menampilkan: melenturkan;
membenarkan-konten: ruang-merata;
menyelaraskan-item: tengah;
lapisan: 10px;
}
li:sebelum {
isi: "*";
margin-kanan: 5px;
}

1. Menyiapkan 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 buat-reaksi-aplikasi 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:

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

cd todo-list

Jalankan proyek Anda secara lokal dengan perintah ini:

mulai npm

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.

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:

impor Reaksi dari'reaksi';
const Daftar Todo = () => {
kembali (



Halo Dunia </h2>
 </div>
 );
};
eksporbawaan Daftar Todo; 

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

impor Reaksi dari'reaksi';
impor'./styles.css'
impor Daftar Todo dari'./TodoList';
const Aplikasi = () => {
kembali (




 </div>
 );
};
eksporbawaan Aplikasi;

Pergi ke browser lokal Anda yang menjalankan localhost: 3000 dan periksa untuk melihat "Hello World" ditulis dengan berani. Semuanya bagus? Ke langkah selanjutnya.

3. Tangani 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.

impor Bereaksi, { useState } dari'reaksi';

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 = (peristiwa) => {
 setInputTask (event.target.nilai);
}; 

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.

"Melakukan">
Daftar Tugas Saya</h1>
"Atas">
"memasukkan" jenis="teks" nilai={inputTask}
 onChange={handleInputChange} placeholder="Masukkan tugas" />

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

"btn"> TAMBAHKAN </button>
 </div>
</div>

Pada tahap ini, seperti inilah tampilan keluaran browser Anda.

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 [daftar, 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 = (melakukan) => {
const Tugas baru = {
 pengenal: Matematika.acak(),
 yang harus dilakukan: yang harus dilakukan
 };
 setList([...daftar, tugas baru]);
 setInputTugas('');
}; 

Sertakan onClick atribut ke elemen tombol dengan teks "ADD". Ketika diklik, itu memicu handleAddTodo fungsi, yang menambahkan tugas baru ke status daftar

 handleAddTodo (inputTask)}>TAMBAH</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 melakukan iterasi melalui 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 = (pengenal) => {
const DaftarBaru = daftar.filter((melakukan) =>
 todo.id !== id
 );
 setList (DaftarBaru); 
};

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

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

<ul>
{ daftar.peta((melakukan) => (
<linama kelas="tugas"kunci={todo.id}>
 {todo.todo}
<tombolonClick={() => handleDeleteTodo (todo.id)}>Hapustombol>
li>
))}
ul>

Seperti inilah tampilan kode akhir Anda:

impor Bereaksi, { useState } dari'reaksi';
const Daftar Todo = () => {
const [InputTask, setInputTask] = useState('');
const [daftar, setList] = useState([]);
const handleAddTodo = () => {
const Tugas baru = {
 pengenal: Matematika.acak(),
 yang harus dilakukan: inputTask
 };
 setList([...daftar, Tugas baru]);
 setInputTugas('');
 };
const handleDeleteTodo = (pengenal) => {
const DaftarBaru = daftar.filter((melakukan) => todo.id !==id);
 setList (DaftarBaru);
 };
const handleInputChange = (peristiwa) => {
setInputTask(peristiwa.target.nilai);
 };
kembali (
<divnama kelas="Melakukan">

Ke-MelakukanDaftar

<divnama kelas="Atas">
<memasukkannama kelas="memasukkan"jenis="teks"nilai={inputTask}
 onChange={handleInputChange} placeholder="Masukkan tugas" />
<tombolnama kelas="btn"onClick={handleAddTodo}>MENAMBAHKANtombol>
div>
<ul>
 { daftar.peta((melakukan) => (
<linama kelas="tugas"kunci={todo.id}>
 {todo.todo}
<tombolonClick={() => handleDeleteTodo (todo.id)}>
Menghapus
tombol>
li>
 ))}
ul>
div>
 );
};
eksporbawaan Daftar Todo; 

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

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 menemukan yang tepat.