REACT 101

FROM BASIC TO ADVANCED

React JS 101 From Basic to Advanced - Bahrul Rozak

Gue seneng banget bisa berbagi ebook ini dengan lo! Ebook ini
ngupas tuntas seputar React JS dari level dasar sampe
advanced. Gue ngerasa topik-topik yang dibahas di sini bakal
bener-bener memperkaya pengetahuan lo tentang React JS.
Dengan bahasan yang lengkap dan mendalam, gue harap ebook
ini bisa jadi panduan yang berguna buat lo, terutama buat yang
pengen serius belajar React JS dari awal sampe bisa ngelakuin
hal-hal yang lebih kompleks.

Di dalam ebook ini, lo bakal belajar tentang berbagai konsep

dasar React JS, kayak komponen, JSX, pengelolaan state, dan
perutean. Gak cuma itu, lo juga bakal diajak lebih jauh untuk
memahami topik-topik advanced, kayak penggunaan Hooks,
Redux, optimisasi performa, dan masih banyak lagi. Semua ini
dikemas dalam bahasa yang mudah dipahami, dengan contoh-
contoh yang jelas dan aplikatif.

Selain itu, gue juga ngajak lo buat eksplorasi berbagai topik

menarik seputar React JS yang mungkin belum lo ketahui
sebelumnya. Misalnya, penggunaan Context API, Server-side
Rendering (SSR), dan optimisasi SEO untuk aplikasi React.
Semua ini ditujukan buat nambah wawasan lo dan bikin lo
semakin percaya diri dalam mengembangkan aplikasi
menggunakan React JS.

Dengan materi yang lengkap dan penjelasan yang terperinci,

ebook ini cocok banget buat lo yang pengen serius belajar
React JS tanpa harus melibatkan pengembangan mobile. Gue
harap lo bisa dapet banyak manfaat dan pengetahuan baru dari
ebook ini. Selamat membaca dan semoga sukses dalam
perjalanan belajar lo!

React JS 101 From Basic to Advanced - Bahrul Rozak

Oke, jadi lo mau tau tentang React JS nih, ya? Gue bakal jelasin
secara mendetail dan pakai bahasa yang santai aja biar lebih
gampang dicerna. Jadi, React JS itu adalah sebuah library
JavaScript yang dikembangkan sama Facebook. Pertama kali
diluncurin tahun 2013, dan sejak itu, React udah jadi salah satu
library paling populer buat bikin user interface, khususnya buat
aplikasi web. Nah, kenapa sih React bisa sepopuler itu? Salah
satu alasannya adalah karena React itu efisien dan fleksibel
banget. Lo bisa bikin komponen yang reusable alias bisa dipakai
ulang, jadi nggak perlu nulis kode yang sama berulang-ulang. Ini
pastinya ngirit waktu dan tenaga lo banget, kan?

Instalasi dan konfigurasi React juga nggak ribet, lo cuma butuh

Node.js dan npm (Node Package Manager) buat mulai ngoprek.
Tinggal install Node.js, terus lo bisa pake perintah `npx create-

React JS 101 From Basic to Advanced - Bahrul Rozak

react-app nama-proyek-lo` buat bikin proyek React pertama lo.
Dengan satu perintah itu, lo udah dapet struktur proyek yang
siap dipake, lengkap sama semua dependensi yang lo butuhin.
Jadi, lo nggak perlu pusing mikirin konfigurasi dari nol. Selain itu,
React juga punya konsep yang namanya JSX (JavaScript XML).
JSX ini semacam sintaks extension buat JavaScript yang
memungkinkan lo nulis HTML di dalam JavaScript. Mungkin
awalnya keliatan aneh, tapi begitu lo terbiasa, lo bakal ngerasa
ini keren banget karena bikin kode lo lebih rapi dan gampang
dibaca.

Selanjutnya, React itu juga sangat fokus sama komponen.

Semua yang lo bikin di React itu berbasis komponen.
Komponen ini bisa lo anggap kayak potongan-potongan kecil
dari UI yang bisa lo gabung-gabungin buat bikin tampilan yang
lebih kompleks. Misalnya, lo bisa punya komponen buat header,
footer, tombol, form, dan lain-lain. Karena komponen ini bisa
dipake ulang, lo jadi bisa ngembangin aplikasi lo dengan lebih
cepat dan efisien. Dan asiknya lagi, lo bisa bikin komponen yang
canggih banget dengan nambahin state dan props. State itu
buat ngelola data yang bisa berubah-ubah dalam komponen,
sedangkan props itu buat ngoper data dari satu komponen ke
komponen lain.

Selain itu, React juga punya komunitas yang gede dan aktif. Jadi,
lo nggak bakal kekurangan sumber belajar atau bantuan kalo lo
nemu masalah. Banyak banget tutorial, dokumentasi, dan
forum diskusi yang bisa lo manfaatin. Lo juga bisa nemu banyak
library dan tools tambahan yang bisa lo integrasiin dengan
React buat nambahin fungsionalitas atau ngembangin aplikasi
lo lebih jauh. Misalnya, lo bisa pake React Router buat ngatur
routing, Redux buat manajemen state yang lebih kompleks,
atau Axios buat ngambil data dari API.

React JS 101 From Basic to Advanced - Bahrul Rozak

Satu lagi yang bikin React keren adalah kemampuannya buat
nge-handle rendering yang efisien. React pake virtual DOM
buat ngebandingin perubahan di UI dan cuma ngupdate bagian
yang bener-bener perlu diupdate. Ini bikin performa aplikasi lo
jadi lebih cepat dan responsif, walaupun data yang lo kelola
banyak banget.

Jadi, intinya, React JS itu adalah alat yang powerful banget buat
bikin user interface modern. Dengan fleksibilitas, efisiensi, dan
dukungan komunitas yang luas, lo bakal punya banyak
kemudahan dan dukungan dalam ngembangin aplikasi web lo.
Jadi, tunggu apa lagi? Mulai ngoprek React sekarang dan rasain
sendiri manfaatnya!

React JS 101 From Basic to Advanced - Bahrul Rozak

Komponen React

Oke, gue bakal jelasin secara detail banget tentang "Komponen

React" buat lo.

Jadi, komponen itu adalah dasar dari semua hal yang ada di
React. Bayangin komponen sebagai blok bangunan Lego yang
bisa lo susun dan kombinasikan buat bikin aplikasi lo. Di React,
setiap bagian dari UI lo bisa dipecah jadi komponen-komponen
kecil yang reusable. Misalnya, lo punya halaman web dengan
header, sidebar, dan footer, lo bisa bikin masing-masing bagian
itu jadi komponen tersendiri. Terus, lo bisa nge-reuse
komponen-komponen ini di bagian lain dari aplikasi lo.

Komponen di React ada dua jenis utama: Functional

Components dan Class Components. Functional Components
itu lebih simpel dan umumnya dipakai buat komponen yang gak
butuh state atau lifecycle methods. Lo bisa ngebuat Functional
Component pake fungsi JavaScript biasa. Misalnya, lo bisa bikin
komponen "HelloWorld" kayak gini:

Gampang kan? Komponen ini cuma nge-return satu elemen

HTML yang bakal ditampilkan di layar.

Di sisi lain, Class Components itu lebih kompleks dan bisa punya
state dan lifecycle methods. Lo pake class buat bikin komponen
ini. Misalnya, lo bisa bikin komponen "Counter" yang punya
state buat nge-track jumlah klik kayak gini:

React JS 101 From Basic to Advanced - Bahrul Rozak

Di sini, lo bisa liat kita pake constructor buat inisialisasi state
dan setState buat update state. render method-nya dipake
buat nge-return JSX yang bakal ditampilkan di UI.

Selanjutnya, lo juga perlu tau tentang props. Props itu

singkatan dari properties, yang pada dasarnya adalah
parameter yang lo pass ke komponen. Mereka kayak argumen
buat fungsi. Misalnya, kalo lo punya komponen "Greeting" yang
menerima nama sebagai props, lo bisa bikin kayak gini:

Terus, waktu lo pake komponen ini, lo bisa pass nama sebagai

props:

React JS 101 From Basic to Advanced - Bahrul Rozak

Jadi, kalo lo pass name="John", maka komponen "Greeting"
bakal nge-render "Hello, John!".

Selain itu, lo juga bisa ngegabungin beberapa komponen buat

bikin komponen yang lebih kompleks. Misalnya, lo punya
komponen "Header", "Content", dan "Footer", lo bisa gabungin
mereka semua dalam satu komponen "Page":

Di sini, "Page" adalah komponen yang ngegabungin "Header",

"Content", dan "Footer". Jadi, lo bisa lihat gimana React
memudahkan lo buat nge-reuse komponen dan bikin struktur
aplikasi lo jadi lebih modular dan gampang di-maintain.

React JS 101 From Basic to Advanced - Bahrul Rozak

Terakhir, lo juga bisa pake komponen bawaan dari library atau
framework lain, atau bahkan bikin komponen lo sendiri yang
lebih kompleks dengan menggunakan fitur-fitur canggih seperti
Hooks, Context API, atau Redux buat manajemen state yang
lebih kompleks. Tapi yang paling penting adalah lo paham
konsep dasar komponen ini dulu sebelum lo lanjut ke fitur-fitur
yang lebih advanced.

