Scribd
Unggah
17 tayangan31 halaman

23 - React Event, React Lifecycle & Hooks

Diunggah oleh

andar.webdev
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
17 tayangan31 halaman

23 - React Event, React Lifecycle & Hooks

Diunggah oleh

andar.webdev
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 31

React Event, React Lifecycle & Hooks

1
Agenda

2
Agenda

● Event
● Event Handler
● Hooks
● useState
● ref & useRef

3
Event

4
Event

Dalam JavaScript, event adalah suatu hal yang bisa dilakukan ke element HTML, seperti di
click, di double click, di hover (meletakkan cursor mouse di atasnya), dll.

Untuk setiap event, kita bisa membuat sebuah event handler, yakni kode program yang
dijalankan saat event itu terjadi. Misal ketika sebuah tombol di klik, tampilkan sebuah pesan.
Atau ketika inputan form diubah, sembunyikan gambar, dst.

5
Event dan event handler inilah yang membuat efek interaktif ke sebuah halaman web. Di React, event menjadi fitur
yang sangat penting karena dengan event-lah aplikasi web menjadi
reactive.

6
7
Event Object

Di dalam JavaScript, kita juga mengenal tentang event object, yakni object yang berisi
informasi detail tentang event yang sedang terjadi.
Misalnya ketika sebuah tombol di klik, JavaScript otomatis mengirim event object ke dalam
event handler. Dari event object, kita bisa mengakses berbagai informasi seperti posisi klik,
waktu klik terjadi, hingga node object tempat klik berlangsung.

8
9
Hooks

10
Hook

Di React, hook adalah function/method yang memungkinkan kita mengakses berbagai fitur di functional component
yang sebelumnya hanya tersedia di class component. Pengertian ini memang agak "mengambang", tapi itulah
kesimpulan yang saya dapat setelah mempelajari hook.

11
Hook hadir dalam berbagai nama tergantung fitur apa yang ingin dipakai. Antara lain :
● useState()
● useRef()
● useEffect()

Hooks hanya bisa digunakan di dalam function component

12
useState

13
useState

useState() adalah hook yang dipakai untuk membuat state di functional component. State ini fungsinya tetap sama
seperti di class component, yakni sebagai tempat menyimpan data yang jika nilainya berubah, komponen akan di
render ulang.

14
Import React from ‘react’;
const [judul, setJudul] = React.useState("Belajar React");

15
Passing State

16
Passing State

Selain kita bisa mem-passing (mengirim) data props ke Child Component, kita juga bisa mem-passing State ke Child
Component. Hal ini terjadi jika, State berada di Parent Component sedangkan Event atau perubahan yang terjadi ada
pada Child Component

17
Contoh

18
Contoh

19
React Lifecycle

20
React Component Lifecycle.

Ketika membahas state, salah satu fiturnya adalah komponen akan di render ulang jika terjadi
perubahan nilai. Ini merupakan bagian dari React component lifecycle, yakni "siklus hidup" dari
sebuah komponen. Dalam bab ini kita akan bahas lebih jauh apa yang dimaksud dengan React Component Lifecycle.

21
Setiap komponen React memiliki 3 siklus dasar, yakni:
1. Mounting
2. Updating
3. Unmounting

22
● Mounting adalah waktu dimana komponen pertama kali dibuat, termasuk proses render pertama kali.
● Updating adalah peristiwa saat komponen tersebut di update, misalnya terjadi perubahan nilai state, menjalankan
method/fungsi tertentu, dst.
● Unmounting adalah waktu saat komponen itu dihapus dari struktur DOM, misalnya ketika menutup sebuah form
atau menutup jendela modal/ jendela alert.

23
24
25
ref & useRef

26
ref

Di dalam React, ref adalah sejenis variabel untuk menyimpan data yang nilainya tidak terkena
efek re-render. Karena sama-sama menyimpan data, ref ini menjadi mirip seperti state, akan
tetapi ref tidak menyebabkan proses re-render saat nilainya diubah.

27
Langsung contoh aja

28
Ref DOM Manipulation

29
Ref DOM Manipulation

Kita sempat membahas ref sebagai pengganti variabel di


functional component. Namun sebenarnya ref juga bisa dipakai untuk hal lain seperti DOM
manipulation, termasuk mengambil nilai inputan form.

30
Thankyou
Andar Pratama

31

Anda mungkin juga menyukai