Cara Membuat Perhitungan Dengan React JS 100% [Work]

Pada kesempatan kali ini kami akan membuat tutorial seputar Cara Membuat Perhitungan Dengan React JS dengan sederhana.

React JS sudah banyak dikenal para blogger dan para programmer. Ini adalah tutorial yang sangat bermanfaat bagi pemula, tetapi proyek seperti ini sangat berguna dalam memperkuat keterampilan Anda anda untuk merancang web berbasis React JS.

Cara Membuat Perhitungan Dengan React JS
Cara Membuat Perhitungan Dengan React JS

Berikut Tahap Membuat Perhitungan Dengan React JS:

1. Buat aplikasi baru dengan perintah berikut ini

2. Selanjutnya, buka file app.js dan hapus semua kode yang ada. kita akan menulis kode counter di sini. kita akan memulai dengan server lokal atau menjalankan aplikasi, gunakan perintah berikut:

berikut adalah video cara membuat aplikasi di react js.

Memulai

Sekarang kita akan membuat komponen fungsional sederhana di halaman app.js dan juga mengimpor seState hook. Tambahkan kode berikut di dalam file:

Membuat Komponen HTML

kita akan membuat kode HTML untuk formulir. Penataan akan kita lakukan nanti. Kita perlu membuat dua tombol dan tag span untuk menampilkan output. Akan ada tiga tombol: +, dan reset. Tambahkan kode berikut di dalam file app.js di dalam fungsi return():

Membuat Status Dan Fungsi

Sekarang kita akan membuat state yang disebut counter yang akan menyimpan nilai counter. Status awalnya akan disetel ke 0. Setiap kali pengguna mengklik + atau -, nilainya akan berubah. Nilai akan ditampilkan dalam beberapa tag. Akan ada tiga fungsi yang digunakan untuk mengontrol nilai.

  1. increase – Ini akan menambah nilai
  2. decrease – Ini akan mengurangi
  3. reset – Ini akan mengatur ulang semuanya kembali ke nol.

Berikut kode lengkapnya:

Pada kode di atas, kami telah mengubah nilai status menggunakan setCounter(). Untuk menampilkan hasilnya, kami menggunakan {count} di dalam span. Pada setiap klik ditambahkan ke setiap tombol yang berisi fungsi yang sesuai.

Cek Validasi

Sekarang kita akan menambahkan pernyataan if untuk mencegah nilai penghitung masuk ke angka negatif. Ini tidak diperlukan untuk tutorial ini karena penghitungnya benar-benar berfungsi. Tetapi itu adalah hal yang penting karena tidak praktis jika penghitung memiliki nilai negatif.

Kami akan menggunakan pernyataan if untuk membuat nilai minimum 0. Pernyataan if akan ditambahkan dalam fungsi decrease().

Pada kode di atas, nilainya akan turun jika nilai penghitung saat ini lebih dari 0.

Membuat kode CSS

Untuk Saat ini, Perintah kode yang kita masukkan tadi sebenarnya berfungsi, tetapi kurang bagus dipandang jika tanpa menggunakan css didalamnya.

Baiklah, pertama mari kita buat file baru bernama app.css (jika belum dibuat secara default) dan tambahkan kode berikut:

app.css

Menerapkan Style

Sekarang kita akan mengimpor CSS ini ke file app.js menggunakan perintah kode berikut.

yups selesai. Berikut dibawah ini adalah tampilan hasil yang kita buat.

Cara Membuat Perhitungan Dengan React JS
Cara Membuat Perhitungan Dengan React JS

Cara Membuat Perhitungan Dengan React JS 100% [Work] (Via Iwanrj.com)
Cara Membuat Perhitungan Dengan React JS 100% [Work] (Via Tobanesia.com)
Cara Membuat Perhitungan Dengan React JS 100% [Work] (Via Youtube)

Kami akan berupaya keras untuk menciptakan situs ini menjadi lebih baik lagi dengan dukungan dari anda. Jika anda menemukan error atau kesalahan menulis, kami harap agar anda segera melaporkannya kepada kami. Dengan senang hati kami menerima kritik dan saran dari anda. [Kirim Laporan]

Iwan Nainggolan
Tetaplah humoris walaupun hatimu teriris, tetaplah optimis walau jiwamu menangis. Tidak usah memustahilkan pencapaian sebab kita dilahirkan bukan karena kebetulan.