Jadi, komponen di React itu sangat powerful dan fleksibel.

Mereka bikin kode lo jadi lebih terstruktur, reusable, dan
mudah di-maintain. Dengan memahami konsep ini, lo bakal
punya fondasi yang kuat buat ngejelajahin fitur-fitur lain di
React.

Bahas JSX
JSX (JavaScript XML) itu salah satu konsep paling penting di
React, bro. Jadi, bayangin lo lagi ngoding pake HTML di file
JavaScript lo, itu JSX. Pada dasarnya, JSX memungkinkan lo
untuk nulis elemen React pake sintaks yang mirip banget sama
HTML, tapi tetep di dalam JavaScript. Contohnya, lo bisa bikin
komponen React dengan return statement yang isinya kayak
gini: return <div>Hello, world!</div>;. Jadi, instead of nulis
kode HTML di file HTML terpisah, lo bisa langsung nulis markup
di dalam file JavaScript lo. Ini bikin kode lo lebih terorganisir
dan lebih gampang di-maintain karena semua logika dan
markup komponen ada di satu tempat.

Nah, salah satu hal yang perlu lo tau adalah JSX itu sebenernya
bukan HTML asli, tapi sintaks yang diubah jadi panggilan ke
fungsi React. Misalnya, <div> di JSX sebenernya bakal diubah
jadi React.createElement('div'). Makanya, meskipun mirip
banget sama HTML, ada beberapa aturan yang beda.
Contohnya, di JSX lo harus pake className buat nambahin
kelas CSS ke elemen, bukan class, karena class itu kata kunci di
JavaScript.

React JS 101 From Basic to Advanced - Bahrul Rozak

Selain itu, lo bisa ngombinasikan ekspresi JavaScript ke dalam
JSX pake curly braces {}. Jadi, kalo lo punya variabel atau fungsi
di JavaScript yang pengen lo masukin ke markup, lo tinggal
bungkus pake {}. Misalnya, lo punya variabel name yang isinya
"John", lo bisa nulis JSX kayak gini: <h1>Hello, {name}!</h1>. Ini
bakal nge-render Hello, John! di browser.

Trus, JSX juga mendukung nested elements. Lo bisa nulis JSX

yang kompleks dengan elemen-elemen bersarang. Misalnya, lo
bisa punya <div> yang di dalamnya ada <h1> dan <p> kayak gini:

Nah, itu dia cara bikin struktur HTML yang lebih kompleks di
dalam JSX.

Perlu lo tau juga, JSX itu harus di-transpile sebelum bisa dibaca
sama browser. Browser nggak ngerti JSX secara langsung,
makanya lo butuh tools kayak Babel buat nge-transpile JSX jadi
JavaScript biasa. Biasanya, kalo lo pake create-react-app buat
bikin proyek React, konfigurasi Babel ini udah disiapin otomatis,
jadi lo gak perlu repot ngatur manual.

Jadi intinya, JSX itu powerful banget buat bikin kode React lo
lebih rapi, lebih readable, dan lebih gampang di-maintain.
Dengan JSX, lo bisa langsung nulis markup di dalam file
JavaScript lo, kombinasiin sama logika JavaScript, dan bikin
struktur elemen yang kompleks dengan cara yang lebih alami

React JS 101 From Basic to Advanced - Bahrul Rozak

dan intuitif. Makanya, kalo lo mau jadi jagoan React, lo mesti
paham banget cara kerja dan manfaat dari JSX ini.

Pengelolaan State
Oke, bro, jadi di React, pengelolaan state itu penting banget
karena state adalah jantung dari komponen yang lo buat. Nah,
bayangin lo lagi bikin aplikasi, tiap komponen bisa punya state-
nya sendiri yang ngatur data internal yang bisa berubah seiring
waktu. Jadi, kalo lo pernah main-main sama props, lo pasti tau
kalo props itu kayak variabel yang lo kasih dari luar komponen.
Sedangkan state itu internal, cuma bisa diakses dan diubah di
dalam komponen itu sendiri.

Misalnya, lo punya komponen counter yang bisa nambahin

angka tiap kali lo klik tombol. Angka itu kan berubah-ubah tuh,
nah itu dia yang diatur pake state. Lo bakal pake useState hook
buat ngatur state ini. Pertama-tama, lo deklarasi state-nya,
contohnya gini

Nah, di sini count adalah nilai awal state lo, yaitu 0, dan
setCount adalah fungsi buat nge-update nilai state itu. Jadi, tiap
kali lo mau nambahin angka, lo tinggal panggil setCount dengan
nilai baru, misalnya setCount(count + 1).

Serunya lagi, lo bisa bikin lebih dari satu state dalam satu
komponen. Misalnya, lo punya komponen yang ngatur user
input sama hasil kalkulasi dari input itu. Lo bisa deklarasiin state
buat user input kayak gini

React JS 101 From Basic to Advanced - Bahrul Rozak

Trus, state buat hasil kalkulasi

Setelah lo deklarasi state, lo bisa gunain nilai state itu di JSX

komponen lo. Misalnya, lo mau nampilin nilai counter tadi di
dalam elemen <p>

Dan lo bisa bikin button yang kalo diklik bakal nambahin count-
nya

Gampang kan? Tapi ingat, ada aturan mainnya. Lo ga bisa

langsung ubah nilai state kayak gini: count = count + 1. Lo harus
selalu pake fungsi setCount atau fungsi set apapun yang lo
dapet dari useState. Karena kalo lo ubah langsung, React ga
bakal tau kalo ada yang berubah dan ga bakal re-render
komponen lo.

Selain useState, ada juga Context API yang bisa bantu lo ngatur
state global. Jadi, kalo lo punya data yang dibutuhin banyak
komponen, daripada lo terus-terusan kirim props dari

React JS 101 From Basic to Advanced - Bahrul Rozak

komponen ke komponen, lo bisa pake Context buat nyimpen
state global yang bisa diakses di mana aja. Tapi itu topik yang
lebih advance lagi, bro.

Terakhir, jangan lupa, state itu asinkron. Artinya, kalo lo panggil

setCount, React bakal jadwalin update state itu buat re-render
komponen di waktu yang tepat. Jadi, kalo lo coba cek nilai state
langsung setelah panggil setCount, lo mungkin belum liat nilai
yang baru. Ini yang kadang bikin pusing, tapi asik buat
dipelajarin.

Jadi, intinya, pengelolaan state di React itu ngasih lo kekuatan

buat bikin UI yang interaktif dan dinamis. Lo cuma perlu ngerti
gimana cara deklarasi state, nge-update state, dan gimana
state berinteraksi sama props dan komponen lain. Kalo lo udah
paham ini, lo bakal bisa bikin aplikasi React yang keren dan
kompleks dengan mudah. Keep coding, bro!

Perutean (Routing)

Oke, jadi kita ngomongin perutean (routing) di React nih, bro.

Routing itu penting banget buat aplikasi single-page (SPA) yang
punya banyak halaman atau tampilan yang berbeda. Dengan
React Router, lo bisa bikin navigasi antar halaman jadi mulus
banget tanpa reload seluruh halaman. Pertama-tama, lo mesti
install dulu React Router, biasanya pake npm atau yarn.
Caranya gampang, tinggal ketik npm install react-router-dom di
terminal lo.

React JS 101 From Basic to Advanced - Bahrul Rozak

Setelah itu, lo mesti ngerti komponen-komponen dasar yang
disediain sama React Router. Yang paling utama ada tiga:
BrowserRouter, Route, dan Link. BrowserRouter ini kayak
bungkus yang nge-wrap seluruh aplikasi lo biar si Router bisa
jalan. Lo taruh di level atas aplikasi, biasanya di index.js atau
App.js.

Terus ada Route. Nah, Route ini yang menentukan komponen

apa yang bakal dirender berdasarkan URL-nya. Misalnya lo
punya route ke /home, maka kalau URL di browser lo /home,
komponen Home bakal dirender. Lo bisa bikin route kayak gini

Jadi, ketika lo akses /home, komponen Home bakal muncul,

dan pas lo akses /about, komponen About yang muncul. Terus,
buat navigasi antar halaman tanpa reload, lo bisa pake Link.
Link ini mirip kayak tag <a> di HTML, tapi bedanya dia nggak
bikin halaman reload. Contohnya kayak gini

React JS 101 From Basic to Advanced - Bahrul Rozak

Jadi pas lo klik link itu, URL di browser berubah, tapi halaman lo
nggak reload, dan konten yang sesuai route tadi langsung
muncul.

Ngomong-ngomong soal parameter routing, lo bisa juga loh

ngirim data lewat URL pake parameter. Misalnya lo punya URL
kayak /profile/:id, terus lo bisa akses id itu di komponen Profile
lo. Misalnya:

Terus di dalam komponen Profile, lo bisa akses id tadi pake

props.match.params.id. Jadi gampang banget kalau lo mau
bikin halaman dinamis yang isinya berubah berdasarkan
parameter di URL.

