Modul React Js

Pengenalan React Js
Apa itu React Js?
React itu kayak alat sihir buat bikin tampilan keren di website. Ditemukan di Facebook
dan dilepas ke dunia pada 2013, sejak itu, banyak aplikasi keren, termasuk Facebook
dan Instagram, pakai ini. Ide pokoknya sih biar gampang ngerti dan bisa pantengin
tampilan dan keadaan di layar kita setiap saat. Nah, supaya lebih mudah, mereka
pecahin tampilan jadi potongan-potongan kecil yang disebut komponen. Jadi, bayangin
aja kayak Lego, bisa dirakit sesuai keinginan! Mantap kan buat mahasiswa IT yang lagi
eksplor hal-hal seru di dunia coding!🚀
Kenapa React banyak digunakan?
React bikin heboh dunia pengembangan web. Kenapa yaa?

Lebih simpel dibanding yang lain.

Dulu, waktu React muncul, Ember.js dan Angular 1.x jadi andalan. Tapi
keduanya ribet banget, bikin mindahin aplikasi yang sudah ada jadi ga nyaman.
Nah, React milih jadi yang gampang diselipin ke proyek yang sudah ada. Di
Facebook juga gitu, harus nyatuin dengan kode yang sudah ada. Lagian, dua
framework itu bawaannya kebanyakan, sementara React cuma fokus di lapisan
Tampilan aja, ga sampe seluruh tumpukan MVC.

Pas banget sama waktunya.

Waktu itu, Google ngumumin Angular 2.x, tapi bakal bikin ribet karena beda
banget sama yang lama. Pindah dari Angular 1 ke 2 itu kayak pindah ke
framework baru. Nah, ini, ditambah janji React buat benerin kecepatan
eksekusinya, jadi yang bikin para developer penasaran buat nyobain.

Apakah React mudah dipelajari?

Modul React Js 1
 Walaupun dibilang React lebih gampang daripada framework lain, belajar React tetap
agak ribet, terutama karena teknologi pendukung kayak Redux dan GraphQL.
Tapi, intinya, React sendiri itu simpel banget, cuma perlu paham 4 konsep aja buat
mulai:

Komponen

JSX

Status (State)

Properti (Props)

Bagaimana cara install React Js?

Use create-react-app

create-react-app itu kayak temen setia buat bikin kamu jago React dengan cepat
banget! Khususnya buat aplikasi React yang butuh lebih dari satu halaman. Awalnya,
kita mulai pake npx, yang artinya kita bisa download dan jalankan perintah Node.js
dengan mudah tanpa perlu install apa-apa. npx udah ada di npm (sejak versi 5.2), dan
kalau belum punya npm, langsung aja install dari https://nodejs.org (npm ikut terinstal
sama Node).Kalau gak yakin versi npm-nya apa, cek aja dengan nulis npm -v. Mungkin
ada yang perlu diupdate! 🚀 Pas kamu ngetik npx create-react-app <nama-aplikasi>,
npx bakal download yang paling baru dari create-react-app, jalanin, terus hapus dari
komputer kamu. Enaknya, jadi gak pernah punya versi lama, tiap kali jalankan langsung
dapet kode terbaru dan paling keren yang ada. Seru, kan?

Modul React Js 2
 Kemudian berikut ini tampilan ketika berhasil :

Modul React Js 3
 Pas kamu pakai create-react-app, dia bikin rangkaian file di dalam folder yang kamu
pilih (misalnya, todolist) dan langsung bikin repository Git.

Mereka juga nambahin beberapa perintah di file package.json, jadi kamu bisa langsung
buka aplikasinya dengan masuk ke folder dan ketik npm start.
Selain npm start, create-react-app menambahkan beberapa perintah lain:

npm run build: untuk membangun file aplikasi React di dalam folder build, siap
untuk di-deploy ke server.

npm test: untuk menjalankan suite pengujian menggunakan Jest.

npm eject: untuk keluar dari create-react-app.

Ejecting itu kayak kamu bilang, "Ok, create-react-app udah bantu banyak, tapi sekarang
aku pengen lebih banyak lagi." Jadi, meskipun kamu kehilangan pembaruan otomatis,

Modul React Js 4
 tapi kamu jadi lebih bebas mau ngatur Babel dan Webpack.

Tapi perlu diingat, eject itu keputusan yang gak bisa dibalikin. Pas kamu eject, ada 2
folder baru di aplikasimu, yaitu config dan scripts. Nah, di situ lah konfigurasinya -
sekarang kamu bisa mulai main-main sendiri! 🚀
Seberapa banyak Js digunakan di React?
Kalau kamu mau belajar React, sebaiknya kamu tahu beberapa hal dasar dulu. Ada
beberapa teknologi yang perlu kamu kenal, terutama yang terkait dengan fitur-fitur
terbaru JavaScript yang bakal sering kamu pakai di React.

Terkadang orang berpikir fitur tertentu itu dari React, tapi sebenarnya itu cuma sintaks
JavaScript. Gak perlu jadi ahli langsung dalam semua itu, tapi semakin kamu main-
main sama React, nanti bakal makin butuh mengerti.

Nah, berikut ada list hal-hal yang bakal bantu kamu cepat paham dasar-dasar React.
🚀
Variabel
Variabel itu kayak simpanan nilai yang punya nama, jadi nanti bisa dipanggil dan
dipakai dalam program. Yuk, pelajari cara bikin satu dengan JavaScript.

Variabel itu kayak simpanan nilai yang punya nama, jadi nanti bisa dipanggil dan
dipakai dalam program. Nah, yang seru, variabel di JavaScript gak punya tipe tertentu.
Setelah kamu kasih nilai tertentu ke variabel, nanti bisa diganti dengan nilai lain tanpa
masalah. Makanya, JavaScript sering disebut "tanpa tipe".

Tapi perlu diingat, sebelum bisa dipake, variabel harus dideklarasikan dulu. Ada 3 cara
buat deklarasi, pakai var, let, atau const. Dan ketiga cara itu beda cara kamu bisa main-
main sama variabelnya nanti.

Var

Sebelum ES2015, var adalah satu-satunya cara yang tersedia

untuk mendefinisikan variabel.

Modul React Js 5
 Jika kamu lupa menambahkan var, kamu akan memberikan nilai
pada variabel yang belum dideklarasikan, dan hasilnya bisa
bervariasi.Di lingkungan modern, dengan mode ketat diaktifkan,
kamu akan mendapatkan kesalahan. Di lingkungan yang lebih lama
(atau dengan mode ketat dinonaktifkan), ini hanya akan
menginisialisasi variabel dan memberikannya ke objek global. Jika
kamu tidak menginisialisasi variabel saat mendeklarasikannya,
nilainya akan menjadi undefined sampai kamu memberikan nilai
padanya.

Kamu bisa mendeklarasikan ulang variabel berkali-kali,

berkesinambungan seperti ini:

Kamu juga bisa mendeklarasikan beberapa variabel sekaligus

dalam satu pernyataan yang sama:

scope adalah bagian kode di mana variabel terlihat.

Modul React Js 6
 Sebuah variabel yang diinisialisasi dengan var di luar fungsi akan
diassign ke objek global, memiliki ruang lingkup global, dan terlihat
di mana-mana. Sebuah variabel yang diinisialisasi dengan var di
dalam sebuah fungsi diassign ke fungsi tersebut, bersifat lokal, dan
hanya terlihat di dalamnya, seperti parameter fungsi.

Setiap variabel yang didefinisikan dalam sebuah fungsi dengan

nama yang sama seperti variabel global akan mengambil prioritas
di atas variabel global, menyembunyikannya.

