Fase 2

Please Enjoy the course.

What we will learn?
1. React Navigate
2. Event handling
3. Props Component
4. React Hooks
React navigate
Di React Hal yang paling mendasar ialah membuat navigasi untuk
logika aplikasi react yang kita buat. dalam kasus sebelumnya kita
sudah menginisiasi logika aplikasi kita di App.js

Nah selanjutnya kita akan mencoba supaya aplikasi kita dapat

berpindah ke rute satu ke rute lainnya.
Menggunakan tag <a href>
vs <Link />
tag <Link> merupakan tag yang bisa kita import dari package react-router-
dom yang berfungsi untuk memindahkan tampilan satu ke tampilan lain.

Loh tapikan kita bisa menggunakan tag <a href /> ?

Well benar, tag <a> dan <Link /> merupakan fungsi yang sama untuk berpindah
halaman

Namun, keduanya memiliki perbedaan dalam proses berpindah halaman.

ketika menggunakan tag <a /> browser akan memahami bahwa kita ingin pergi
ke suatu rute dan perlu merestart ulang halaman (loading page)
Ketika menggunakan <Link /> kita perlu memberikan
Ketika kita menggunakan tag <Link />, web kita tidak memerlukan waktu atribute `to`. ia memiliki fungsi yang sama seperti href
untuk reload page, inilah perbedaan yng signifikan di antara keduanya.
useNavigate
Selanjutnya ada useNavigate. useNavigate juga memiliki fungsi 1. Langkah pertama yang kita perlukan
yang sama untuk mengubah rute tampilan. katakan disini saya adalah mengimport package useNavigate
ingin membuat logika login. apabila login berhasil maka saya akan dri react-router-dom
arahkan ke / home 2. lalu kita buat sebuah variabel yang
menampung fungsi useNavigate

Perbedaan <Link/> dan useNavigate terdapat pada

cara bagaimana aplikasi kita berpindah halaman.
ketika menggunakan <Link /> kita harus
memberikan interaksi seperti event Onclick.
sedangkan useNavigate bisa berpindah tanpa
memerlukan interaksi user.
Event Handling
Event handling adalah cara kita menangani berbagai aksi atau
Contoh Event Handling onSubmit, onChange,
peristiwa (event) yang terjadi di aplikasi, seperti klik tombol,
dan onClick
input teks, atau pengiriman formulir. Di React, event handling
dilakukan menggunakan sintaks yang mirip dengan HTML, tetapi
dengan beberapa perbedaan.

Dalam React terdapat beberapa handling event yang sering

digunakan seperti onClick, onChange, onSubmit. untuk lebih
lengkapnya bisa cek dokumentasi full tentang macam-macam
event Handling

https://react.dev/learn/separating-events-from-effects
React Props
Component
Props (singkatan dari "properties") adalah cara untuk mengirim
data dari satu komponen ke komponen lainnya. Props
memungkinkan kita untuk membuat komponen yang lebih
dinamis dan dapat digunakan kembali.

Dengan kata lain kita mengirimkan data ke component agar di

dalam component kita bisa mengolah logika bahkan menampilkan
data itu.
Studycase Props
Lets say sekrang kita sedang membuat fitur login dan register
dalam halaman React. karna Form register dan Login hampir sama
dari segi tampilan dan fungsionalitas.

Katakan kita ingin membuat beberapa Component untuk Form

nya agar mendapatkan clean code dan kemudahan dalam
membaca code
Langkah Pertama yang perlu kita lakukan adalah membuat
component, pada kali ini kita akan membuat component
Form dan SubmitBtn

variabel yang berada di const {} akan

menjadi alat tampung value yang dikirim
dari file lain

di dalam function kita harus memberikan keyword `props` agar sebuah component bisa
menampung data yang di deklarasikan di component tersebut.

di kasus ini ButtonSubmit memiliki 2 property penting yang pertama ialah actionBtn dan
text. sedangkan di Form kita memiliki action dan textBtn
Contoh Code Lengkap
ButtonSubmit.jsx
File lengkap Form.jsx

Perhatikan line 44, Saat kita ingin mengirim data ke

component kita harus menamakannya sesuai yang
kita minta di file ButtonSubmit.jsx
Selanjutnya kita perlu membuat file Register.jsx
dan Login.jsx di dalam folder pages untuk tampilan
utamanya

Dan mengimport Component <Form /> yang baru

saja kita buat lalu kita bisa daftarkan keduanya di
App.js

Well selamat sampai sini kamu telah menerapkan

Component props yang beranak dan saling terkait.
halaman /login
halaman /register
 React Hooks
Hooks adalah fitur baru di React (mulai versi 16.8) yang memungkinkan
kita menggunakan state dan fitur-fitur React lainnya tanpa perlu
membuat class component. Beberapa hooks yang umum digunakan
adalah useState dan useEffect.
UseState
Dalam pandangan saya useState merupakan sebuah variabel
yang responsive, reactive karena variabel tersebut bisa di set
ulang dan Setiap kali berubah, komponen akan dirender ulang
dengan nilai state yang baru. namun tidak akan memakan
waktu reload page.

Untuk menggunakannya kita perlu import terlebih dahulu

products merupakan nama variabelnya

setProducts merupakan function untuk mengatur ulang isi
dari sebuah variabel
useState([]) merupakan isi value dri variabel products.
pada kali ini saya mengisinya sebagai array kosong[].
namun kalian juga bisa mengisiinya dengan null, string,
number bhkan object
Contoh penggunaan useState
Berikut contoh alur useState, disini kita memiliki variabel
useState yang bernama products, dan sebuah function untuk
mengatur ulang isi variabel products yaitu setProducts

lalu kita memiliki sebuah function untuk menghandle event

onclick pada button.

di dalam function handle terdapat data dummy(data contoh),

yang kita simpan di `let products`.

lalu saya memanggil function untuk megatur ulangisi variabel

products yaitu setProducts()

maka kini variabel products memiliki data dummy yang sama.

useEffect
useEffect adalah hook yang memungkinkan kita menjalankan
efek samping (side effects) dalam komponen fungsi, seperti
fetching data, mengubah DOM, atau menjalankan operasi
setelah render.

Jadi setelah halaman sudah success di muat, maka semua

baris code yang berada di useEffect akan di jalankan

useEffect juga memiliki 2 jenis yaitu useEffect with keys dan

useEffect without key. di gambar sebelah kita sedang
menggunakan useEffect without key.

tanda [ ], mengartikan bahwa fungsi ini dijalankan hanya

sekali ketika halaman telah berhasil dimuat.
useEffect with keys

perbedaan useEffect with keys dan without key

terletak pada baris akhir. disini kita
mendeklarasikan [products] inilh yang dinamakan
key.

Intinya setiap terjadi perubahan pada varialbel

products maka function ini akan berjalan. dengan
kata lain function ini bisa berjalan beberapa kali
jikalau kondisinya terpenuhi.
What we will learn next?
1. Logika Output, if statement, dan Looping
pada React.
2. Styling inline code dan via .css file
3. Private Route
4. Study case

Please wait the next module. and keep learning

guys