Satu lagi fitur keren dari React Router adalah nested routes.
Jadi lo bisa punya route di dalam route. Misalnya lo punya
halaman Dashboard yang di dalamnya ada Overview sama
Settings. Lo bisa bikin nested routes kayak gini

Jadi pas lo akses /dashboard, komponen Dashboard yang

dirender, dan di dalamnya bisa ada sub-route buat Overview
sama Settings. Jangan lupa juga buat handle kasus-kasus di

React JS 101 From Basic to Advanced - Bahrul Rozak

mana route nggak ketemu. Biasanya lo pake komponen Switch
yang nge-wrap semua Route lo, terus tambahin satu Route
tanpa path yang bakal jadi fallback kalau nggak ada route yang
cocok. Misalnya

Jadi kalau URL nggak cocok sama route mana pun, komponen
NotFound yang bakal dirender, bisa lo isi dengan pesan "404
Not Found" atau apa pun yang lo mau. Intinya, perutean di
React itu powerful banget dan bikin pengalaman pengguna jadi
lebih smooth tanpa reload halaman. Lo bisa bikin navigasi yang
dinamis, handle parameter URL, dan bahkan nested routes
dengan mudah. Yang penting, lo paham dasar-dasar komponen
BrowserRouter, Route, Link, dan cara mereka kerja bareng-
bareng buat bikin aplikasi lo lebih interaktif dan user-friendly.

Manajemen Formulir

Oke, jadi gini, kalo kita ngomongin manajemen formulir di

React, itu tuh sebenernya penting banget buat aplikasi yang
interaktif, di mana user bisa masukin data. Nah, pertama-tama,
lo harus paham gimana cara bikin form di React. Biasanya lo
bakal mulai dengan bikin komponen form. Misalnya, lo punya
form buat masukin nama dan email. Nah, di dalam komponen
itu, lo bisa bikin input fields dengan JSX. Terus, lo perlu ngatur
state buat nyimpen nilai inputan. Di sinilah hooks kayak
`useState` masuk. Lo bisa bikin state buat nama dan email gitu.
Misalnya, `const [nama, setNama] = useState('');` sama `const
[email, setEmail] = useState('');`. Nah, lo bakal ngasih nilai state

React JS 101 From Basic to Advanced - Bahrul Rozak

itu ke input fields pake atribut `value` dan update state-nya
pake event handler `onChange`. Jadi kalo user ngetik sesuatu di
input field, nilai state bakal di-update sesuai inputan user.

Lanjut lagi, buat validasi form, lo bisa bikin fungsi yang ngecek
inputan user, misalnya apakah field nama dan email udah diisi
atau belum. Kalo belum, lo bisa kasih pesan error. Bisa juga lo
pake library kayak Formik atau Yup buat validasi yang lebih
kompleks. Itu bakal ngebantu banget buat ngatur validasi tanpa
ribet ngoding dari nol.

Nah, setelah validasi beres, lo perlu bikin fungsi buat handle

submit form. Biasanya lo bakal bikin fungsi yang dipanggil pas
user klik tombol submit. Fungsi ini bakal ngecek validasi dulu,
kalo semuanya oke, baru lanjut buat kirim data ke server atau
API. Jangan lupa, pas lo kirim data, lo bisa pake `fetch` atau
`axios` buat ngirim request HTTP. Misalnya, lo bisa pake
`axios.post('/api/form', { nama, email })` buat ngirim data ke
server.

Selain itu, lo juga perlu mikirin gimana ngatur UI buat ngasih

feedback ke user. Misalnya, kalo proses submit berhasil, lo bisa
kasih pesan sukses. Sebaliknya, kalo gagal, lo bisa kasih pesan
error. Ini penting biar user tau apa yang terjadi setelah mereka
submit form.

Terakhir, jangan lupa buat ngatur reset form. Misalnya, setelah

data berhasil dikirim, lo bisa reset nilai input fields jadi kosong
lagi. Lo bisa bikin fungsi reset yang nge-set state jadi nilai awal
lagi, kayak `setNama('');` sama `setEmail('');`. Jadi, form lo bakal
siap dipake lagi tanpa harus refresh halaman.

Nah, kira-kira begitu deh penjelasan detail soal manajemen

formulir di React. Semoga lo jadi lebih paham dan bisa ngatur
form di aplikasi lo dengan baik!

React JS 101 From Basic to Advanced - Bahrul Rozak

Komunikasi dengan Server

Oke, jadi topik ini gue bakal jelasin tentang gimana cara lo bisa
ngelakuin komunikasi antara aplikasi React lo sama server.
Komunikasi ini penting banget buat ambil data dari server,
kirim data ke server, atau bahkan sinkronisasi data antara
frontend dan backend.

Pertama, lo pasti butuh library buat ngelakuin HTTP request.

Dua yang paling populer itu axios dan fetch. Kalau lo baru mulai,
gue saranin pake fetch karena dia udah built-in di JavaScript,
jadi lo nggak perlu install apapun lagi. Tapi kalo lo pengen fitur
yang lebih banyak dan lebih fleksibel, axios bisa jadi pilihan
yang oke banget.

Misalnya lo pake fetch, begini cara dasarnya

Dengan fetch, lo bisa ngelakuin GET request dengan mudah.

Pertama, lo panggil fetch dengan URL API-nya, terus lo bakal
dapet response yang mesti di-convert ke JSON dulu pake
response.json(). Setelah itu, data yang lo dapet bisa langsung lo
pake di aplikasi React lo. Jangan lupa buat handle error juga
pake .catch, biar kalo ada masalah pas ngambil data, lo bisa tau
dan ngatasinnya. Nah, kalo lo mau pake axios, cara dasarnya
begii

React JS 101 From Basic to Advanced - Bahrul Rozak

Mirip banget kan? Bedanya, axios punya beberapa kelebihan
kayak interceptors buat ngelakuin sesuatu sebelum request
dikirim atau sebelum response diterima, terus dia juga support
buat nge-cancel request, dan syntax-nya lebih clean dan lebih
gampang buat di-maintain. Kalo lo mau kirim data ke server
(POST request), lo bisa gini:

Pake fetch

Pake Axios

React JS 101 From Basic to Advanced - Bahrul Rozak

Untuk POST request, lo perlu specify method: 'POST' kalo pake
fetch, terus lo juga harus set headers buat ngasih tau server
kalo lo ngirim data JSON. Jangan lupa buat convert data yang
mau dikirim jadi string pake JSON.stringify.

Selain GET dan POST, lo juga bisa pake metode HTTP lain kayak
PUT, DELETE, PATCH sesuai kebutuhan lo. Intinya, komunikasi
dengan server di React itu tentang gimana lo bisa ngelakuin
request dan ngolah responsenya dengan baik. Kalo lo udah
paham konsep dasar ini, lo bakal lebih mudah buat ngembangin
fitur-fitur yang butuh komunikasi dengan server di aplikasi
React lo.

Satu lagi yang penting, jangan lupa buat handle loading state
dan error state di UI lo, biar pengguna aplikasi lo nggak bingung
kalo data lagi diambil atau ada error. Misalnya lo bisa pake
state di React kayak gini

React JS 101 From Basic to Advanced - Bahrul Rozak

Di atas, gue pake useEffect buat ngambil data pas komponen
pertama kali di-mount. Selama data lagi diambil, loading state
bakal true, dan bakal di-set false kalo data udah berhasil
diambil atau ada error. Jangan lupa buat nampilin loading
spinner atau pesan error di UI lo sesuai state ini.

Gitu deh kira-kira cara komunikasi dengan server di React.

Semoga penjelasan ini ngebantu lo buat ngembangin aplikasi
React yang lebih interaktif dan dinamis!

React JS 101 From Basic to Advanced - Bahrul Rozak

Penggunaan Lifecycle Method

Oke, lo mau tahu tentang "Penggunaan Lifecycle Method"

secara detail? Gue jelasin panjang lebar ya!

Lifecycle method di React itu penting banget buat lo yang

pengen ngatur apa yang terjadi pada komponen lo selama
siklus hidupnya. Kebanyakan dari lo mungkin udah familiar
sama class components yang lebih lama, yang punya berbagai
lifecycle method. Ada beberapa tahapan dalam siklus hidup
komponen, dan masing-masing punya method sendiri yang bisa
lo manfaatin buat ngatur perilaku komponen lo.

Pertama, ada mounting. Ini adalah tahap di mana komponen lo

pertama kali dimasukkan ke DOM. Lifecycle method yang sering
dipakai di tahap ini adalah `componentDidMount`. Di sini lo
bisa ngelakuin segala macam inisialisasi yang butuh akses ke
DOM, kayak ngambil data dari API atau nge-set timer. Method
ini cuma dipanggil sekali, pas komponen lo pertama kali muncul.
Misalnya, lo bisa pake `componentDidMount` buat fetch data
dari server dan nge-update state komponen lo dengan data
yang diterima.

React JS 101 From Basic to Advanced - Bahrul Rozak