Penting untuk dipahami bahwa blok kode (dikenali oleh sepasang

kurung kurawal) tidak menentukan cakupan baru. Cakupan baru
hanya dibuat saat fungsi dibuat, karena var tidak memiliki cakupan
blok, melainkan cakupan fungsi.
Di dalam sebuah fungsi, variabel apapun yang didefinisikan di
dalamnya terlihat di seluruh kode fungsi, bahkan jika variabelnya
dideklarasikan di akhir fungsi, tetap bisa dipanggil di awal. Ini
karena JavaScript sebelum menjalankan kode, sebenarnya
memindahkan semua variabel ke atas (sesuatu yang disebut
hoisting). Untuk menghindari kebingungan, selalu deklarasikan
variabel di awal fungsi.

Let

let adalah fitur baru yang diperkenalkan dalam ES2015 dan pada
dasarnya merupakan versi yang memiliki cakupan blok dari var.
Cakupannya terbatas pada blok, pernyataan, atau ekspresi di mana
variabel tersebut didefinisikan, serta semua blok yang terdapat di
dalamnya.

Modul React Js 7
 Pengembang JavaScript modern mungkin memilih untuk hanya
menggunakan let dan sepenuhnya menghindari penggunaan var.

Mendefinisikan let di luar fungsi - berbeda dengan var - tidak

membuat variabel global.

Const

Variabel yang dideklarasikan dengan var atau let bisa diubah nanti
dalam program dan di-assign ulang. Namun, begitu const
diinisialisasi, nilainya tidak bisa diubah lagi, dan tidak bisa di-assign
ulang dengan nilai yang berbeda. Ini seperti kontrak bahwa nilai
const akan tetap konstan sepanjang program.

Kita tidak bisa mengassign literal yang berbeda ke sebuah const.

Namun, kita bisa mengubah (mutate) const jika itu adalah objek
yang menyediakan metode-metode yang mengubah isinya.
const tidak memberikan kekekalan (immutability), hanya
memastikan bahwa referensi tidak dapat diubah. const memiliki
cakupan blok, sama seperti let.

Pengembang JavaScript modern mungkin memilih untuk selalu

menggunakan const untuk variabel yang tidak perlu di-assign ulang
nanti dalam program.

Arrow functions
Arrow Functions merupakan salah satu perubahan paling berdampak di ES6/ES2015,
dan sekarang digunakan secara luas. Secara visual, ini adalah perubahan yang

Modul React Js 8
 sederhana dan menyenangkan, yang memungkinkan kamu menulis fungsi dengan
sintaks yang lebih singkat, dari:

Menjadi :

Jika ingin hanya berisi satu pernyataan, kamu bisa menghilangkan kurung kurawal dan
menulis semuanya dalam satu baris:

Parameter yang diimplementasikan melalui tanda kurung:

Jika kamu hanya memiliki satu parameter, kamu bisa sepenuhnya menghilangkan
tanda kurung:

Berkat sintaks singkat ini, arrow functions mendorong kemudahan dalam penulisan.

Implicit return
Arrow functions memungkinkan kamu memiliki return implisit: nilai-nilai dikembalikan
tanpa harus menggunakan kata kunci return.

Modul React Js 9
 Implicit return ini berfungsi ketika ada satu pernyataan dalam function body :

Contoh lain, ketika mengembalikan sebuah objek, ingatlah untuk membungkus kurung
kurawal dalam tanda kurung untuk menghindari dianggap sebagai pembungkus dari
function body:

How this works in arrow functions

Konsep ini bisa sulit dipahami karena sangat bervariasi tergantung pada konteks dan
juga berubah tergantung pada mode JavaScript (strict mode atau tidak). Penting untuk
menjelaskan konsep ini karena arrow functions berperilaku sangat berbeda
dibandingkan dengan fungsi reguler.

Ketika didefinisikan sebagai metode suatu objek, pada fungsi reguler, this merujuk pada
objek tersebut, sehingga kamu bisa melakukan:

Namun, perlu diingat bahwa perilaku this dapat berubah dalam konteks arrow functions.
Memanggil car.fullName() akan mengembalikan "Ford Fiesta". Ini diasumsikan bahwa
car adalah objek yang memiliki properti fullName yang merupakan suatu fungsi, dan
fungsi tersebut mengembalikan string "Ford Fiesta".

Modul React Js 10
 Cakupan this pada arrow function diwarisi dari konteks eksekusi. Sebuah arrow function
sama sekali tidak membinding this, sehingga nilainya akan dicari di dalam call stack.
Oleh karena itu, dalam kode ini, car.fullName() tidak akan berfungsi dan akan
mengembalikan string "undefined undefined":

Karena hal ini, arrow functions tidak cocok digunakan sebagai metode objek. Arrow
functions juga tidak dapat digunakan sebagai konstruktor; saat menginstansiasi objek,
akan muncul TypeError.
Di sinilah fungsi reguler seharusnya digunakan, terutama dynamic context dinamis tidak
diperlukan.
Hal ini juga menjadi masalah ketika menangani peristiwa (events). Pemantau peristiwa
(event listeners) DOM mengatur this untuk menjadi elemen target, dan jika Anda
mengandalkan this dalam penanganan peristiwa, diperlukan regular

function:

Modul React Js 11
 Work with objects and arrays using Rest and Spread
Dua teknik modern untuk bekerja dengan array dan objek di JavaScript melibatkan
operator spread ( …) . Mari kita mulai dengan contoh array.

Kamu bisa membuat array baru dengan mengikutsertakan array yang sebelumnya
dengan cara seperti ini :

kamu juga dapat membuat salinan dari sebuah array menggunakan

Ini juga berlaku untuk objek. Clone (membuat salinan) sebuah objek dengan cara :

menggunakan string, operator spread membuat array dengan setiap karakter dalam
string:

operator ini memiliki beberapa aplikasi yang sangat berguna. Salah satu yang paling
penting adalah kemampuannya untuk menggunakan array sebagai argumen fungsi
dengan cara yang sangat sederhana:

Modul React Js 12
 Rest Element berguna ketika bekerja dengan destrukturisasi array:

Contoh penulisan Spread Elements :

Rest Properties :

Spread Properties :

Object and array destructuring

Modul React Js 13
 Selanjutnya kita akan mempelajari cara menggunakan sintaks destrukturisasi untuk
bekerja dengan array dan objek dalam JavaScript. Dengan menggunakan sintaks
destrukturisasi pada objek, kamu dapat mengekstrak hanya beberapa nilai dan
menempatkannya ke dalam variabel yang dinamai:

Syntax juga berjalan dengan penerapan arrays sebagai berikut :

Syntax ini akan membuat 3 variabel baru dengan mengambil elemen pada indeks 0, 1,
dan 4 dari array a.

