Cara Membuat Aplikasi Penghitung Sederhana di React

React adalah salah satu pustaka JavaScript front-end paling populer. Banyak perusahaan menggunakan React untuk mengembangkan antarmuka pengguna mereka dan ini mendapatkan popularitas yang luas di kalangan pengembang.

Sangat mudah untuk membuat program sederhana dengan React, seperti aplikasi penghitung dasar ini. Memulai dengan tutorial langsung akan membantu Anda memahami beberapa konsep dasar tetapi penting dari React.

Fitur Aplikasi Penghitung

Dalam proyek ini, Anda akan mengembangkan aplikasi penghitung dengan fitur-fitur berikut:

1. Tambah Tombol Hitung: Ini akan menambah hitungan satu per satu.
2. Kurangi Tombol Hitung: Ini akan mengurangi hitungan satu per satu.
3. Tombol Atur ulang: Ini akan mengatur hitungan ke nol.

Konsep Dasar Bereaksi

Sebelum melanjutkan, Anda perlu memahami beberapa konsep dasar di React yang akan Anda gunakan dalam proyek ini:

1. Komponen: Komponen adalah blok bangunan inti dari aplikasi React. Mereka berisi kode independen yang dapat digunakan kembali. Dengan menggunakan komponen, Anda dapat membagi antarmuka pengguna menjadi beberapa bagian terpisah. Anda kemudian dapat menggunakan kembali bagian-bagian itu dan mengerjakannya secara mandiri.
2. Negara: Di Bereaksi Anda dapat menggunakan objek untuk menyimpan data yang mewakili status komponen. Hal ini memungkinkan komponen untuk mengelola dan memperbarui data mereka sendiri. Status komponen menentukan cara merender dan berperilaku.
3. Komponen Fungsional: Komponen Fungsional React hanyalah sebuah fungsi JavaScript yang menerima props sebagai argumen dan mengembalikan elemen React (JSX).
4. Atribut: Anda dapat menggunakan props—kependekan dari "properties"—untuk meneruskan data dari komponen induk ke komponen anak. Props adalah salah satu bagian integral dari React dan Anda bisa gunakan props untuk melakukan beberapa operasi di React.
5. Kait: React Hooks adalah fungsi bawaan yang memungkinkan Anda mengelola status dan fitur React lainnya seperti metode siklus hidup di dalam komponen fungsional. Mereka juga dapat membantu Anda menulis kode yang ringkas dan jelas. Anda akan segera melihat bagaimana Anda dapat mengelola status dengan useState() kait.

Kode yang digunakan dalam proyek ini tersedia di a repositori GitHub dan gratis untuk Anda gunakan di bawah lisensi MIT.

Langkah 1: Menyiapkan Proyek

Buka terminal Anda dan jalankan perintah berikut untuk memulai:

npx membuat-reaksi-aplikasi reaksi-kontra-aplikasi

Ini akan buat aplikasi reaksi baru, siap untuk Anda mulai membangun proyek Anda. Ini akan menghasilkan struktur sistem file dengan beberapa file dan folder.

Jalankan perintah berikut di terminal untuk memulai server pengembangan:

npm awal

Perintah itu akan membuka tab baru di browser Anda, menunjuk ke http://localhost: 3000. Semua perubahan yang akan Anda lakukan pada proyek akan diperbarui secara otomatis di sini.

Langkah 2: Membuat Kerangka Aplikasi Penghitung

Buka src/App.js file dan hapus semua kode default yang ada di sana. Sekarang, buat kerangka aplikasi menggunakan kode berikut:

impor Bereaksi, { useState } dari"reaksi";
fungsiAplikasi() {
const [hitung, setCount] = useState(0);
membiarkan pertambahanHitung = () => {
// Untuk menambahkan nanti
 };
membiarkan pengurangan Hitung = () => {
// Untuk menambahkan nanti
 };
membiarkan reset Hitung = () => {
// Untuk menambahkan nanti
 }
kembali (
<divnama kelas="aplikasi">
<P>Hitung: {hitung}P>
<divnama kelas="tombol">
div>
div>
);
}
eksporbawaan Aplikasi;

Pernyataan pertama mengimpor useState kait dari reaksi modul. Gunakan untuk membuat menghitung menyatakan dan menginisialisasi ke 0. Anda dapat mengubah nilai dari menghitung menggunakan setHitung fungsi.