Selanjutnya ada updating, yang terjadi setiap kali props atau
state komponen lo berubah. Di tahap ini ada beberapa method
yang bisa lo pake. Pertama ada `shouldComponentUpdate`,
yang ngasih lo kesempatan buat ngatur apakah komponen lo
perlu di-render ulang atau nggak. Ini berguna banget buat
optimasi performa, biar komponen lo nggak re-render tanpa
perlu. Kalo lo balikin `false`, komponen lo nggak akan re-render
walaupun ada perubahan di props atau state. Abis itu ada
`componentDidUpdate`, yang dipanggil setelah render terjadi.
Method ini berguna buat nge-handle side effects setelah
update, kayak nge-syncing DOM dengan state terbaru atau nge-
trigger animasi.

Terus ada tahap unmounting, di mana komponen lo bakal

dicopot dari DOM. Method yang lo gunain di tahap ini adalah
`componentWillUnmount`. Ini adalah tempat yang sempurna
buat nge-bersihin segala macam side effects yang lo buat di
`componentDidMount`, kayak nge-clear timer, nge-batalin
request API, atau nge-bersihin event listener yang lo tambahin.
Method ini juga cuma dipanggil sekali, pas komponen lo bener-
bener dicopot dari DOM.

Ada juga error handling, yang diperkenalin di React 16. Kalo ada
error yang terjadi di dalam salah satu child component, lo bisa
nangkep error tersebut dengan `componentDidCatch`. Ini
method baru yang bikin lo bisa nge-handle error secara lebih
terkontrol dan nge-render fallback UI kalo terjadi error yang
nggak diduga.

Dengan nguasain lifecycle method ini, lo bakal punya kontrol

penuh atas perilaku komponen lo selama siklus hidupnya. Lo
bisa nge-handle inisialisasi, pembaruan, dan pembersihan
dengan lebih efisien dan rapi. Penggunaan lifecycle method
yang tepat juga bisa ningkatin performa dan kehandalan
aplikasi React lo secara keseluruhan.

React JS 101 From Basic to Advanced - Bahrul Rozak

Gue harap penjelasan panjang lebar ini bisa bantu lo paham
lebih dalam tentang lifecycle method di React. Jangan ragu
buat eksperimen dan praktek langsung biar makin jago!

Penggunaan Hooks

Penggunaan Hooks dalam React itu penting banget, temen-

temen. Jadi, Hooks itu adalah fitur baru yang diperkenalkan
oleh React versi 16.8. Hooks memungkinkan lo untuk
menggunakan state dan fitur React lainnya tanpa harus menulis
class. Jadi, lo bisa menggunakan fitur-fitur ini langsung di dalam
komponen functional. Misalnya, useState adalah salah satu
Hooks yang paling sering digunakan. Dengan useState, lo bisa
menambahkan state ke komponen functional lo. Misalnya, lo
punya komponen Counter yang berfungsi untuk menghitung
jumlah klik. Dengan useState, lo bisa menulis kode yang seperti
ini

React JS 101 From Basic to Advanced - Bahrul Rozak

Dalam contoh ini, count adalah state yang menyimpan jumlah
klik, dan setCount adalah fungsi yang digunakan untuk
mengubah nilai count. Ketika tombol diklik, count akan
bertambah satu.

Selain useState, ada juga useEffect yang digunakan untuk

menangani efek samping dalam komponen React. Misalnya, lo
ingin melakukan sesuatu setiap kali nilai state berubah. Lo bisa
menggunakan useEffect untuk melakukan itu tanpa harus
repot-repot menulis kode di dalam metode
componentDidMount, componentDidUpdate, atau
componentWillUnmount.

Hooks lainnya seperti useContext, useReducer, dan useRef juga

sangat berguna dalam pengembangan aplikasi React. Dengan
menggunakan Hooks, lo bisa menulis komponen-komponen
yang lebih bersih dan lebih mudah dipahami tanpa perlu
menggunakan class. Jadi, selain memudahkan, penggunaan
Hooks juga membuat kode lo lebih rapi dan terstruktur.

Optimisasi Performa

React JS 101 From Basic to Advanced - Bahrul Rozak

Nah, optimisasi performa dalam React itu penting banget, gue
jelasin ya secara detail. Pertama, dalam mengoptimalkan re-
render komponen, lo bisa menggunakan React.memo untuk
menghindari re-render yang nggak perlu. Misalnya, lo punya
komponen yang hanya perlu di-update ketika props atau state
tertentu berubah, maka dengan React.memo, komponen itu
hanya akan dirender ulang jika props atau state yang
ditentukan berubah. Ini bisa menghemat waktu dan
mempercepat rendering.

Selanjutnya, ada tips dan trik untuk meningkatkan performa

aplikasi React. Salah satunya adalah dengan menghindari
penggunaan method render() yang kompleks. Misalnya, jika lo
punya komponen yang render-nya terlalu panjang dan
kompleks, sebaiknya lo pecah menjadi komponen-komponen
kecil yang lebih mudah dikelola. Hal ini dapat membuat re-
render menjadi lebih efisien.

Selain itu, lo juga bisa melakukan optimisasi dengan

menggunakan useCallback dan useMemo. UseCallback
digunakan untuk menghindari pembuatan fungsi yang baru
setiap kali komponen dirender ulang, sedangkan useMemo
digunakan untuk menghindari perhitungan nilai yang sama
setiap kali komponen dirender ulang. Dengan menggunakan
kedua hooks ini, lo bisa menghemat waktu render dan
meningkatkan performa aplikasi.

Tambahan lagi, lo juga bisa melakukan optimisasi performa

dengan menghindari penggunaan setState di dalam loop atau
penggunaan yang berlebihan. Hal ini dapat mengakibatkan re-
render yang tidak perlu dan mempengaruhi performa aplikasi
secara keseluruhan. Sebaiknya, lo tetapkan state secara
bijaksana dan hanya saat dibutuhkan.

React JS 101 From Basic to Advanced - Bahrul Rozak

Terakhir, penting juga untuk memperhatikan penggunaan
dependencies dalam useEffect. Pastikan untuk menyediakan
dependencies yang benar agar useEffect hanya dijalankan saat
dependencies berubah. Menggunakan dependencies yang tidak
tepat dapat mengakibatkan useEffect terus-menerus dijalankan,
yang dapat mempengaruhi performa aplikasi secara negatif.
Jadi, dengan melakukan berbagai optimisasi ini, lo bisa
meningkatkan performa aplikasi React lo secara signifikan.

Animasi dan Transisi

Oke, gue akan menjelaskan tentang Animasi dan Transisi dalam
React JS secara detail. Jadi, Animasi dan Transisi adalah salah
satu aspek penting dalam pengembangan antarmuka pengguna
(UI) yang menambahkan elemen visual yang menarik dan
interaktif pada aplikasi web gue. Dalam konteks React JS, gue
bisa menggunakan beberapa pendekatan untuk menerapkan
animasi dan transisi, mulai dari animasi CSS sederhana hingga
penggunaan library khusus seperti React Spring atau Framer
Motion.

Pertama-tama, gue bisa menggunakan animasi CSS untuk

membuat elemen-elemen dalam komponen gue bergerak atau
berubah bentuk dengan mulus. Gue bisa menggunakan
properti CSS seperti `transition`, `animation`, dan `keyframes`
untuk menciptakan efek animasi yang menarik. Misalnya, gue
bisa membuat sebuah tombol yang berubah warna saat diklik
dengan menggunakan animasi CSS.

Selain itu, gue juga bisa menggunakan library seperti React

Spring atau Framer Motion untuk mengimplementasikan
animasi yang lebih kompleks. Library ini menyediakan berbagai
macam fitur dan kontrol yang memungkinkan gue membuat
animasi yang responsif dan interaktif. Contohnya, gue bisa
membuat elemen bergerak secara fisik atau mengikuti jalur
tertentu dengan menggunakan library tersebut.

React JS 101 From Basic to Advanced - Bahrul Rozak

Selain animasi, transisi juga merupakan bagian penting dalam
meningkatkan pengalaman pengguna. Transisi memungkinkan
perubahan antara dua keadaan elemen terlihat lebih halus dan
alami. Dalam React JS, gue bisa menggunakan properti CSS
seperti `transition` untuk menentukan efek transisi saat elemen
berubah keadaan. Misalnya, gue bisa membuat sebuah menu
yang muncul secara perlahan dengan efek transisi yang lembut.

Dengan menggabungkan animasi dan transisi dengan baik, gue

bisa menciptakan antarmuka pengguna yang menarik dan
responsif dalam aplikasi web gue. Penting untuk diingat bahwa
penggunaan animasi dan transisi haruslah seimbang agar tidak
mengganggu pengalaman pengguna. Jadi, gue harus
mempertimbangkan dengan baik jenis dan durasi animasi yang
akan gue implementasikan sesuai dengan konteks penggunaan
aplikasi web gue.

Testing dalam React

Testing dalam React itu penting banget, gue bakal jelasin detil
banget ya. Jadi, dalam pengembangan aplikasi React, testing
adalah proses yang krusial untuk memastikan bahwa aplikasi
kita berfungsi dengan baik dan tidak ada bug yang mengganggu.
Ada beberapa jenis tes yang biasa dilakukan dalam
pengembangan React, seperti unit testing, integration testing,
dan end-to-end testing.

