Scribd
Unggah
4 tayangan

JOURNEY react.js

Diunggah oleh

agoeng2106
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
4 tayangan

JOURNEY react.js

Diunggah oleh

agoeng2106
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 3

Cara setup react.

js
- Buka git-bash
- Tulis npx create-react-app .
- Tunggu lalu lihat folder yang kamu buka,akan ada module module dari react.js

( npm: Untuk menyimpan dan mengatur semua mainanmu dalam jangka waktu lama.

 npx: Untuk meminjam mainan teman sebentar saja tanpa harus menyimpannya.

npm run dev adalah perintah di teriminal untuk menjalankan server next.js

Hubungan antar file di react.js


Hal pertama yang akan kita lakukan adalah membuka file index.js di /src ,selanjutnya kita buka
terminal dan kita tulis “npm start”,kemudian web browser akan membuka localhost:3000.

Hal kedua yang harus diperhatikan adalah file index.html di /public, ini adalah “root” dari
tampiln UI react, jadi file index.js memanggil file index.html untuk dijadikan “root” tampilan.

Hal ketiga yang harus kita perhatikan adalah di react js kita membuat tampilan UI berdasarkan
komponen,apa itu komponen? Baca dokumentasi react js.

Event handler yang bisa digunakan di react.js


1. Event Mouse

 onClick: Ditempatkan pada elemen dan dipicu ketika elemen tersebut diklik.
 onDoubleClick: Dipicu ketika elemen diklik dua kali.
 onMouseEnter: Dipicu ketika kursor mouse memasuki area elemen.
 onMouseLeave: Dipicu ketika kursor mouse meninggalkan area elemen.
 onMouseMove: Dipicu setiap kali mouse bergerak di dalam area elemen.
 onMouseDown: Dipicu saat tombol mouse ditekan.
 onMouseUp: Dipicu saat tombol mouse dilepaskan.

2. Event Keyboard

 onKeyDown: Dipicu ketika sebuah tombol ditekan.


 onKeyPress: Dipicu saat tombol karakter ditekan (deprecated di beberapa versi).
 onKeyUp: Dipicu ketika tombol dilepaskan.

3. Event Form
 onChange: Dipicu saat nilai input berubah, umumnya digunakan untuk elemen form
seperti <input>, <select>, dan <textarea>.
 onInput: Dipicu saat pengguna memasukkan data ke dalam input.
 onFocus: Dipicu saat elemen mendapatkan fokus.
 onBlur: Dipicu saat elemen kehilangan fokus.
 onSubmit: Dipicu saat form disubmit.

4. Event Touch

 onTouchStart: Dipicu ketika jari menyentuh layar.


 onTouchEnd: Dipicu ketika jari meninggalkan layar.
 onTouchMove: Dipicu saat jari bergerak di atas layar.
 onTouchCancel: Dipicu saat sentuhan dibatalkan (misalnya, saat panggilan masuk).

5. Event Clipboard

 onCopy: Dipicu saat konten disalin ke clipboard.


 onCut: Dipicu saat konten dipotong ke clipboard.
 onPaste: Dipicu saat konten ditempel dari clipboard.

6. Event Drag-and-Drop

 onDrag: Dipicu saat elemen sedang di-drag.


 onDragStart: Dipicu saat dragging dimulai.
 onDragEnd: Dipicu saat dragging selesai.
 onDragEnter: Dipicu saat elemen yang dapat di-drop dimasuki oleh elemen yang di-
drag.
 onDragLeave: Dipicu saat elemen yang di-drag meninggalkan area drop target.
 onDragOver: Dipicu saat elemen yang di-drag berada di atas elemen drop target.
 onDrop: Dipicu saat elemen yang di-drag dilepaskan di atas elemen drop target.

7. Event Wheel

 onWheel: Dipicu saat pengguna menggulir menggunakan mouse wheel atau touchpad.

8. Event Media

 onPlay: Dipicu saat media mulai diputar.


 onPause: Dipicu saat media dijeda.
 onEnded: Dipicu saat media selesai diputar.
 onVolumeChange: Dipicu saat volume media berubah.
 onTimeUpdate: Dipicu saat waktu pemutaran media berubah.

9. Event Animation
 onAnimationStart: Dipicu saat animasi dimulai.
 onAnimationEnd: Dipicu saat animasi selesai.
 onAnimationIteration: Dipicu setiap kali animasi diulang.

10. Event Transition

 onTransitionEnd: Dipicu saat transisi CSS selesai.

11. Event Scroll

 onScroll: Dipicu saat pengguna menggulir di dalam elemen.

12. Event Miscellaneous

 onError: Dipicu saat terjadi kesalahan saat memuat elemen (misalnya, gambar).
 onLoad: Dipicu saat elemen selesai dimuat.
 onLoadStart: Dipicu saat memuat dimulai.
 onLoadEnd: Dipicu saat memuat selesai.
 onAbort: Dipicu saat pemuatan dibatalkan.

useState
Untuk mengganti sebuah tampilan setelah kita menambahkan event,maka harus menggunakan
useState

Anda mungkin juga menyukai