Anda akan menggunakan pertambahanHitung, penguranganHitung, Dan reset Hitung fungsinya nanti untuk menambah, mengurangi, dan me-reset nilai counter.

Anda mungkin memperhatikan tanda kurung kurawal { } yang digunakan di sekitar variabel hitungan di markup. Ini pada dasarnya membuat parser JSX mengetahui bahwa ia harus memperlakukan konten di dalam kurung tersebut sebagai JavaScript.

Langkah 3: Menambahkan Fungsi ke Aplikasi Penghitung

Anda perlu membuat tiga tombol untuk mengimplementasikan fungsionalitas aplikasi penghitung: tombol hitungan pengurangan, tombol hitungan kenaikan, dan tombol reset. Tambahkan kode berikut di dalam tombol div:

<Tomboljudul={"Pengurangan"} tindakan={decrementCount} />
<Tomboljudul={"Kenaikan"} tindakan={incrementCount} />
<Tomboljudul={"Mengatur ulang"} tindakan={resetCount} />

Ketika Anda mengklik tombol-tombol ini, penguranganHitung, pertambahanHitung, Dan reset Hitung fungsi akan berjalan. Perhatikan bahwa Anda melewati judul Dan tindakan penyangga dari induknya Aplikasi komponen kepada anak Tombol komponen.

Perbarui fungsi-fungsi ini di Aplikasi.js file dengan kode berikut:

membiarkan pertambahanHitung = () => {
 setCount (hitung + 1);
};
membiarkan pengurangan Hitung = () => {
 setCount (hitung - 1);
};
membiarkan reset Hitung = () => {
 set Hitung (0);
}

Itu setHitung fungsi akan memperbarui keadaan menghitung.

Perhatikan bahwa Anda belum membuat komponen Button. Buat yang baru komponen folder di src direktori dan kemudian buat file baru bernama Button.js. Merupakan praktik yang baik untuk menyimpan semua komponen di folder yang sama.

Tambahkan kode berikut di komponen/Button.js mengajukan:

impor Reaksi dari"reaksi";
fungsiTombol(Atribut) {
membiarkan { aksi, judul } = properti;
kembali<tombolonClick={tindakan}>{judul}tombol>;
}
eksporbawaan Tombol;

Itu Tombol komponen menerima data melalui alat peraga. Fungsi kemudian menyusun props ini menjadi variabel terpisah, menggunakannya untuk mengisi markup yang dikembalikannya.

Kode menggunakan kembali komponen ini tiga kali untuk membuat tombol kenaikan, penurunan, dan reset.

Terakhir, impor komponen Tombol di bagian atas Aplikasi.js halaman menggunakan kode berikut:

impor Tombol dari"./komponen/Botton";

Ini adalah bagaimana kode akhir akan terlihat di Aplikasi.js mengajukan:

impor Bereaksi, { useState } dari"reaksi";
impor Tombol dari"./komponen/Tombol";
fungsiAplikasi() {
const [hitung, setCount] = useState(0);
membiarkan pertambahanHitung = () => {
 setCount (hitung + 1);
 };
membiarkan pengurangan Hitung = () => {
 setCount (hitung - 1);
 };
membiarkan reset Hitung = () => {
 set Hitung (0);
 }
kembali (
<divnama kelas="aplikasi">
<P>Hitung: {hitung}P>
<divnama kelas="tombol">
<Tomboljudul={"Pengurangan"} tindakan={decrementCount} />
<Tomboljudul={"Kenaikan"} tindakan={incrementCount} />
<Tomboljudul={"Mengatur ulang"} tindakan={resetCount} />
div>
div>
 );
}
eksporbawaan Aplikasi;

Ikuti Praktik Reaksi Terbaik

Anda dapat menulis kode React dengan cara yang berbeda, tetapi penting untuk menyusunnya sebersih mungkin. Ini akan memastikan Anda dapat memeliharanya dengan mudah dan dapat membantu meningkatkan kinerja keseluruhan aplikasi Anda.

Anda dapat mengikuti beberapa praktik React yang direkomendasikan oleh komunitas React seperti menghindari kode berulang, menulis tes untuk setiap komponen React, menggunakan penghancuran objek untuk props, dan mengikuti penamaan konvensi.