Unit testing dilakukan untuk menguji setiap komponen secara

terpisah untuk memastikan bahwa setiap bagian dari
komponen berfungsi dengan benar. Contohnya, kita punya
komponen Button yang seharusnya merender tombol dengan

React JS 101 From Basic to Advanced - Bahrul Rozak

teks tertentu. Kita bisa menggunakan library seperti Jest untuk
menulis unit test untuk komponen tersebut

Selain unit testing, ada juga integration testing yang dilakukan

untuk menguji interaksi antara beberapa komponen dalam satu
unit. Misalnya, kita punya komponen Form yang terdiri dari
beberapa input field dan tombol submit. Kita ingin memastikan
bahwa saat tombol submit ditekan, data dari input field
dikirimkan dengan benar. Berikut contoh penggunaan
integration testing dengan React Testing Library

Terakhir, ada end-to-end testing yang dilakukan untuk menguji

aplikasi secara keseluruhan dari sisi pengguna. Contohnya, kita
ingin memastikan bahwa saat pengguna mengklik tombol login,

React JS 101 From Basic to Advanced - Bahrul Rozak

mereka diarahkan ke halaman dashboard dengan benar. Untuk
end-to-end testing, kita bisa menggunakan library seperti
Cypress

Dengan melakukan tes secara teratur, kita bisa memastikan

bahwa aplikasi React kita tetap berjalan dengan baik dan
meminimalisir kemungkinan adanya bug yang dapat
mengganggu pengalaman pengguna.

Penggunaan Context API

Oke, temen-temen, jadi Context API itu adalah fitur di React
yang digunakan untuk berbagi data antar komponen tanpa
harus melewatkan props dari satu komponen ke komponen lain
secara berurutan. Jadi, bayangin lo punya beberapa komponen
di dalam aplikasi React lo yang butuh akses ke data yang sama,
misalnya tema atau preferensi pengguna. Nah, dengan Context
API, lo bisa menyimpan data ini di satu tempat dan komponen-
komponen lain bisa mengaksesnya tanpa perlu melewati props
dari komponen ke komponen secara langsung.

Contohnya, kita punya aplikasi sederhana yang memiliki tema

gelap dan terang. Kita bisa membuat context untuk tema ini

React JS 101 From Basic to Advanced - Bahrul Rozak

menggunakan Context API. Pertama, kita buat file baru untuk
context, misalnya ThemeContext.js

Di dalam komponen ThemeProvider, kita menggunakan

useState untuk menyimpan tema (light atau dark) dan
toggleTheme untuk mengubah tema antara light dan dark.
Kemudian, kita wrap komponen-komponen aplikasi kita dengan
ThemeProvider di file App.js

React JS 101 From Basic to Advanced - Bahrul Rozak

Sekarang, komponen-komponen di dalam ThemeProvider bisa
mengakses tema dan fungsi toggleTheme dari context ini.
Misalnya, di dalam Header.js, kita bisa mengubah tema dengan
menambahkan button yang menggunakan fungsi toggleTheme
dari context

Dengan menggunakan Context API, kita bisa mengakses tema

dari ThemeProvider dan mengubahnya dengan menggunakan

React JS 101 From Basic to Advanced - Bahrul Rozak

fungsi toggleTheme tanpa perlu melewatkan props dari App.js
ke Header.js secara langsung.

Penggunaan Redux
Jadi, Redux adalah sebuah library yang digunakan dalam
pengembangan aplikasi web dengan React untuk mengelola
state secara global. Jadi, misalnya lo punya beberapa
komponen dalam aplikasi React lo yang memerlukan akses ke
state yang sama. Dengan Redux, lo bisa menyimpan state
tersebut secara global, sehingga komponen-komponen
tersebut bisa saling berkomunikasi tanpa harus melewati prop
dari satu komponen ke komponen lainnya.

Misalnya, lo punya aplikasi todo list sederhana. Dalam aplikasi

tersebut, lo punya komponen untuk menampilkan daftar todo,
komponen untuk menambah todo baru, dan komponen untuk
menghapus todo. Semua komponen ini memerlukan akses ke
state todo yang sama. Dengan Redux, lo bisa menyimpan state
todo tersebut secara global, dan semua komponen bisa
mengaksesnya dengan mudah.

Contohnya, pertama-tama lo perlu menginstal library Redux

dengan menggunakan npm

Selanjutnya, lo perlu membuat file store.js untuk menyimpan

state global dan mengelola state tersebut menggunakan
reducer. Berikut adalah contoh kode untuk file store.js

React JS 101 From Basic to Advanced - Bahrul Rozak

Dalam contoh tersebut, kita membuat sebuah store dengan
initial state berupa array kosong untuk todos. Selanjutnya, kita
membuat reducer todoReducer yang menghandle aksi untuk
menambah todo (ADD_TODO) dan menghapus todo
(REMOVE_TODO). Setelah itu, kita membuat store dengan
menggunakan reducer tersebut.

Untuk menggunakan state tersebut dalam komponen-

komponen React, kita perlu menyediakan provider di tingkat
tertinggi aplikasi kita. Berikut adalah contoh kode untuk
menyediakan provider tersebut dalam file App.js

React JS 101 From Basic to Advanced - Bahrul Rozak

Dalam contoh tersebut, kita menggunakan <Provider> dari
Redux untuk menyediakan store ke dalam aplikasi React kita.
Sekarang, semua komponen dalam aplikasi kita bisa mengakses
state todos tersebut menggunakan Redux.

Server-side Rendering (SSR)

Server-side Rendering (SSR) adalah teknik dalam
pengembangan aplikasi web yang memungkinkan pembuatan
tampilan web secara langsung di server sebelum dikirimkan ke
browser pengguna. Dalam konteks React JS, SSR berarti
menghasilkan tampilan awal dari aplikasi React di server,
sehingga pengguna dapat melihat konten halaman lebih cepat
daripada menunggu aplikasi dimuat di browser.

Konsep SSR sangat berguna dalam meningkatkan performa dan

SEO (Search Engine Optimization) dari aplikasi React. Dengan
SSR, konten halaman dapat diindeks oleh mesin pencari karena
tampilan awal sudah tersedia di sisi server. Selain itu, pengguna
juga akan melihat konten yang lebih cepat karena tampilan
sudah di-generate sebelumnya.

React JS 101 From Basic to Advanced - Bahrul Rozak

Untuk menerapkan SSR dalam aplikasi React, kita dapat
menggunakan library seperti Next.js atau Razzle. Berikut adalah
contoh penerapan SSR menggunakan Next.js

Dalam contoh tersebut, komponen Home akan menerima data

yang sudah di-generate di server melalui props. Fungsi
getServerSideProps digunakan untuk mengambil data dari
server dan mengirimkannya sebagai props ke komponen
sebelum halaman dirender, sehingga pengguna akan melihat
konten awal dengan cepat.

Dengan SSR, aplikasi React menjadi lebih responsif dan ramah

mesin pencari, meningkatkan pengalaman pengguna secara
keseluruhan

React JS 101 From Basic to Advanced - Bahrul Rozak

Penggunaan React Hooks Lanjutan

Oke, temen-temen, sekarang kita bahas tentang penggunaan

React Hooks lanjutan, nih. Jadi, React Hooks adalah fitur yang
memungkinkan kita menggunakan state dan fitur React lainnya
dalam komponen fungsional, tanpa perlu menggunakan kelas.
Nah, dalam penggunaan Hooks yang lebih lanjut, kita bisa
membuat custom Hooks sendiri, lo. Custom Hooks ini
memungkinkan kita untuk mengabstraksi logika yang kompleks
dari komponen kita dan menggunakannya kembali di berbagai
komponen tanpa perlu menulis ulang kode yang sama, gitu.

Misalnya, kita punya sebuah aplikasi yang memiliki beberapa

komponen yang membutuhkan logika untuk menghitung
jumlah klik. Daripada menulis logika itu di setiap komponen,
kita bisa membuat custom Hook yang mengatur logika tersebut.
Berikut contohnya

React JS 101 From Basic to Advanced - Bahrul Rozak

Dalam contoh di atas, kita membuat custom Hook useCounter
yang mengatur state count dan fungsi increment serta
decrement untuk mengubah nilai count. Kemudian, kita
menggunakan custom Hook ini dalam komponen
CounterComponent untuk menghitung dan menampilkan
jumlah klik.

Dengan menggunakan custom Hooks seperti ini, kita bisa

memisahkan logika menjadi bagian yang lebih kecil dan lebih
mudah dikelola, serta memungkinkan kita untuk menggunakan
kembali logika tersebut di berbagai bagian aplikasi kita. Jadi,
bisa dibilang penggunaan React Hooks lanjutan ini

React JS 101 From Basic to Advanced - Bahrul Rozak

memudahkan kita dalam mengelola logika yang kompleks
dalam aplikasi React, gak ribet kan?

Penggunaan HOC (Higher Order Components)

Oke, nih, tentang penggunaan Higher Order Components (HOC)

