ReactJs Cara Parse Variabel Parameter antar component
TweetDalam pengembangan aplikasi web modern menggunakan React.js, salah satu konsep penting yang perlu dikuasai adalah bagaimana mengelola state aplikasi dan meneruskan data antar komponen. React.js mengikuti pola arsitektur komponen, di mana aplikasi dibagi menjadi komponen-komponen yang lebih kecil dan reusable. Dengan pendekatan ini, kita dapat memisahkan kepedulian dan meningkatkan modularitas kode. Dalam contoh kode yang diberikan, kita akan melihat bagaimana React.js memfasilitasi parsing variabel antar komponen melalui konsep props (properties) dan state. Mari kita tinjau kode tersebut secara terperinci.
Cara kerja code :
Perhatikan gambar Tampilan Program di atas. di sana terdapat 3 komponen utama, yaitu :
1. Input nama,
2. Tombol submit,
3. Text (Nama) untuk menampilkan berdasarkan event (realtime) nama yang diinput pada componen input nama
4. Text (Nama After Submit) untuk menampilkan hanya setelah tombol submit ditekan
Tujuan utama kita adalah membuat ke 4 componen tersebut bisa mengakses variabel yang sama. atau lebih tepatnya ke 4 komponen di atas bisa saling terhubung.
Untuk codenya adalah berikut ini App.js :
Butuh jasa pembuatan aplikasi skripsi, harga 1 jtan pengerjaan cepat,
hubungi Wa: 0856 0178 8364
Penjelasan :
Komponen InputNama
Komponen InputNama adalah komponen fungsional React yang menerima dua props: nama dan setNama. nama adalah variabel yang menampung nilai dari input teks, sedangkan setNama adalah fungsi yang digunakan untuk memperbarui nilai nama.
Dalam komponen ini, terdapat sebuah fungsi handleChange yang dipanggil setiap kali pengguna mengetik di input teks. Fungsi ini memanggil setNama dengan nilai terbaru dari input teks, yang kemudian memperbarui state nama di komponen induk (App).
Komponen Tombol
Komponen Tombol adalah komponen fungsional React yang menerima dua props: handleSubmit dan nama. handleSubmit adalah fungsi yang akan dipanggil saat tombol diklik, sedangkan nama adalah variabel yang menampung nilai dari input teks.
Komponen ini hanya menampilkan sebuah tombol dengan teks "Submit: {nama}". Saat tombol diklik, fungsi handleSubmit akan dipanggil.
Komponen App
Komponen App adalah komponen utama dari aplikasi ini. Di dalam komponen ini, kita menggunakan hook useState dari React untuk mengelola dua variabel state: nama dan namaAfterSubmit.
nama adalah variabel yang menampung nilai dari input teks, sedangkan namaAfterSubmit adalah variabel yang akan menyimpan nilai nama setelah tombol "Submit" diklik.
Komponen App juga memiliki sebuah fungsi handleSubmit yang dipanggil saat tombol "Submit" diklik. Fungsi ini melakukan dua hal:
Mencetak nilai nama ke konsol
Memperbaharui nilai namaAfterSubmit dengan nilai nama saat ini
Dalam JSX (sintaks markup React), komponen App me-render komponen InputNama dan Tombol, serta menampilkan nilai nama dan namaAfterSubmit dalam elemen
.
Parsing Variabel antar Komponen
Dalam contoh kode ini, kita dapat melihat bagaimana variabel nama diparsing (diteruskan) ke komponen-komponen lain melalui props. Alur parsing variabel adalah sebagai berikut:
Komponen App memiliki state nama yang diinisialisasi dengan nilai "nama".
Komponen App me-render komponen InputNama dan meneruskan nilai nama serta fungsi setNama sebagai props.
Dalam komponen InputNama, nilai nama digunakan sebagai nilai dari input teks. Saat pengguna mengetik di input teks, fungsi handleChange akan memanggil setNama dengan nilai terbaru dari input teks.
Karena setNama adalah fungsi yang diteruskan dari komponen App, pemanggilan setNama akan memperbarui state nama di komponen App.
Komponen App juga me-render komponen Tombol dan meneruskan nilai nama serta fungsi handleSubmit sebagai props.
Saat tombol diklik, fungsi handleSubmit dipanggil, yang kemudian mencetak nilai nama ke konsol dan memperbarui nilai namaAfterSubmit dengan nilai nama saat ini.
Dengan demikian, kita dapat melihat bagaimana variabel nama diparsing dari komponen App ke komponen InputNama dan Tombol melalui props, dan bagaimana perubahan pada nama di komponen InputNama mempengaruhi state di komponen App melalui fungsi setNama.
Contoh kode ini menunjukkan bagaimana React.js memfasilitasi aliran data satu arah (one-way data flow) dari komponen induk ke komponen anak melalui props, dan bagaimana komponen anak dapat mempengaruhi state di komponen induk melalui fungsi callback yang diteruskan sebagai props.
Pemahaman tentang konsep parsing variabel antar komponen dalam React.js sangat penting untuk membangun aplikasi web yang kompleks dan berskala besar. Dengan memahami bagaimana data mengalir dan dikelola dalam arsitektur komponen React, Anda dapat membangun aplikasi web yang modular, mudah dipelihara, dan efisien.
Portofolio
Berikut kami tampilkan beberapa portofolio yang pernah kami kerjakan. Lihat Selengkapnya
-untuk-Prediksi-Pergerakan-Harga-Forex.jpg)
Oleh : Firda
Tanggal Publikasi :
Bebas DP bagi Skripsi dengan Judul dan Konsep yang Jelas
Sisa Kuota 2
Sisa Waktu : : : :