Template literals
Template Literals adalah fitur baru dalam ES2015 / ES6 yang memungkinkan Anda
bekerja dengan string secara baru dibandingkan dengan ES5 dan versi sebelumnya.
Sintaksnya pada pandangan pertama sangat sederhana, cukup gunakan backticks (`)
seperti berikut ini:

Template Literals unik karena menyediakan banyak fitur yang tidak dimiliki oleh string
biasa yang dibuat dengan tanda kutip, terutama:

Modul React Js 14
 1. Menawarkan sintaks yang baik untuk mendefinisikan string multiline.

2. Menyediakan cara mudah untuk interpolasi variabel dan ekspresi dalam string.

3. Memungkinkan Anda membuat DSL (domain specific language) dengan template

tags. DSL adalah bahasa khusus domain, dan contohnya digunakan dalam React
oleh Styled Components untuk mendefinisikan CSS untuk sebuah komponen.

Mari kita telusuri masing-masing secara detail.

1. Multiline Strings

Template Literals menyediakan cara yang lebih baik untuk mendefinisikan string
multiline seperti berikut ini:

1. Interpolation

Anda dapat dengan mudah menyisipkan variabel dan ekspresi ke dalam string:

2. Membuat DSL dengan Template Tags

Template Literals memungkinkan pembuatan DSL dengan template tags. Ini

memungkinkan penanganan khusus pada string menggunakan fungsi yang
disebut template tags.

Classes
Pada tahun 2015, standar ECMAScript 6 (ES6) memperkenalkan konsep kelas.
JavaScript memiliki cara implementasi pewarisan yang agak tidak umum: pewarisan
prototipe. Pewarisan prototipe, meskipun menurut pendapat saya hebat, berbeda
dengan implementasi pewarisan yang umum ditemui dalam bahasa pemrograman
lainnya, yang menggunakan kelas.

Orang-orang yang berasal dari Java, Python, atau bahasa lain seringkali kesulitan
memahami kompleksitas pewarisan prototipe. Oleh karena itu, komite ECMAScript
memutuskan untuk menambahkan "gula sintaksis" di atas pewarisan prototipe agar

Modul React Js 15
 lebih mirip dengan cara pewarisan berbasis kelas pada implementasi bahasa populer
lainnya.
Penting untuk dicatat: JavaScript di bawahnya tetap sama, dan kamu masih dapat
mengakses prototipe objek dengan cara yang biasa.

Inilah tampilan dari sebuah kelas.

Sebuah kelas memiliki pengidentifikasi, yang dapat kita gunakan untuk membuat objek
baru menggunakan new ClassIdentifier().
Ketika objek diinisialisasi, metode konstruktor dipanggil, dengan parameter-parameter
yang dilewatkan.
Sebuah kelas juga memiliki sebanyak mungkin metode yang diperlukan. Dalam hal ini,
hello adalah sebuah metode dan dapat dipanggil pada semua objek yang berasal dari
kelas ini.

Class inheritance
Sebuah kelas dapat memperluas kelas lain, dan objek yang diinisialisasi menggunakan
kelas tersebut mewarisi semua metode dari kedua kelas.
Jika kelas yang diwarisi memiliki metode dengan nama yang sama dengan salah satu
kelas yang lebih tinggi dalam hirarki, metode yang paling dekat akan memiliki prioritas:

Modul React Js 16
 (Program di atas mencetak "Halo, saya Flavio. Saya seorang programmer.")
Kelas-kelas tidak memiliki deklarasi variabel kelas eksplisit, tetapi Anda harus
menginisialisasi setiap variabel di dalam konstruktor.
Di dalam sebuah kelas, Anda dapat merujuk pada kelas induk dengan memanggil

Static methods
Biasanya, metode-metode didefinisikan pada instansi, bukan pada kelas.
Metode statis dieksekusi pada kelas itu sendiri:

Getters and setters

Kamu dapat menambahkan metode yang diawali dengan get atau set untuk membuat
getter dan setter, yang merupakan dua bagian kode yang berbeda yang dieksekusi
berdasarkan apa yang kamu lakukan: mengakses variabel atau memodifikasi nilainya.

Modul React Js 17
 Jika kamu hanya memiliki getter, properti tersebut tidak dapat diatur, dan setiap upaya
untuk melakukannya akan diabaikan:

Jika kamu hanya memiliki setter, kamu dapat mengubah nilai tetapi tidak dapat
mengaksesnya dari luar:

Modul React Js 18
 Promises
Promise merupakan salah satu cara untuk menangani kode asinkron dalam JavaScript
tanpa perlu menulis terlalu banyak callback dalam kode kamu. Sebuah promise
umumnya didefinisikan sebagai proksi untuk nilai yang akan menjadi tersedia pada
suatu saat.
Meskipun promise telah ada selama bertahun-tahun, mereka dijadikan standar dan
diperkenalkan dalam ES2015, dan sekarang telah digantikan oleh fungsi async pada
ES2017. Fungsi async menggunakan API promise sebagai bahan pembangunnya,
sehingga pemahaman terhadap promise tetap mendasar meskipun dalam kode yang
lebih baru, kemungkinan besar kamu akan menggunakan fungsi async alih-alih
promise.

Bagaimana Promise Bekerja, Secara Singkat?

Setelah sebuah promise dipanggil, ia akan memulai dalam keadaan pending. Ini berarti
bahwa fungsi pemanggil akan melanjutkan eksekusi, sambil menunggu promise untuk
melakukan pemrosesan sendiri, dan memberikan umpan balik kepada fungsi
pemanggil. Pada titik ini, fungsi pemanggil menunggu promise untuk mengembalikan
dirinya dalam keadaan terpenuhi (resolved) atau keadaan ditolak (rejected), tetapi
seperti yang kamu tahu, JavaScript bersifat asinkron, sehingga fungsi tetap melanjutkan
eksekusinya sementara promise melakukan pekerjaannya.

Apa saja API JS yang sering digunakan dalam

pengimplementasian Promise?
In addition to your own code and library code, promises are used by standard modern
Web APIs such as: the Battery API the Fetch API Service Workers It's unlikely that in
modern JavaScript you'll find yourself not using promises, so let's start diving right into
them.

Creating a promise
API Promise mengekspos konstruktor Promise, yang kamu inisialisasi menggunakan
new Promise():

Modul React Js 19
 Seperti yang dapat kamu lihat, promise memeriksa konstanta global done, dan jika
bernilai true, kita mengembalikan promise yang terpenuhi (resolved), jika tidak, kita
mengembalikan promise yang ditolak (rejected).

Dengan menggunakan resolve dan reject, kita dapat mengirimkan kembali sebuah nilai,
dalam kasus di atas kita hanya mengembalikan sebuah string, tetapi bisa juga berupa
objek.

Consuming a promise
Pada bagian sebelumnya, kita memperkenalkan bagaimana sebuah promise dibuat.
Sekarang mari kita lihat bagaimana promise dapat dikonsumsi atau digunakan.

Menjalankan checkIfItsDone() akan menjalankan promise isItDoneYet() dan akan

menunggu hingga promise tersebut terpenuhi (resolved), menggunakan callback then,
dan jika terdapat kesalahan, akan menanganinya dalam callback catch.

Modul React Js 20
 Chaining promises
Sebuah promise dapat dikembalikan ke promise lain, menciptakan chaining promise.
Contoh yang bagus dari chaining promises diberikan oleh Fetch API, sebuah lapisan di
atas XMLHttpRequest API, yang dapat kita gunakan untuk mendapatkan sumber daya
dan mengantrikan rantai promise untuk dieksekusi ketika sumber daya tersebut diambil.
Fetch API adalah mekanisme berbasis promise, dan memanggil fetch() setara dengan
mendefinisikan promise sendiri menggunakan new Promise().

Contoh dari chaining promise:

Pada contoh ini, kita memanggil fetch() untuk mendapatkan daftar item TODO dari file
todos.json yang terletak di akar domain, dan kita membuat rantai promise. Menjalankan
fetch() mengembalikan sebuah respons, yang memiliki banyak properti, dan di antara
properti tersebut kita merujuk:

status, nilai numerik yang mewakili kode status HTTP statusText, pesan status, yang
bernilai OK jika permintaan berhasil respons juga memiliki metode json(), yang
mengembalikan promise yang akan terpenuhi dengan konten dari tubuh yang diolah
dan diubah menjadi JSON. Jadi, berdasarkan premis tersebut, ini yang terjadi: promise
pertama dalam rantai adalah fungsi yang kita definisikan, bernama status(), yang

Modul React Js 21
 memeriksa status respons dan jika bukan respons yang berhasil (antara 200 dan 299),
itu menolak promise.
Operasi ini akan menyebabkan rantai promise melewati semua promise yang terdaftar
dan akan langsung menuju ke pernyataan catch() di bagian bawah, mencatat teks
"Permintaan gagal" bersama dengan pesan kesalahan.
Jika berhasil, itu akan memanggil fungsi json() yang telah kita definisikan. Karena
promise sebelumnya, ketika berhasil, mengembalikan objek respons, kita
mendapatkannya sebagai masukan untuk promise kedua.
Dalam kasus ini, kita mengembalikan data JSON yang telah diolah, sehingga promise
ketiga menerima JSON secara langsung:

Handling errors
Pada contoh di atas, pada bagian sebelumnya, kita memiliki sebuah catch yang
ditambahkan ke chain promise. Ketika ada yang gagal dalam chain promise dan
menimbulkan kesalahan atau menolak promise, kendali akan beralih ke pernyataan
catch() terdekat di chain.

Cascading errors

Modul React Js 22
 Jika di dalam catch() kamu menimbulkan kesalahan, kamu dapat menambahkan catch()
kedua untuk menanganinya, dan begitu seterusnya.

Orchestrating promises
Promise.all() : Jika kamu perlu menyinkronkan berbagai promise, Promise.all()
membantu kamu mendefinisikan daftar promise dan mengeksekusi sesuatu ketika
semua promise tersebut terpenuhi.
Contoh pengimplementasian seperti berikut ini :

Pada ES2015 kamu bisa mengimplementasikan seperti berikut ini :

Modul React Js 23
 Promise.race() : akan menjalankan segera setelah salah satu dari promise yang kamu
lewatkan padanya terpenuhi, dan ia menjalankan callback terlampir hanya sekali
dengan hasil dari promise pertama yang terpenuhi.

Async/Await
JavaScript berkembang dengan sangat cepat dari callbacks ke promises (ES2015), dan
sejak ES2017, JavaScript asinkron menjadi lebih sederhana dengan sintaks
async/await. Fungsi async adalah gabungan dari promises dan generators, dan pada
dasarnya, mereka adalah abstraksi tingkat lebih tinggi dari promises. Mari kita perjelas:
async/await dibangun di atas promises.

Lalu Mengapa async/await diperkenalkan?

Mengurangi boilerplate di sekitar promises, dan mengatasi batasan "don't break the
chain" dari rantai promises. Ketika Promises diperkenalkan dalam ES2015, solusi ini
dimaksudkan untuk menyelesaikan masalah dengan kode asinkron, dan berhasil
melakukannya, tetapi selama dua tahun yang memisahkan ES2015 dan ES2017,
menjadi jelas bahwa promises tidak dapat menjadi solusi akhir.
Promises diperkenalkan untuk menyelesaikan masalah yang dikenal sebagai "callback
hell", tetapi promises juga memperkenalkan kompleksitas dan kompleksitas sintaksnya
sendiri. Promises adalah primitif yang baik di sekitar mana sintaks yang lebih baik bisa
diberikan kepada pengembang, jadi ketika waktunya tepat, kita mendapatkan fungsi
async.

Modul React Js 24
 Fungsi async membuat kode terlihat seperti bersifat sinkronus, tetapi sebenarnya
bersifat asinkron dan non-blokcing di belakang layar.

Bagaimana Async/Wait bekerja?

Sebuah fungsi async mengembalikan sebuah promise, seperti dalam contoh berikut:

Ketika kamu ingin memanggil fungsi ini, kamu menambahkan await, dan kode
pemanggilan akan berhenti sampai promise terpenuhi atau ditolak. Satu catatan: fungsi
pemanggil harus didefinisikan sebagai async. Berikut adalah contoh:

Contoh dalam penggunaan Asyn/Wait :

Hasilnya berupa :
Before
After

Modul React Js 25
 I did something //after 3s

Es Module
ES Modules adalah standar ECMAScript untuk bekerja dengan modul.
Sementara Node.js telah menggunakan standar CommonJS selama bertahun-tahun,
browser tidak pernah memiliki sistem modul, karena setiap keputusan besar seperti
sistem modul harus pertama kali distandarisasi oleh ECMAScript dan kemudian
diimplementasikan oleh browser.
Proses standarisasi ini selesai dengan ES6 dan browser mulai mengimplementasikan
standar ini dengan mencoba menjaga semuanya selaras, bekerja dengan cara yang
sama, dan sekarang ES Modules didukung di Chrome, Safari, Edge, dan Firefox (sejak
versi 60). Modul sangat keren, karena memungkinkan kamu mengkapsulasi berbagai
fungsionalitas, dan mengekspos fungsionalitas ini ke file JavaScript lain sebagai
perpustakaan.

Modul React Js 26
 ES Modules Syntax
syntax untuk import module :

sedangkan CommonJS menggunakan :

Sebuah modul adalah file JavaScript yang mengekspor satu atau lebih nilai (objek,
fungsi, atau variabel), menggunakan kata kunci export. Sebagai contoh, modul ini
mengekspor sebuah fungsi yang mengembalikan sebuah string dalam huruf kapital:

Pada contoh ini, modul ini mendefinisikan satu ekspor default, sehingga bisa menjadi
fungsi tanpa nama. Jika tidak, itu akan memerlukan nama untuk membedakannya dari
ekspor lainnya.

Sekarang, modul JavaScript lain dapat mengimpor fungsionalitas yang ditawarkan oleh
uppercase.js dengan mengimpornya.
Halaman HTML dapat menambahkan modul dengan menggunakan tag <script> dengan
atribut khusus type="module":

Penting untuk dicatat bahwa setiap skrip yang dimuat dengan type="module" dimuat
dalam mode ketat. Pada contoh ini, modul uppercase.js mendefinisikan ekspor default,
jadi ketika kita mengimpornya, kita dapat memberikannya nama yang kita sukai.

Modul React Js 27
 Bisa juga dengan seperti ini :

Kamu juga dapat menggunakan path absolut untuk impor modul, untuk merujuk modul
yang didefinisikan pada domain lain:

Tata cara import yang benar :

Tata cara import yang tidak benar :

CORS
Modul diambil menggunakan CORS. Ini berarti jika kamu merujuk skrip dari domain
lain, mereka harus memiliki header CORS yang valid yang memungkinkan pengambilan
lintas situs (seperti AccessControl-Allow-Origin: *).
ES Modules adalah salah satu fitur terbesar yang diperkenalkan dalam browser
modern. Mereka merupakan bagian dari ES6 tetapi perjalanan untuk
mengimplementasikannya telah lama.
Sekarang kita dapat menggunakannya! Tetapi kita juga harus ingat bahwa memiliki
lebih dari beberapa modul akan memiliki dampak kinerja pada halaman kita, karena itu
adalah satu langkah lagi yang harus dilakukan oleh browser pada saat runtime.

Modul React Js 28
 Webpack mungkin masih akan menjadi pemain besar meskipun ES Modules tersedia di
browser, tetapi memiliki fitur tersebut langsung dibangun dalam bahasa adalah hal
besar untuk unifikasi cara kerja modul di sisi klien dan di Node.js juga.

Single Page Apps

Aplikasi React juga disebut sebagai Single Page Applications. Maksudnya bagaimana?
Di masa lalu, ketika browser jauh kurang mampu daripada saat ini, dan kinerja
JavaScript buruk, setiap halaman berasal dari server. Setiap kali Anda mengklik
sesuatu, permintaan baru dibuat ke server dan browser kemudian memuat halaman
baru. Hanya produk yang sangat inovatif yang bekerja dengan cara yang berbeda, dan
bereksperimen dengan pendekatan baru.
Hari ini, dipopulerkan oleh framework JavaScript frontend modern seperti React,
sebuah aplikasi biasanya dibangun sebagai single page application: Anda hanya
memuat kode aplikasi (HTML, CSS, JavaScript) sekali, dan ketika Anda berinteraksi
dengan aplikasi, apa yang umumnya terjadi adalah JavaScript menyela peristiwa
browser dan alih-alih membuat permintaan baru ke server yang kemudian
mengembalikan dokumen baru, klien meminta beberapa JSON atau melakukan
tindakan pada server tetapi halaman yang dilihat pengguna tidak pernah sepenuhnya
dihapus, dan berperilaku lebih seperti aplikasi desktop.
Single page applications dibangun dengan JavaScript (atau setidaknya dikompilasi ke
JavaScript) dan bekerja di browser.

Teknologinya selalu sama, tetapi filosofi dan beberapa komponen kunci tentang
bagaimana aplikasi berfungsi berbeda.

Contoh-contoh Aplikasi Single Page:

Beberapa contoh yang cukup terkenal:
Gmail
Google Maps
Facebook
Twitter
Google Drive

Modul React Js 29
 Pros and cons of SPAs
Aplikasi Single Page terasa jauh lebih cepat bagi pengguna, karena alih-alih menunggu
komunikasi antara klien dan server terjadi, dan menunggu browser merender ulang
halaman, Anda sekarang dapat memiliki umpan balik instan. Ini adalah tanggung jawab
pembuat aplikasi, tetapi Anda dapat memiliki transisi, spinner, dan berbagai perbaikan
UX yang tentu lebih baik daripada alur kerja tradisional. Selain membuat pengalaman
lebih cepat bagi pengguna, server akan menggunakan lebih sedikit sumber daya
karena Anda dapat fokus pada penyediaan API yang efisien daripada membangun tata
letak di sisi server. Ini membuatnya ideal jika Anda juga membangun aplikasi seluler di
atas API, karena Anda dapat sepenuhnya menggunakan kode sisi server yang sudah
ada.
Aplikasi Single Page mudah diubah menjadi Progressive Web Apps, yang pada
gilirannya memungkinkan Anda menyediakan penyimpanan lokal dan mendukung
pengalaman offline untuk layanan Anda (atau hanya pesan kesalahan yang lebih baik
jika pengguna perlu online).
SPAs terbaik digunakan ketika tidak diperlukan SEO (search engine optimization).
Misalnya, untuk aplikasi yang bekerja di belakang login. Mesin pencari, meskipun terus
membaik setiap hari, masih kesulitan mengindex situs yang dibangun dengan
pendekatan SPA daripada halaman yang di-render oleh server secara tradisional. Ini
berlaku untuk blog. Jika Anda bergantung pada mesin pencari, jangan repot-repot
membuat aplikasi satu halaman tanpa memiliki bagian yang dirender oleh server juga.
Ketika membuat SPA, Anda akan menulis banyak JavaScript. Karena aplikasi dapat
berjalan lama, Anda perlu lebih memperhatikan kemungkinan kebocoran memori - jika
di masa lalu halaman Anda memiliki umur yang dihitung dalam menit, sekarang sebuah
SPA dapat tetap terbuka selama berjam-jam sekaligus, dan jika ada masalah memori
apa pun itu akan meningkatkan penggunaan memori browser oleh banyak dan akan
menyebabkan pengalaman yang lambat jika Anda tidak memperhatikannya.
SPAs hebat ketika bekerja dalam tim. Pengembang backend dapat fokus pada API, dan
pengembang frontend dapat fokus pada menciptakan pengalaman pengguna terbaik,
memanfaatkan API yang dibangun di backend.
Sebagai kontra, Single Page Apps sangat bergantung pada JavaScript. Ini dapat
membuat penggunaan aplikasi di perangkat dengan daya rendah menjadi pengalaman
yang kurang baik dari segi kecepatan. Selain itu, beberapa pengunjung Anda mungkin

Modul React Js 30
 saja menonaktifkan JavaScript, dan Anda juga perlu mempertimbangkan aksesibilitas
untuk apa pun yang Anda bangun.

Composition
composition memungkinkan Anda membangun fungsionalitas yang lebih kompleks
dengan menggabungkan fungsi-fungsi kecil dan berfokus pada hal tersebut.
Sebagai contoh, bayangkan menggunakan map() untuk membuat array baru dari set
awal, dan kemudian menyaring hasilnya menggunakan filter():

Di React, komposisi memungkinkan kamu memiliki beberapa keuntungan yang cukup

menarik. Kamu membuat komponen-komponen kecil dan ringan dan menggunakannya
untuk menyusun lebih banyak fungsionalitas di atasnya. Bagaimana caranya?

Create specialized version of a component

Gunakan komponen luar untuk memperluas dan mengkhususkan komponen

yang lebih generik:

Pass methods as props

Sebuah komponen dapat berfokus pada pelacakan suatu peristiwa klik,

misalnya, dan apa yang sebenarnya terjadi ketika peristiwa klik terjadi
tergantung pada komponen pengontrol:

Modul React Js 31
 Using children

Properti props.children memungkinkan kamu menyuntikkan komponen ke

dalam komponen lain. Komponen tersebut perlu menampilkan props.children
dalam JSX-nya:

dan kamu menyematkan lebih banyak komponen ke dalamnya

dengan cara yang transparan:

The Virtual DOM

Banyak framework yang ada, sebelum munculnya React, langsung memanipulasi DOM
setiap kali ada perubahan.
Pertama, apa itu DOM?
DOM (Document Object Model) adalah representasi Pohon dari halaman, dimulai dari
tag <html>, turun ke setiap anak, yang disebut node. Ini disimpan dalam memori
browser, dan langsung terhubung dengan apa yang kamu lihat dalam halaman. DOM
memiliki API yang dapat kamu gunakan untuk menjelajahinya, mengakses setiap node,
menyaringnya, memodifikasinya. API ini adalah sintaks yang familiar yang mungkin
sudah sering kamu lihat, jika kamu tidak menggunakan API abstrak yang disediakan
oleh jQuery dan teman-temannya:

Modul React Js 32
 React menyimpan salinan representasi DOM, untuk apa yang berkaitan dengan
rendering React: Virtual DOM

The Virtual DOM Explained

Setiap kali DOM berubah, browser harus melakukan dua operasi intensif: repaint
(perubahan visual atau konten pada elemen yang tidak mempengaruhi tata letak dan
posisi relatif terhadap elemen lain) dan reflow (menghitung ulang tata letak sebagian
halaman - atau seluruh tata letak halaman). React menggunakan Virtual DOM untuk
membantu browser menggunakan sumber daya yang lebih sedikit ketika perubahan
perlu dilakukan pada halaman.
Ketika kamu memanggil setState() pada sebuah Komponen, dengan menyebutkan
sebuah state yang berbeda dari sebelumnya, React menandai Komponen tersebut
sebagai kotor. Ini kunci: React hanya memperbarui ketika sebuah Komponen
mengubah state secara eksplisit.
Langkah selanjutnya adalah:

React memperbarui Virtual DOM relatif terhadap komponen yang ditandai sebagai
kotor (dengan beberapa pemeriksaan tambahan, seperti memicu
shouldComponentUpdate()).

Menjalankan algoritma diffing untuk mendamaikan perubahan.

Memperbarui DOM nyata.

Modul React Js 33
 JSX
JSX adalah teknologi yang diperkenalkan oleh React. Meskipun React dapat berfungsi
dengan baik tanpa menggunakan JSX, ini adalah teknologi yang ideal untuk bekerja
dengan komponen, sehingga React sangat mendapatkan manfaat dari JSX.
Pertama-tama, Anda mungkin berpikir bahwa menggunakan JSX seperti
mencampurkan HTML dan JavaScript (dan seperti yang akan Anda lihat, CSS). Tetapi
ini tidak benar, karena yang sebenarnya Anda lakukan saat menggunakan sintaks JSX
adalah menulis sintaks deklaratif tentang bagaimana UI komponen seharusnya.
Dan Anda menjelaskan UI tersebut tidak menggunakan string, tetapi menggunakan
JavaScript, yang memungkinkan Anda melakukan banyak hal yang bagus.
Berikut ini adalah tata cara untuk mendeklarasikan JSX :

Ini terlihat seperti campuran aneh antara JavaScript dan HTML, tetapi sebenarnya
semuanya adalah JavaScript. Apa yang tampak seperti HTML sebenarnya adalah gula
sintaksis untuk mendefinisikan komponen dan penempatan mereka dalam markup.
Dalam ekspresi JSX, atribut dapat dimasukkan dengan sangat mudah:

Kamu hanya perlu memperhatikan saat atribut memiliki tanda hubung ( - ), yang
dikonversi ke sintaksis camelCase, dan dua kasus khusus ini:

class menjadi className

for menjadi htmlFor

karena mereka adalah kata yang dipesan dalam JavaScript.

Berikut potongan JSX yang membungkus dua komponen ke dalam tag div:

Modul React Js 34
 Tag selalu perlu ditutup, karena ini lebih mirip XML daripada HTML (jika kamu ingat
zaman XHTML, ini akan terasa akrab, tetapi sejak saat itu sintaksis longgar HTML5
menang). Dalam hal ini, tag self-closing digunakan.
Perhatikan bagaimana saya membungkus kedua komponen ke dalam div. Mengapa?
Karena fungsi render() hanya dapat mengembalikan satu node, jadi jika kamu ingin
mengembalikan 2 sibling, tambahkan element parent. Ini bisa menjadi tag apa pun,
tidak hanya div.

Transpiling JSX
Sebuah browser tidak dapat menjalankan file JavaScript yang berisi kode JSX. Mereka
harus pertama kali diubah menjadi JavaScript biasa.

Bagaimana caranya? Dengan melakukan proses yang disebut transpiling.

Kita sudah mengatakan bahwa JSX bersifat opsional, karena untuk setiap baris JSX,
ada alternatif JavaScript murni yang sesuai, dan itulah yang JSX diubah
menjadi.Sebagai contoh, dua konstruksi berikut setara:

Modul React Js 35
 Contoh dasar ini hanya titik awal, tetapi kamu sudah dapat melihat seberapa rumit
sintaks JavaScript murni dibandingkan dengan menggunakan JSX. Saat artikel ini
ditulis, cara paling populer untuk melakukan transpilasi adalah dengan menggunakan
Babel, yang merupakan opsi default saat menjalankan create-react-app. Jadi, jika kamu
menggunakannya, kamu tidak perlu khawatir, semuanya terjadi di balik layar untuk
kamu. Jika kamu tidak menggunakan create-react-app, kamu perlu menyiapkan Babel
sendiri.

JS in JSX
JSX menerima berbagai jenis JavaScript yang dicampur di dalamnya. Setiap kali kamu
perlu menambahkan beberapa kode JS, cukup letakkan di dalam kurung kurawal {} .
Sebagai contoh, berikut adalah cara menggunakan nilai konstan yang didefinisikan di
tempat lain:

Modul React Js 36
 Ini adalah contoh dasar. Kurung kurawal menerima semua jenis code di JS:

Seperti yang kamu lihat, kita menambahkan JavaScript ke dalam JSX yang
didefinisikan di dalam JavaScript yang bersarang di dalam JSX. Kamu bisa masuk
sejauh yang kamu butuhkan.

HTML in JSX
JSX menyerupai HTML banyak, tetapi sebenarnya itu adalah sintaks XML. Pada
akhirnya, kamu merender HTML, jadi kamu perlu tahu beberapa perbedaan antara cara
kamu mendefinisikan beberapa hal dalam HTML dan bagaimana kamu
mendefinisikannya dalam JSX.
Kamu butuh tag penutup, sama seperti dalam XHTML, jika kamu pernah
menggunakannya, kamu perlu menutup semua tag: tidak lagi <br> tapi sebagai
gantinya gunakan tag self-closing: <br /> (hal yang sama berlaku untuk tag lainnya).
Penulisan camelCase juga harus diperhatikan, dalam HTML, kamu akan menemukan
atribut tanpa kasus (misalnya onchange). Dalam JSX, mereka diubah namanya menjadi

Modul React Js 37
 ekuivalen camelCase:

Kemudian penulisan class menjadi className.

Karena JSX adalah JavaScript, dan "class" merupakan kata kunci yang sudah
terpesan, Anda tidak dapat menuliskannya seperti ini :

Seharusnya menuliskan seperti berikut ini :

CSS in React
JSX menyediakan cara menarik untuk mendefinisikan CSS. Jika kamu memiliki sedikit
pengalaman dengan gaya inline HTML, pada pandangan pertama kamu mungkin
merasa kembali 10 atau 15 tahun, ke dunia di mana CSS inline sepenuhnya normal
(saat ini sering dianggap sebagai solusi "quick fix").
Styling JSX bukanlah hal yang sama, pertama-tama, daripada menerima string yang
berisi properti CSS, atribut styling JSX hanya menerima objek. Ini berarti kamu
mendefinisikan properti dalam sebuah objek:

Modul React Js 38
 Atau bisa juga diimplementasikan sebagai berikut :

Kenapa CSS in react lebih prefer digunakan dibandingkan CSS / SASS / LESS?
CSS adalah masalah yang belum terpecahkan. Sejak awal nya, puluhan alat sekitarnya
muncul dan kemudian tenggelam. Masalah utama dengan JS adalah bahwa tidak ada
pengelompokan dan mudah menulis CSS yang tidak ditegakkan dengan cara apa pun,
sehingga "quick fix" dapat memengaruhi elemen yang seharusnya tidak terganggu. JSX
memungkinkan komponen (didefinisikan dalam React, sebagai contoh) untuk
sepenuhnya mengenkapsulasi gaya mereka.

Cara menambahkan komentar pada JSX

Kamu dapat menambahkan komentar ke dalam JSX dengan menggunakan komentar
JavaScript biasa di dalam sebuah ekspresi:

Spread attributes
Dalam JSX, operasi umum adalah memberikan nilai kepada atribut. Alih-alih
melakukannya secara manual, misalnya :

Modul React Js 39
 dan properti dari objek data akan digunakan sebagai atribut secara otomatis, berkat
operator penyebaran ES6.

Loop pada JSX

Jika kamu memiliki sekelompok elemen yang perlu diulang untuk menghasilkan bagian
JSX, kamu bisa membuat sebuah loop, lalu menambahkan JSX ke dalam sebuah array
:

Sekarang, saat merender JSX, kamu bisa menyematkan array item dengan cara
membungkusnya dalam kurung kurawal :

Modul React Js 40
 You can do the same directly in the JSX, using map instead of a for-of loop:

Components
Sebuah komponen adalah satu bagian terisolasi dari antarmuka. Sebagai contoh,
dalam halaman utama blog yang tipikal, kamu mungkin menemukan komponen
Sidebar, dan komponen Daftar Post Blog. Mereka pada gilirannya terdiri dari
komponen-komponen itu sendiri, sehingga kamu bisa memiliki daftar komponen Post
Blog, masing-masing untuk setiap pos blog, dan masing-masing dengan propertinya
sendiri yang khas.

Modul React Js 41
 React membuatnya sangat sederhana: semuanya adalah komponen. Bahkan tag HTML
biasa merupakan komponen mereka sendiri, dan mereka ditambahkan secara default.
Dua baris berikutnya setara, mereka melakukan hal yang sama. Satu dengan JSX, satu
tanpa, dengan menyisipkan <h1>Hello World!</h1> ke dalam elemen dengan id app.

Lihat, React.DOM mengekspos kita pada komponen h1. Tag HTML lain apa saja yang
tersedia? Semuanya! Kamu bisa memeriksa apa yang ditawarkan React.DOM dengan

Modul React Js 42
 mengetikkannya di Konsol Browser:

Komponen bawaan bagus, tetapi kamu akan segera melampaui penggunaan mereka.
Keunggulan React terletak pada kemampuannya membiarkan kita menyusun
antarmuka dengan menyusun komponen-komponen kustom.

Custom components
Ada 2 cara untuk mendefinisikan komponen dalam React. Sebuah komponen fungsi:

Modul React Js 43
 Class component sebagai berikut :

Sejauh ini, komponen kelas adalah satu-satunya cara untuk mendefinisikan komponen
yang memiliki status sendiri, dan dapat mengakses metode siklus hidup sehingga kamu
dapat melakukan sesuatu ketika komponen pertama kali di render, diperbarui, atau
dihapus.
React Hooks mengubah hal ini, sehingga komponen fungsi kita sekarang jauh lebih
kuat daripada sebelumnya, dan saya percaya kita akan melihat semakin sedikit
komponen kelas di masa depan, meskipun masih akan menjadi cara yang valid untuk
membuat komponen.
Terdapat juga sintaks ketiga yang menggunakan sintaks ES5, tanpa menggunakan
kelas:

Modul React Js 44
 State
Dalam konstruktor Komponen, inisialisasikan this.state. Sebagai contoh, komponen
BlogPostExcerpt mungkin memiliki status clicked:

Accessing the state

Status clicked dapat diakses dengan merujuk pada this.state.clicked:

Modul React Js 45
 Modifikasi State
State bisa dimodifikasi dengan cara berikut ini :

Sebaliknya, kamu seharusnya selalu menggunakan setState() , mengirimkan objek ke

dalamnya :

Objek tersebut dapat berisi subset atau superset dari status. Hanya properti yang kamu
kirimkan yang akan dimodifikasi, properti yang tidak disertakan akan tetap dalam
keadaan saat ini.

Props
Props adalah cara Komponen mendapatkan propertinya. Dimulai dari komponen paling
atas, setiap child component mendapatkan props-nya dari parent. Pada komponen

Modul React Js 46
 fungsi, props adalah satu-satunya yang dilewatkan, dan dapat diakses dengan
menambahkan props sebagai argumen fungsi:

Dalam komponen kelas, props dilewatkan secara default. Tidak perlu menambahkan
apa pun yang istimewa, dan dapat diakses sebagai this.props dalam sebuah instansi
Komponen.

Meneruskan props ke komponen child adalah cara yang baik untuk mengirimkan nilai di
seluruh aplikasimu. Sebuah komponen entah menyimpan data (memiliki status) atau
menerima data melalui props-nya. Hal ini menjadi rumit ketika:

kamu perlu mengakses status dari suatu komponen dari child yang berada
beberapa tingkat di bawahnya (semua child sebelumnya harus bertindak sebagai
perantara, meskipun mereka tidak perlu mengetahui status tersebut, yang membuat
hal menjadi rumit).

kamu perlu mengakses status dari suatu komponen dari suatu komponen yang
sepenuhnya tidak terkait.

Modul React Js 47
 Bagaimana data para props bisa dikirimkan?
When initializing a component, pass the props in a way similar to HTML attributes:

Kita meneruskan title sebagai string biasa (sesuatu yang hanya bisa kita lakukan
dengan string!), dan deskripsi sebagai variabel.

Children
Sebuah prop khusus adalah children. Ini berisi nilai dari apa pun yang dilewatkan di
dalam tubuh komponen, misalnya :

Dalam hal ini, di dalam BlogPostExcerpt kita dapat mengakses "Something" dengan
mencari this.props.children. Meskipun Props memungkinkan Komponen menerima
properti dari orang tua untuk "diberi petunjuk" untuk mencetak beberapa data misalnya,
state memungkinkan komponen mengambil kehidupan sendiri dan menjadi independen
dari lingkungan sekitarnya.

State vs Props
Apa perbedaan antara state dan props dalam React?
Dalam komponen React, props adalah variabel yang dilewatkan kepadanya oleh
komponen parent. Sementara itu, state tetap merupakan variabel, tetapi diinisialisasi
langsung dan dikelola oleh komponen itu sendiri. State dapat diinisialisasi oleh props.
Sebagai contoh, sebuah komponen parent mungkin menyertakan komponen child
dengan cara memanggil nya seperti berikut ini :

Modul React Js 48
 Parent dapat passing prop dengan menggunakan sintaks ini:

Dalam konstruktor ChildComponent, kamu bisa mengakses prop:

dan setiap metode lain dalam kelas ini dapat merujuk pada props menggunakan
this.props. Props dapat digunakan untuk mengatur status internal berdasarkan nilai
prop dalam konstruktor, seperti ini :

Tentu saja, sebuah komponen juga dapat menginisialisasi status tanpa melihat props.
Dalam kasus ini, tidak ada yang bermanfaat yang terjadi, tetapi bayangkan melakukan
sesuatu yang berbeda berdasarkan nilai prop, mungkin mengatur nilai status adalah
yang terbaik. Props seharusnya tidak pernah diubah dalam komponen child, jadi jika
ada sesuatu yang mengubah beberapa variabel, variabel tersebut seharusnya menjadi
bagian dari status komponen.

Props juga digunakan untuk memungkinkan komponen child mengakses metode yang
didefinisikan dalam komponen parent. Ini adalah cara yang baik untuk sentralisasi
pengelolaan status dalam komponen parent, dan menghindari agar child memiliki

Modul React Js 49
 kebutuhan untuk memiliki status mereka sendiri. Sebagian besar komponen kamu
hanya akan menampilkan informasi berdasarkan props yang mereka terima, dan tetap
stateless.

PropTypes
Bagaimana menggunakan PropTypes untuk menetapkan jenis prop yang diperlukan.
Karena JavaScript adalah bahasa yang dinyatakan secara dinamis, kita tidak memiliki
cara untuk memaksa jenis variabel pada saat kompilasi, dan jika kita melewatkan jenis
yang tidak valid, mereka akan gagal pada saat runtime atau memberikan hasil yang
aneh jika jenisnya kompatibel tetapi tidak sesuai dengan yang kita harapkan. Flow dan
TypeScript sangat membantu, tetapi React memiliki cara untuk langsung membantu
dengan jenis prop, dan bahkan sebelum menjalankan kode, alat-alat kita (editor, linter)
dapat mendeteksi ketika kita melewatkan nilai yang salah :

Kita bisa menggunakan beberapa tipe data dengan PropTypes dalam React. Berikut
adalah beberapa tipe data umum yang dapat digunakan:

Modul React Js 50
 string: Tipe data string.

number: Tipe data angka.

boolean: Tipe data boolean.

array: Tipe data array.

object: Tipe data objek.

func: Tipe data fungsi.

element: Tipe data elemen React.

node: Tipe data yang dapat berupa elemen React, teks, atau fragmen.

any: Tipe data apapun.

Custom types: Kita juga dapat membuat tipe data kustom menggunakan
PropTypes.

Kita dapat menerima salah satu dari dua tipe:

Kita dapat menerima salah satu dari banyak nilai :

Kita dapat menerima sebuah instansi dari sebuah kelas :

Kita dapat menerima node React apa pun :

Modul React Js 51
 atau bahkan tipe apa pun :

Array memiliki sintaks khusus yang bisa kita gunakan untuk menerima sebuah array
dari tipe tertentu :

kita dapat menyusun properti objek dengan menggunakan :

Fragment
Bagaimana menggunakan React.Fragment untuk membuat tag HTML ?
Perhatikan bagaimana kita melingkupi nilai pengembalian dengan div. Hal ini karena
sebuah komponen hanya dapat mengembalikan satu elemen tunggal, dan jika kamu
ingin lebih dari satu, kamu perlu melingkupinya dengan tag kontainer lain. Namun, hal
ini menyebabkan adanya div yang tidak perlu dalam output. Kamu dapat menghindari
hal ini dengan menggunakan React.Fragment, sebagai berikut :

Modul React Js 52
 Events
Learn how to interact with events in a React application React provides an easy way to
manage events. Prepare to say goodbye to addEventListener . In the previous article
about the State you saw this example :

Jika kamu telah menggunakan JavaScript untuk waktu yang lama, ini mirip dengan
penangan acara JavaScript biasa, hanya saja kali ini kamu mendefinisikan semuanya
dalam JavaScript, bukan di HTML, dan kamu melewatkan sebuah fungsi, bukan sebuah
string. Nama-nama acara sebenarnya sedikit berbeda karena di React kamu
menggunakan camelCase untuk segalanya, sehingga onclick menjadi onClick,
onsubmit menjadi onSubmit. Sebagai referensi, ini HTML tradisional dengan peristiwa
mixed JavaScript :

Modul React Js 53
 Event handlers
Ini adalah konvensi untuk memiliki penangan acara yang didefinisikan sebagai metode
pada kelas Komponen :

Binds Methods
Jangan lupa untuk mengikat metode-metode. Metode-metode dari kelas ES6 secara
default tidak terikat. Artinya, this tidak didefinisikan kecuali kamu mendefinisikan
metode-metode sebagai fungsi panah :

ketika menggunakan sintaks inisialisasi properti dengan Babel (yang diaktifkan secara
default dalam create-react-app), jika tidak, kamu perlu mengikatnya secara manual
dalam konstruktor :

Modul React Js 54
 The events reference
Clipboard

onCopy

onCut

onPaste

Composition

onCompositionEnd

onCompositionStart

onCompositionUpdate

Keyboard

onKeyDown

onKeyPress

onKeyUp

Focus

onFocus

on Blur

Form

onChange

onInput

Modul React Js 55
 onSubmit

Mouse

onClick

onContextMenu

onDoubleClick

onDrag

onDragEnd

onDragEnter

onDragExit

onDragLeave

onDragOver

onDragStart

onDrop

onMouseDown

onMouseEnter

onMouseLeave

onMouseMove

onMouseOut

onMouseOver

onMouserUp

Selection

onSelect

Touch

onTouchCancel

onTouchEnd

onTouchMove

Modul React Js 56
 onTouchStart

UI

onScroll

Mouse Wheel

onWheel

Media

onAbort

onCanPlay

onCanPlayThrough

onDurationChange

onEmptied

onEncrypted

onEnded

onError

onLoadedData

onLoadedMetadata

onLoadStart

onPause

onPlay

onPlaying

onProgress

onRateChange

onSeeked

onSeeking

onStalled

onSuspend

Modul React Js 57
 onTimeUpdate

onVolumeChange

onWaiting

Image

onLoad

onError

Animation

onAnimationStart

onAnimationEnd

onAnimationIteration

Transition

onTransitionEnd

Lifecycle Events
Pada komponen kelas React, React menyediakan metode siklus hidup yang
memungkinkan kamu terhubung ke berbagai fase dalam siklus hidup komponen.
Metode-metode ini berguna untuk melakukan tindakan pada waktu-waktu tertentu
selama eksistensi komponen. Berikut adalah tiga fase utama dalam siklus hidup
komponen React :

Fase Pemasangan (Mounting):

constructor(): Ini adalah metode pertama yang dipanggil ketika sebuah instansi
komponen sedang dibuat.

static getDerivedStateFromProps(): Metode ini dipanggil tepat sebelum rendering

ketika menerima prop atau state baru.

render(): Merender komponen dan anak-anaknya ke DOM.

componentDidMount(): Metode ini dipanggil setelah komponen telah di-render ke

DOM.

Modul React Js 58
 Fase Pembaruan (Updating):
static getDerivedStateFromProps(): Sama seperti pada fase Pemasangan, ini
dipanggil tepat sebelum rendering ketika menerima prop atau state baru.

shouldComponentUpdate(): Menentukan apakah komponen harus di-re-render atau

tidak.

render(): Merender komponen dan anak-anaknya ke DOM.

getSnapshotBeforeUpdate(): Membuat salinan cadangan DOM saat ini sebelum

perubahan potensial.

componentDidUpdate(): Dipanggil setelah komponen diperbarui di DOM.

Fase Pembongkaran (Unmounting) :

componentWillUnmount(): Metode ini dipanggil tepat sebelum komponen di-
unmount atau dihapus dari DOM.

Metode-metode siklus ini menyediakan kait untuk berbagai

peristiwa selama siklus hidup komponen. Dengan pengenalan
komponen fungsional dan hooks di React, kamu dapat mencapai
fungsionalitas serupa menggunakan hooks seperti useEffect pada
komponen fungsional.

Handling forms
Form adalah salah satu elemen HTML yang interaktif secara default. Mereka dirancang
untuk memungkinkan pengguna berinteraksi dengan halaman.

Penggunaan umum form :

Search

Contact forms

Shopping carts checkout

Login and registration

Modul React Js 59
 Dengan menggunakan React, kita dapat membuat formulir kita lebih interaktif dan
kurang statis. Ada dua cara utama untuk menangani formulir di React, yang berbeda
pada tingkat fundamental: bagaimana data dikelola.

Jika data dikelola oleh DOM, kita menyebutnya sebagai komponen tak terkendali
(uncontrolled components)

Jika data dikelola oleh komponen, kita menyebutnya sebagai komponen terkendali
(controlled components).

Seperti yang dapat kamu bayangkan, komponen terkendali (controlled components)

adalah yang akan kamu gunakan sebagian besar waktu. State komponen adalah
sumber kebenaran tunggal, bukan DOM. Beberapa bidang formulir secara inheren tak
terkendali karena perilakunya, seperti bidang <input type="file">.
Ketika status elemen berubah dalam suatu bidang formulir yang dikelola oleh sebuah
komponen, kita melacaknya menggunakan atribut onChange.

Untuk mengatur state baru, kita harus mengikat this ke metode handleChange,
sebaliknya this tidak dapat diakses dari dalam metode tersebut.

Modul React Js 60
 Sebagai tambahan, kita menggunakan atribut onSubmit pada formulir untuk memanggil
metode handleSubmit ketika formulir dikirimkan:

Modul React Js 61
 Validasi dalam formulir dapat diatasi dalam metode handleChange: kamu memiliki
akses ke nilai lama state dan yang baru. Kamu dapat memeriksa nilai baru dan jika
tidak valid, menolak nilai yang diperbarui (dan memberitahu pengguna dengan cara
tertentu).
Formulir HTML bersifat tidak konsisten. Mereka memiliki sejarah yang panjang, dan itu
terlihat. Namun, React membuat segalanya lebih konsisten untuk kita, dan kamu dapat
mendapatkan (dan memperbarui) bidang menggunakan atribut value-nya.
Berikut adalah contoh textarea:

Modul React Js 62
 Hal yang sama berlaku untuk tag select:

Sebelumnya, kita menyebutkan bidang <input type="file">. Itu bekerja sedikit berbeda.
Dalam hal ini, kamu perlu mendapatkan referensi ke bidang tersebut dengan
menetapkan atribut ref ke properti yang didefinisikan dalam konstruktor dengan
React.createRef(), dan menggunakan itu untuk mendapatkan nilainya dalam penangan
submit:

Modul React Js 63