ini, ini adalah cara yang sering digunakan di React buat
ngabstraksi logika yang berulang-ulang dalam komponen. Jadi,
bayangin gini, kadang kita punya beberapa komponen yang
punya logika yang mirip atau sama persis. Nah, daripada kita
nulis logika itu lagi dan lagi di setiap komponen, kita bisa pake
HOC buat ngeringkas dan mempermudah kerjaan kita. Jadi,
secara sederhana, HOC itu kayak fungsi yang nerima komponen
sebagai argumen, terus mengembalikan komponen baru
dengan tambahan logika yang kita butuhkan.

Contoh, misalnya kita punya beberapa komponen yang butuh

akses ke data pengguna. Instead of writing the code to fetch
user data di setiap komponen itu, kita bisa buat HOC yang
ngerjain itu, terus kita pake HOC itu di setiap komponen yang
butuh akses ke data pengguna. Jadi, code jadi lebih bersih dan
kita nggak perlu nulis kode yang sama berulang-ulang.

Ini contoh kodenya

React JS 101 From Basic to Advanced - Bahrul Rozak

React JS 101 From Basic to Advanced - Bahrul Rozak
Jadi, dalam contoh ini, kita buat HOC withUserData yang
mengurus fetching data pengguna. Terus, kita pake HOC itu di
komponen UserProfile, jadi UserProfile sekarang punya akses
ke data pengguna tanpa perlu nulis logika fetching di dalamnya.
Itu dia, intinya tentang penggunaan HOC dalam React!

Pengujian E2E (End-to-End) dengan Cypress

Pengujian End-to-End (E2E) dengan Cypress adalah metode

pengujian yang memastikan bahwa seluruh bagian dari aplikasi
web berfungsi dengan baik, mulai dari tampilan pengguna
hingga interaksi dengan server. Cypress menyediakan
lingkungan pengujian yang kuat dan mudah digunakan,
memungkinkan pengembang untuk menulis skenario pengujian
dengan bahasa yang dekat dengan bahasa alami. Cypress dapat
digunakan untuk menguji berbagai aspek aplikasi, seperti
formulir, navigasi, interaksi pengguna, dan respons server.

Contoh penggunaan Cypress untuk pengujian E2E bisa seperti

berikut ini. Misalnya, kita ingin menguji apakah halaman login
bekerja dengan baik

React JS 101 From Basic to Advanced - Bahrul Rozak

Dalam contoh di atas, kita membuat beberapa skenario
pengujian untuk halaman login. Pertama, kita memastikan
bahwa form login ditampilkan dengan benar. Kemudian, kita
menguji apakah pengguna dapat login dengan benar
menggunakan username dan password yang valid. Terakhir,
kita menguji apakah pesan error ditampilkan jika pengguna
mencoba login dengan username atau password yang salah.

Dengan Cypress, pengujian E2E dapat ditulis dengan mudah

dan dapat memberikan keyakinan bahwa aplikasi berfungsi
sesuai yang diharapkan.

Penggunaan Webpack

Oke, temen-temen, jadi Webpack itu adalah sebuah tools yang

digunakan dalam pengembangan web untuk mengelola dan
mengatur berbagai file dalam proyek kita, lo. Nah, kegunaan
utamanya adalah untuk membantu kita dalam mengelola
dependensi dan modul-modul dalam proyek React kita, jadi
nggak perlu ribet lagi ngatur file-file secara manual, gue jelasin
ya. Jadi, misalnya dalam proyek React kita, biasanya kita punya
banyak file JavaScript, CSS, gambar, dan lain-lain. Nah, dengan
Webpack, kita bisa mengatur semua file-file tersebut menjadi
modul-modul yang bisa saling bergantung satu sama lain, lo.
Jadi, misalnya kita punya file JavaScript A yang butuh file
JavaScript B, kita bisa menggunakan Webpack untuk mengelola
ketergantungan ini. Selain itu, Webpack juga bisa membantu
kita dalam proses bundling, yang artinya menggabungkan
semua modul-modul tersebut menjadi satu file bundle yang
lebih efisien untuk diunggah ke server, lo. Dengan begitu, kita
bisa menghemat waktu dan bandwidth karena hanya perlu
mengunggah satu file besar daripada banyak file kecil.
Contohnya, kita punya struktur proyek seperti ini\

React JS 101 From Basic to Advanced - Bahrul Rozak

Dan ini adalah webpack.config.js kita untuk mengatur Webpack

Dalam contoh tersebut, kita menggunakan babel-loader untuk

mengonversi file JavaScript menggunakan Babel, style-loader
dan css-loader untuk mengelola file CSS, dan file-loader untuk
mengelola file gambar. Kemudian, Webpack akan menghasilkan
file bundle.js yang berisi semua modul yang diperlukan oleh
proyek kita.

Penggunaan PWA (Progressive Web Apps)

PWA (Progressive Web Apps) adalah aplikasi web yang

dirancang untuk memberikan pengalaman pengguna yang
mirip dengan aplikasi native di perangkat seluler atau desktop.

React JS 101 From Basic to Advanced - Bahrul Rozak

Mereka dapat diakses melalui browser web tetapi memiliki
kemampuan seperti akses offline, pemberitahuan push, dan
akses ke fitur perangkat keras. Pengalaman ini memungkinkan
pengguna untuk mengakses aplikasi tanpa instalasi dari toko
aplikasi tradisional.

Untuk mengimplementasikan PWA dalam proyek React, kita

perlu melakukan beberapa langkah. Pertama, kita perlu
menambahkan file manifest.json ke proyek kita. File ini berisi
informasi tentang aplikasi seperti nama, deskripsi, ikon, dan
preferensi layar penuh. Berikut contoh kode untuk
manifest.json

Selanjutnya, kita perlu menambahkan service worker ke proyek

kita. Service worker adalah skrip JavaScript yang berjalan di
latar belakang dan membantu dalam menyediakan fungsi
offline dan cache. Berikut adalah contoh kode untuk service
worker dalam file service-worker.js

React JS 101 From Basic to Advanced - Bahrul Rozak

Kode di atas akan meng-cache file yang diperlukan untuk
aplikasi kita, seperti halaman utama (index.html), skrip
JavaScript (app.js), dan file CSS (styles.css). Ketika pengguna
mengakses aplikasi dalam mode offline, service worker akan
mengambil konten dari cache daripada melakukan permintaan
ke server.

Terakhir, kita perlu menambahkan tag <link> ke dalam file

index.html untuk menghubungkan manifest dan service worker
ke aplikasi kita

Dengan langkah-langkah di atas, kita dapat membuat aplikasi

web yang dapat diakses secara offline, memberikan
pengalaman seperti aplikasi native kepada pengguna, dan
meningkatkan kinerja serta engagement pengguna.

Penggunaan TypeScript dalam React

React JS 101 From Basic to Advanced - Bahrul Rozak

Buat lo yang lagi belajar React, penggunaan TypeScript dalam
pengembangan aplikasi React itu sangat powerful, geng.
TypeScript adalah superset dari JavaScript yang menambahkan
fitur statis typing ke dalam kode JavaScript. Dengan TypeScript,
lo bisa menentukan tipe data dari setiap variabel, parameter
fungsi, properti objek, dan banyak lagi. Nah, ini sangat
bermanfaat dalam pengembangan aplikasi yang besar dan
kompleks karena membantu mencegah banyak kesalahan yang
mungkin terjadi saat runtime.

Contohnya, bayangkan lo punya komponen React sederhana

seperti ini

Di sini, kita menggunakan TypeScript untuk mendefinisikan tipe

properti name sebagai string. Ketika komponen ini digunakan,
TypeScript akan memastikan bahwa nilai yang diberikan untuk
properti name adalah tipe data string, sehingga mengurangi
kemungkinan kesalahan karena salah tipe data.

Selain itu, TypeScript juga memungkinkan lo untuk membuat

interface atau tipe data kustom untuk struktur data yang
kompleks. Misalnya

React JS 101 From Basic to Advanced - Bahrul Rozak

Dengan definisi tipe data seperti itu, lo bisa memastikan bahwa
objek user selalu memiliki properti id, name, dan email dengan
tipe data yang benar.

Integrasi TypeScript dengan React juga sangat mudah, karena

banyaknya dukungan dari tooling dan framework. Lo bisa
menginstall TypeScript ke dalam proyek React lo dengan
menggunakan create-react-app dan memilih opsi TypeScript
saat inisialisasi proyek.

Secara keseluruhan, penggunaan TypeScript dalam React dapat

meningkatkan keamanan dan kualitas kode lo, serta
mempermudah dalam bekerja dengan kode yang kompleks.

Pengujian Kinerja dengan React Profiler

Oke, jadi, React Profiler itu adalah alat yang digunakan untuk
menganalisis kinerja aplikasi React. Dengan React Profiler, lo
bisa melihat bagaimana komponen-komponen dalam aplikasi lo
bereaksi terhadap perubahan, seberapa sering mereka di-
render ulang, dan berapa lama waktu yang dibutuhkan untuk
merender setiap komponen. Dengan informasi ini, lo bisa
mengidentifikasi komponen mana yang mungkin
membutuhkan optimisasi untuk meningkatkan kinerja aplikasi
lo.

React JS 101 From Basic to Advanced - Bahrul Rozak

Untuk menggunakan React Profiler, pertama-tama lo perlu
mengimpor modul React Profiler dari pustaka React. Kemudian,
lo bisa memasang komponen React Profiler di sekitar bagian
dari aplikasi lo yang ingin lo analisis. Contohnya, lo bisa
memasang React Profiler di sekitar komponen tertentu yang
sering dirender ulang atau membutuhkan perhatian khusus
terkait kinerja. Berikut contoh penggunaannya

Pada contoh di atas, kita menggunakan <Profiler> untuk

mengelilingi komponen MyComponent. Properti id digunakan
untuk memberikan nama unik kepada profil yang dihasilkan
untuk komponen ini. Properti onRender adalah fungsi yang
akan dipanggil setiap kali komponen dirender ulang,
memberikan informasi tentang id komponen, fase render
(mount atau update), dan durasi aktual render dalam milidetik.

Dengan menggunakan React Profiler dan melihat output di

konsol, lo bisa mendapatkan wawasan yang berguna tentang
kinerja aplikasi lo dan mengambil langkah-langkah yang
diperlukan untuk meningkatkannya.

Penggunaan Error Boundaries

React JS 101 From Basic to Advanced - Bahrul Rozak

Jadi, Error Boundaries dalam React itu sebenernya kayak
semacam "pelindung" buat komponen-komponen React di
dalam aplikasi kita. Ketika ada kesalahan yang terjadi selama
render, dalam lifecycle method, atau di dalam konstruktor
komponen, biasanya React bakal nampilin error message dan
hentikan render seluruh komponen di bawahnya. Nah, dengan
menggunakan Error Boundaries, kita bisa mengatur bagaimana
cara menangani kesalahan itu tanpa harus bikin aplikasi kita
crash atau jadi blank page gitu.

Contohnya, kita punya komponen yang mungkin punya potensi

error, misalnya

Dalam contoh di atas, ErrorBoundary adalah komponen yang

bertindak sebagai Error Boundary. Ketika ada kesalahan yang
terjadi di dalam MyComponent, ErrorBoundary akan
menangkapnya dan menampilkan pesan "Something went
wrong." tanpa mengganggu tampilan komponen lain dalam

React JS 101 From Basic to Advanced - Bahrul Rozak

aplikasi. Ini membantu agar aplikasi tetap berjalan meskipun
ada kesalahan yang terjadi.

Penggunaan Web Components dalam React

Jadi, Web Components merupakan standar web yang

memungkinkan pembuatan komponen web yang dapat
digunakan ulang dan terisolasi dari aplikasi utama. Dalam
konteks React, penggunaan Web Components bisa menjadi
alternatif ketika kita ingin menggunakan komponen-komponen
yang telah ada dalam format Web Components di dalam
aplikasi React kita.

Contohnya, kita punya sebuah komponen Web Components

yang bertujuan untuk menampilkan kotak input sederhana
dengan label. Komponen tersebut disebut input-box.

Pertama, kita akan mendefinisikan komponen input-box

menggunakan tag <script type="module"> di dalam file HTML

React JS 101 From Basic to Advanced - Bahrul Rozak

Dalam contoh di atas, kita membuat sebuah kustom elemen
(custom element) dengan nama input-box yang memiliki
atribut label. Saat elemen input-box ditambahkan ke dalam
dokumen HTML, browser akan membuat instance dari
InputBox class yang telah kita definisikan sebelumnya, dan
menampilkan kotak input sesuai dengan struktur yang telah
kita tentukan di dalam constructor.

Untuk menggunakan komponen input-box ini di dalam aplikasi

React, kita cukup memasukkan tag <input-box> ke dalam
komponen React yang telah kita buat

React JS 101 From Basic to Advanced - Bahrul Rozak

Dengan demikian, kita dapat menggunakan komponen Web
Components di dalam aplikasi React kita dengan mudah,
sehingga memungkinkan kita untuk memanfaatkan komponen-
komponen yang sudah ada dalam format Web Components
tanpa perlu membuat ulang dalam format React.

Penggunaan CSS Modules

Nah, gue bakal jelasin nih tentang penggunaan CSS Modules

dalam React. Jadi, CSS Modules itu adalah salah satu teknik
yang bisa lo pake buat mengelola gaya (styling) dalam
komponen React tanpa khawatir tentang nama kelas (class)
yang tumpang tindih (overlap) antar komponen. Dengan
menggunakan CSS Modules, setiap kelas CSS akan dianggap
lokal oleh komponen yang mengimpornya, jadi lo bisa
memastikan bahwa gaya yang lo terapkan hanya berlaku di
dalam komponen tersebut.

Contohnya, misalnya lo punya file CSS yang namanya styles.css

dengan kode seperti ini

React JS 101 From Basic to Advanced - Bahrul Rozak

Terus, lo mau pake kelas container ini dalam komponen React
lo. Nah, daripada lo import langsung file CSS ini ke dalam
komponen, lo bisa pake CSS Modules. Caranya, lo rename file
styles.css jadi styles.module.css. Nah, dengan ngeganti nama
file ini, lo udah ngasih tau bundler (misalnya webpack) kalo file
ini adalah CSS Modules.

Terus, di dalam komponen React lo, lo bisa import kelas CSS ini
dengan cara kayak gini

Penting banget untuk diperhatiin bahwa saat lo import CSS

Modules, lo harus menggunakan nama objek yang sama
dengan nama file CSS Module tersebut (styles dalam contoh di
atas), karena objek ini berisi kelas-kelas CSS sebagai properti.
Jadi, kelas container dalam contoh di atas akan berlaku hanya
untuk komponen MyComponent, dan tidak akan
mempengaruhi kelas CSS dengan nama yang sama di
komponen lain. Gimana, udah ngerti belum?

Penggunaan GraphQL dalam React

Oke, temen-temen, jadi GraphQL itu adalah bahasa query yang

memungkinkan kita untuk mengambil data secara efisien dari

React JS 101 From Basic to Advanced - Bahrul Rozak

server ke client. Di React, kita bisa menggunakan GraphQL
untuk mengelola data dalam aplikasi kita dengan lebih baik.
Misalnya, kita punya aplikasi e-commerce yang membutuhkan
informasi tentang produk yang ditampilkan kepada pengguna.
Dengan GraphQL, kita bisa membuat query yang spesifik sesuai
dengan kebutuhan data kita, jadi nggak akan ada over-fetching
atau under-fetching data.

Contohnya, kita punya sebuah komponen React yang

menampilkan daftar produk. Kita ingin mengambil data produk
dari server dengan GraphQL. Pertama, kita perlu menginstal
Apollo Client, yaitu library GraphQL untuk React. Setelah itu,
kita bisa membuat query GraphQL untuk mengambil data
produk sesuai kebutuhan kita, misalnya ID, nama, harga, dan
gambar produk. Berikut contoh kodenya

Dalam contoh ini, kita menggunakan useQuery dari Apollo

Client untuk membuat query ke server GraphQL yang akan

React JS 101 From Basic to Advanced - Bahrul Rozak

mengembalikan daftar produk. Setelah mendapatkan data, kita
menampilkannya dalam komponen ProductList. Dengan
GraphQL, kita bisa mengambil data yang tepat sesuai
kebutuhan kita dalam satu request saja, tanpa perlu request
berulang kali.

Penggunaan Internationalization (i18n)

Nah, jadi penggunaan Internationalization (i18n) dalam aplikasi

React itu tujuannya adalah untuk memudahkan pengguna dari
berbagai negara atau bahasa dalam menggunakan aplikasi kita,
gue rasa. Jadi, dengan menggunakan i18n, kita bisa dengan
mudah menyesuaikan tampilan dan teks dalam aplikasi kita
sesuai dengan preferensi bahasa pengguna.

Contohnya, kita bisa memiliki berkas terpisah untuk setiap

bahasa yang ingin kita dukung, seperti bahasa Inggris, Spanyol,
atau bahasa lainnya. Dalam berkas-berkas ini, kita akan
memiliki daftar teks yang berbeda untuk setiap bahasa.
Misalnya, untuk teks "Hello, World!" dalam bahasa Inggris, kita
akan memiliki berkas seperti ini

Dan untuk bahasa Spanyol, kita akan memiliki berkas seperti ini

Selanjutnya, kita bisa menggunakan pustaka i18n seperti react-

i18next atau lingui.js untuk mengelola dan menyematkan teks-

React JS 101 From Basic to Advanced - Bahrul Rozak

teks ini ke dalam aplikasi kita. Contohnya, dengan react-i18next,
kita bisa melakukan hal berikut

Dalam contoh ini, useTranslation adalah hook yang digunakan

untuk mendapatkan fungsi t yang digunakan untuk
menerjemahkan teks berdasarkan bahasa yang aktif. Jadi,
ketika pengguna mengubah bahasa aplikasi, teks dalam
komponen ini akan otomatis diperbarui sesuai dengan bahasa
yang dipilih. Gimana, gampang kan?

Optimisasi SEO untuk Aplikasi React

Jadi, SEO (Search Engine Optimization) sangat penting untuk

meningkatkan visibilitas dan peringkat aplikasi atau situs web
kamu di hasil pencarian. Dengan optimisasi yang baik, kamu
bisa meningkatkan kemungkinan situs web atau aplikasi kamu
muncul di halaman pertama hasil pencarian, yang tentunya bisa
meningkatkan lalu lintas pengunjung.

Optimisasi SEO untuk aplikasi React melibatkan beberapa

langkah, salah satunya adalah menerapkan metadata yang
relevan. Metadata adalah informasi tambahan yang
menyediakan konteks tentang halaman web atau aplikasi kamu
kepada mesin pencari. Contohnya, kamu bisa menggunakan tag
<meta> dalam komponen <head> untuk menambahkan
deskripsi (description), judul (title), dan kata kunci (keywords)
yang relevan dengan konten halaman.

React JS 101 From Basic to Advanced - Bahrul Rozak

Berikut adalah contoh implementasi metadata dalam
komponen React

Selain metadata, kamu juga perlu memperhatikan penggunaan

URL yang ramah SEO, struktur HTML yang bersih, penggunaan
heading tags (<h1>, <h2>, <h3>, dll.) yang sesuai, dan
optimisasi gambar dengan menggunakan atribut alt yang
deskriptif.

Dengan menerapkan langkah-langkah optimisasi SEO ini, kamu

bisa meningkatkan visibilitas dan peringkat aplikasi React kamu
di hasil pencarian, yang tentunya akan menguntungkan untuk
mendapatkan lebih banyak pengunjung.

React JS 101 From Basic to Advanced - Bahrul Rozak

Penggunaan Lazy Loading

Lazy loading merupakan sebuah teknik dalam pengembangan

web di mana komponen atau modul aplikasi hanya dimuat saat
dibutuhkan, bukan pada saat halaman pertama kali dimuat.
Teknik ini sangat berguna untuk mengoptimalkan performa
aplikasi, terutama dalam mengurangi waktu muat awal (initial
load time) dan ukuran bundle aplikasi.

Dalam konteks React, lazy loading dapat diterapkan dengan

menggunakan fungsi React.lazy(). Misalnya, kita memiliki
sebuah komponen LazyComponent yang ingin kita muat secara
malas (lazy) saat komponen tersebut diperlukan. Berikut adalah
contoh implementasinya

Pada contoh di atas, komponen LazyComponent akan dimuat

secara asinkron (lazy) hanya saat komponen tersebut benar-
benar dirender di dalam komponen App. Saat komponen
LazyComponent sedang dimuat, akan ditampilkan pesan
"Loading..." sebagai fallback menggunakan Suspense.

React JS 101 From Basic to Advanced - Bahrul Rozak

Dengan menerapkan lazy loading, aplikasi dapat memuat
komponen secara bertahap sesuai kebutuhan, yang pada
akhirnya dapat meningkatkan performa aplikasi secara
keseluruhan.

Penggunaan Code Splitting

Yak, jadi Code Splitting itu adalah teknik dalam pengembangan

aplikasi web dengan React yang memungkinkan kita untuk
memisahkan kode aplikasi menjadi beberapa bagian atau
bundle yang lebih kecil. Nah, tujuan dari Code Splitting ini
adalah untuk mengurangi waktu muat (loading time) aplikasi,
terutama saat aplikasi berukuran besar. Jadi, gue bakal kasih
tau nih gimana cara kerjanya.

Misalnya, dalam aplikasi web kita punya beberapa halaman

atau komponen yang tidak semua harus dimuat saat pertama
kali aplikasi dibuka. Kita bisa menggunakan dynamic import di
React untuk memuat bagian-bagian tertentu hanya saat
dibutuhkan. Contohnya, kita punya halaman Dashboard dan
halaman Settings. Nah, kita bisa memisahkan kode untuk
halaman Settings, jadi ketika pengguna membuka halaman
Dashboard, kode untuk halaman Settings tidak perlu dimuat.

Berikut contoh penggunaan Code Splitting dengan dynamic

import di React

React JS 101 From Basic to Advanced - Bahrul Rozak

Dalam contoh di atas, kita menggunakan fungsi lazy dari React
untuk melakukan dynamic import komponen Dashboard dan
Settings. Jadi, kode untuk komponen-komponen ini akan
dimuat secara terpisah saat komponen-komponen ini benar-
benar diperlukan, bukan saat aplikasi pertama kali dimuat. Ini
bisa membantu mengurangi ukuran bundle awal aplikasi dan
meningkatkan performa aplikasi secara keseluruhan. Gimana,
paham gak penjelasan gue?

Penggunaan Serverless Functions dengan React

Jadi, penggunaan Serverless Functions dengan React itu

sebenernya tujuannya buat nge-handle operasi-operasi yang
butuh backend tanpa harus bikin backend server sendiri. Jadi
misalnya lo punya aplikasi React yang butuh nyimpen data ke
database atau ngambil data dari database, biasanya kan lo
bakal bikin API endpoint di backend server buat handle operasi-
operasi itu, kan? Nah, dengan Serverless Functions, lo bisa bikin
fungsi-fungsi kecil yang bisa dipanggil dari aplikasi React
langsung tanpa harus lewat backend server. Contohnya, lo mau
bikin fungsi buat nyimpen data ke database. Biasanya, lo bakal
bikin API endpoint di backend server buat itu. Tapi dengan
Serverless Functions, lo bisa bikin fungsi yang ngelakuin operasi
itu dan dipanggil langsung dari aplikasi React. Jadi, nggak perlu

React JS 101 From Basic to Advanced - Bahrul Rozak

repot-repot bikin backend server sendiri. Contoh codenya
mungkin kayak gini

Di contoh ini, kita bikin fungsi simpanData yang nge-handle

request untuk menyimpan data ke database. Fungsi ini bisa
dipanggil langsung dari aplikasi React tanpa harus lewat
backend server. Jadi, dengan Serverless Functions, proses
pengembangan jadi lebih cepat dan nggak perlu repot-repot
nge-handle backend server sendiri.

Penggunaan Websockets dalam React

Gue akan coba menjelaskan tentang penggunaan Websockets

dalam React dengan lebih detail. Jadi, Websockets adalah
sebuah protokol komunikasi dua arah yang memungkinkan
koneksi persisten antara klien (browser) dan server. Ini berbeda
dengan HTTP yang bersifat request-response, di mana klien
harus membuat permintaan baru setiap kali ingin
berkomunikasi dengan server. Dengan Websockets, klien dan
server dapat saling mengirim pesan secara langsung tanpa
harus melakukan permintaan baru setiap waktu.

React JS 101 From Basic to Advanced - Bahrul Rozak

Di React, kita bisa menggunakan library seperti socket.io-client
untuk mengimplementasikan Websockets. Pertama, kita perlu
menginstal library tersebut

Selanjutnya, kita bisa membuat koneksi Websockets ke server

dengan kode berikut

Pada contoh kode di atas, kita menggunakan useEffect hook

untuk membuat koneksi Websockets ke server saat komponen
di-mount. Kemudian, kita mendengarkan event connect untuk
mengetahui jika koneksi berhasil terhubung, dan event
message untuk menerima pesan dari server.

Untuk mengirim pesan dari klien ke server, kita bisa

menggunakan kode seperti ini

React JS 101 From Basic to Advanced - Bahrul Rozak

Ini akan mengirim pesan 'Hello from client!' ke server yang
kemudian bisa ditanggapi oleh server.

Penggunaan Websockets sangat berguna untuk aplikasi yang

membutuhkan komunikasi real-time, seperti aplikasi chat,
game online, atau kolaborasi dalam waktu nyata. Dengan
Websockets, kita bisa membuat aplikasi React yang responsif
dan interaktif dengan mudah.

React JS 101 From Basic to Advanced - Bahrul Rozak

Nah, temen-temen, sampe di sini aja dulu nih perjalanan kita
dalam belajar React JS dari dasar hingga advanced. Gue harap
materi-materi yang udah gue bahasin bisa bener-bener
ngebantu lo buat menguasai React JS dengan lebih baik. Jangan
lupa, proses belajar ngoding itu memang nggak selalu mulus,
tapi yang penting terus semangat dan jangan nyerah!

Gue juga mau ngucapin terima kasih yang sebesar-besarnya

buat lo yang udah mau nge-dedikasikan waktu dan tenaga buat
belajar bareng di sini. Semoga ilmu yang udah lo dapetin dari
ebook ini bisa bener-bener berguna buat karir dan
pengembangan diri lo ke depannya.

Oh iya, kalau lo punya saran atau kritik untuk perbaikan materi-

materi di ebook ini,
jangan ragu buat kontak gue lewat
email : [email protected]
Github : https://github.com/Bahrul-Rozak
Gue juga terbuka banget buat kolaborasi atau sharing ilmu di
sana. Terakhir, tetap semangat belajar dan jangan pernah
berhenti untuk terus mengembangkan diri!

Salam,
Bahrul Rozak

React JS 101 From Basic to Advanced - Bahrul Rozak