Table of Contents

Introduction 1.1
Buku Ini Untuk Siapa? 1.1.1

Harapan 1.1.2

Mengapa Belajar React 1.2

Membuat Komponen Pertama 1.3

Anatomi Dasar Komponen React 1.4
Render Method 1.4.1

JSX 1.4.2
Props 1.4.3

Event Handler 1.4.4

State 1.4.5
Membuat UI Sederhana Jquery & React 1.5

Komponen 1: Background Change 1.5.1

Komponen 2: Validasi Email 1.5.2
Hasil Observasi jQuery & React 1.5.3

Pengetahuan Lebih Lanjut 1.6

ES5 dan ES6 1.6.1
Redux 1.6.2
Mobx 1.6.3

Congratulation 1.7

1
Introduction

Welcome
Halo, salam kenal, nama saya Muhammad Azamuddin, orang-orang biasa memanggil
saya mas azam, kamu juga boleh menggunakan panggilan yang sama. Saya yang
mengelola facebook page @arrowfunxtion, bukan karena saya master atau pakar
javascript modern tapi karena saya memang sangat antusias sama si javascript dan
segala perkembangannya. Tapi kalo kamu mau panggil saya Developer Kreatif juga
boleh, namanya Developer Kreatif jadi harus banyak belajar dan banyak share untuk
meningkatkan skill dan kebermanfaatan ^_^

Okay, lanjut lagi, dulu kita mengandalkan jQuery untuk membantu kita membuat
tampilan yang ciamik, kini ada banyak library lain yang siap dipelajari, misal Angular,
React, Backbone, Ember, Vue,dll. Kenapa? karena banyak perusahaan besar maupun
startup sekarang mencari developer-developer yang menguasai framework dan library
tersebut, bahkan tidak mensyaratkan pendidikan. Salah seorang kawan saya, kebetulan
dia lebih muda dari saya, belum lulus kuliah, dia pernah bercerita bahwa dia
mendapatkan tawaran dari salah satu startup e-commerce besar di Indonesia dan juga
mendapatkan tawaran menjadi pengajar javascript modern dengan kisaran gaji 16-20jt,
semua itu karena dia menguasai pengembangan javascript modern. Selain itu,
menguasai framework-framework tersebut in sha Allah akan membuat hidup kita
sebagai developer lebih mudah dan jalan bagi kita menjadi seorang developer
profesional.

Nah kali ini saya ingin berbagi tentang salah satu library yang sering dipakai dalam
pengembangan web app modern, yakni ReactJS. Saya berharap buku ini bisa menjadi
pembuka bagi yang baru mulai belajar, terutama yang saat ini sudah bisa jQuery namun
masih mengalami kesulitan untuk mempelajari dunia javascript modern. Apakah kamu
pernah berpikir seperti ini:

Kenapa sih harus belajar library-library javascript modern, apakah jQuery saja
tidak cukup?
Kamu tidak mau belajar banyak konsep-konsep baru?
Ingin belajar framework/library javascript modern tapi khawatir butuh waktu
lama?
Ingin bisa membuat web app, mobile app, desktop app tapi kok sepertinya
terlalu banyak yang harus dipelajari ya.

2
Introduction

Meskipun hal-hal di atas berseliweran di pikiran kamu, tapi kamu juga memikirkan hal-
hal ini:

Saya ingin membuat web app modern tapi tidak tahu harus mulai dari mana;
Saya ingin memiliki skill seperti developer-developer profesional di luar sana;
Saya ingin bisa membuat user interface yang menarik dan kekinian;
Saya ingin mengembangkan web app secara cepat dan berkualitas;
Saya ingin basis kode saya mudah dibaca dan mudah dipelihara;
Saya ingin membuat aplikasi yang mudah diintegrasikan dengan layanan
ataupun aplikasi lain;

Maka dengan belajar React, kamu sudah ke jalan yang benar menuju keinginan-
keinginan di atas. Kabar baiknya di ebook ini saya akan mengupas dasar-dasar dan
fondasi yang harus kamu pahami dan penjelasan yang sejelas mungkin. Dan kita akan
bandingkan implementasi dengan jQuery vs React. Bagaimana, asyik bukan?

INGAT! Lebih baik belajar mati-matian di awal daripada nanti mati beneran pas bikin
web app. Bikin web app modern itu ada caranya, butuh persiapan yang matang, butuh
tool dan library yang tepat, sudah siap belajar library React ini? Silahkan lanjutkan
membaca...

3
Buku Ini Untuk Siapa?

Untuk memulai buku ini saya ingin sedikit bercerita tentang ide awal saya menulis buku
ini. Ceritanya begini, saya melihat alur pembelajaran pembuatan website selalu dimulai
dengan HTML, CSS & Javascript. Ya, tidak ada yang salah, karena sebelum belajar
server side memang seorang web developer harus sudah nyaman dengan ketiga hal
yang saya sebut itu. Tapi, biasanya yang dipelajari sebenarnya bukan Javascript,
melainkan jQuery, sebuah library membantu memudahkan manipulasi DOM. Apalagi
dengan tersedianya plugin-plugin yang sesuai kebutuhan. Betul?

Apakah jQuery jelek? Tidak juga, saya tidak berkata demikian. Dulu saya juga pengguna
jQuery, kehadiran jQuery sangat membantu saya dalam mengembangkan tampilan
website yang menarik. Untuk beberapa kasus, menggunakan jQuery sangatlah OK. Dan
saya tahu kamu menginginkan buku ini artinya sudah belajar dan paham bahwa React
penting untuk dipelajari. Dengan buku ini saya ingin membantu teman-teman yang
sebelumnya nyaman dengan jQuery untuk memulai belajar ReactJS.

Seiring dengan perkembangan dalam dunia web app development, banyak

bermunculan framework-framework javascript, misalnya Backbone, Ember, Angular,
Vue, ReactJS. Umumnya kehadiran framework-framework tersebut untuk mengatasi
permasalahan yang muncul ketika menggunakan jQuery. Apa permasalahan utama jika
menggunakan jQuery? Maintenance. Pemeliharaan aplikasi kita menjadi sulit, apalagi
jika basis kode kita cukup besar, akan timbul masalah-masalah seperti code spaghetti,
callback hell, software entropy, dll yang semuanya itu mengakar ke sulitnya memelihara
basis kode kita bila ingin melakukan perubahan.

Buku Ini Cocok Untuk Siapa?

Buku ini ditujukan untuk kamu yang sudah terbiasa dengan HTML, CSS dan
jQuery. Karena saya tidak akan menjelaskan dasar-dasar HTML, CSS ataupun
Javascript. Saya anggap kamu sudah cukup familiar dengan ketiga hal itu.
Buku ini bukan untuk yang sudah bisa ReactJS atau yang sudah pernah belajar
Angular, Backbone, Vue dan framework javascript lainya. Kamu bakal "cape deh",
karena memang buku yang ini bukan ditujukan untuk kamu! ^_^

4
Harapan

Dengan buku ini diharapkan pembaca dapat

Membuat React Komponen Pertama dengan ES5
Memahami cara kerja State dan Props
Anatomi Komponen React
Dasar Composite Komponen
Sedikit perbedaan syntax di React dengan HTML biasa

Hal yang perlu familiar

JSON / OBJECT
Method / Fungsi dalam Class

5
Mengapa Belajar React

Mengapa Mempelajari React?

Ada orang yang memerlukan jawaban pasti, mengapa harus melakukan sesuatu
termasuk mengapa harus belajar React? Dan inilah beberapa alasannya..

Apa itu ReactJS? React merupakan library javascript yang dibesut oleh Tim Facebook.
Ketika mempelajari React, kita harus tahu ada ReactJS dan ReactNative. Apa bedanya?
ReactJS digunakan untuk membuat UI web, sementara ReactNative digunakan untuk
mengembangkan native mobile apps, NATIVE, bukan hybrid. Jadi dengan belajar React,
kita menyelam sambil minum air (tenggelem donk), enggak. Maksudnya sekali belajar
bisa dipakai untuk membuat Web dan Mobile Native. Perlu catatan, apa yang dibahas di
buku ini adalah khusus ReactJS untuk Web.

React dipakai oleh internal Facebook baik untuk mengembangkan Facebook Timeline
maupun untuk aplikasi lainnya seperti Facebook Business Manager, Facebook Page
Mobile, Instagram, dll. Selain digunakan oleh Facebook, Whatsapp, React juga telah
diadopsi oleh startup besar semisal Asana, AirBnB, Docker Site, Syncano, UI
Wordpress.com terbaru, dan lain-lain. Mengapa begitu banyak yang tertarik
menggunakan React untuk mengembangkan UI mereka? Ada beberapa alasan yang
mendasarinya. Apa saja?

React hanyalah "V" dalam MVC

React tidak seperti Angular, Ember, Knockout. React bukanlah framework, dalam arti
React tidak menyediakan fitur-fitur terbundle seperti routing, model, alur data, dll karena
React memang hanyalah V dalam MVC. Namun bukan berarti react tidak powerful,
justru React sangat powerful dengan kesederhaannya. Kurva belajar react jauh lebih
mudah dibandingkan dengan kurva belajar library atau framework js lainnya. Meskipun
mudah dipelajari dan hanya "V" dalam MVC, namun React menjelma menjadi UI library
yang paling diminati.

Virtual DOM
React memanfaatkan virtual DOM, apa itu? virtual, yah artinya tidak nyata, atau semu.
Maksudnya React tidaklah seperti jQuery yang memanipulasi DOM secara langsung.
React bermain atau menggunakan diffing algorithm untuk mendeteksi perubahan

6
Mengapa Belajar React

kemudian mencari cara terefisien dalam mengupdate UI pada virtual DOM. Sehingga
performanya jauh lebih baik dibandingkan memanipulasi DOM secara langsung.

Berbasis Komponen
Dalam react kita berpikir komponen, kita akan membuat komponen. Komponen akan
memberikan kemudaan bagi kita dalam megembangkan aplikasi web modern. Dengan
komponen kita bisa bongkar pasang seperti bermain lego. Misal kita memiliki komponen
yang sudah kita buat yang akan menampilkan 5 article terbaru, komponen tersebut kita
beri nama maka, selanjutnya kita bisa menggunakan komponen
tersebut di manapun di project kita yang lain atau tim kita, cukup dengan memanggil
seperti menulis kode HTML biasa. Komponen kita menjadi reusable
dan bisa kita komposisikan sesuai kebutuhan.

Selain itu, kita juga bisa menggunakan komponen-komponen yang sudah dibuat oleh
komunitas react. Kita bisa cari komponen-komponen tersebut di https://react.rocks,
http://npmjs.com, https://khan.github.io/react-components/, https://react.parts/web, dll.
Banyak, tinggal pakai. No need to reinvent the wheel. Salah satu komponen bundle
yang saya sukai adalah material design for React http://material-ui.com.

React Native
Seperti yang saya jelaskan di awal bab ini, keuntungan kita belajar React adalah kita
bisa menerapkan pengetahuan kita untuk membuat Web dan Native Mobile Apps. Nah
untuk mengembangkan mobile native apps ini kita pakai React Native.

Selain alasan-alasan di atas, saya juga teringat apa yang saya share di Microsoft
Indonesia tahun 2016 yang lalu terkait React, antara lain:

Boost Productivity
Easy Collaboration (Developer & Designer)
Maintanable
Selengkapnya silahkan lihat di
https://slides.com/muhammadazamuddin/introduction-to-reactjs/live

7
Membuat Komponen Pertama

Membuat Komponen Pertama

Persiapan
Untuk memudahkan proses pembelajaran ini, kita akan bermain dengan JSBIN. Online
editor yang bisa menjalankan kode HTML, CSS, Javascript termasuk React. Namun kita
harus setup terlebih dahulu.

Langkah-langkah:

1. buka http://jsbin.com/
2. buat akun kalo belum punya (gratis).
3. buat BIN baru (file > new)
4. karena kita akan menggunakan React, maka kita tambahkan dulu library React dan
ReactDOM.
i. taruh kursor pada sebelum </body>
ii. klik Add Library > pilih React + React DOM 15.1.0
5. kita juga memerlukan Bootstrap
i. taruh kursor di antara tag head
ii. klik Add Library > pilih Bootstrap Latest
6. persiapan selesai

Persiapan JSBIN telah selesai, kamu coba perhatikan ada beberapa Tab jendela antara
lain HTML, CSS, Javascript, Console dan Output, fungsinya adalah untuk mengaktifkan
dan menonaktifkan jendela.

Membuat Komponen
Buat render point
Elemen utama dimana kita akan render Aplikasi React kita, kita hanya melakukan ini
sekali saja untuk Komponen paling atas. Pada jendela JSBIN yang baru saja kamu buat,
deklarasikan div dengan id "app".

Listing 1: Buat elemen sebagai render point pada Tab HTML

8
Membuat Komponen Pertama

JSX
Klik tab javascript pada jendela JSBIN. Lalu klik dropdown javascript, ganti ke JSX.
Untuk saat ini ikuti saja step-stepnya, di bab berikutnya akan dijelaskan lebih detail.

Listing 2: Deklarasi Komponen React

Render komponen yang baru kita buat.

Listing 3: Render komponen tersebut ke element dengan ID "app"

Secara sederhana begitulah membuat komponen di React, mudah bukan. Coba lihat tab
Output, seharusnya kamu melihat tulisan Hello World.

Penjelasan
Render Point
Membuat React app kita membutuhkan setidaknya satu elemen yang akan kita gunakan
sebagai render point. Dalam hal ini kita gunakan Gunanya adalah
untuk menempelkan aplikasi React kita. Dan hanya perlu satu render point.

JSX
JSX atau Javascript Syntax Extension merupakan ekstensi yang memudahkan kita
menulis komponen dalam bentuk kode yang mirip dengan HTML. Perhatikan kode di
dalam render, itu contoh kode JSX. Agar kita bisa menggunakan JSX pada praktiknya

9
Membuat Komponen Pertama

kita membutuhkan transformer.js atau jika di ES6 kita bisa menggunakan pre-compiler.
Tapi itu diluar scope dari buku ini. Untuk sekarang kita menggunakan JSBIN yang sudah
kita setup.

ReactDOM
ReactDOM merupakan module sendiri, kita memerlukannya agar kita bisa
menempelkan aplikasi kita pada render point. Kita bisa menggunakannya karena kita
sudah menambahkan library ReactDOM pada langkah setup. Untuk merender aplikasi
kita.

10
Anatomi Dasar Komponen React

Anatomi Dasar Komponen React

Dalam React, semuanya adalah komponen. Dan sebuah komponen memiliki anatomi
atau susunan bagian. Ibarat tubuh kita memiliki kaki, kepala, tangan, dsb, Komponen
React juga memiliki struktur serupa. Hal ini berbeda dengan jQuery yang tidak memiliki
struktur baku. Dengan adanya struktur pada React kita bisa lebih mudah dalam
mengelola kode kita. Mari kita lihat contoh pertama.

Anatomi dasar komponen react adalah sebagai berikut:

render method
JSX
props
state
event handler

Semuanya hanyalah javascript, jadi kalo kamu familiar dengan jQuery, kamu
kemungkinan akan familiar dengan Anatomi Komponen React. Baik, mari kita bahas
satu per satu.

11
Render Method

1. Render Method

Contoh di atas merupakan sebuah Class untuk membuat komponen yang kita beri nama
KomponentPertama. Class tersebut hanya memiliki satu method yaitu render. Render
merupakan method di mana kita mendeklarasikan apa yang akan muncul ketika kita
menggunakan KomponenPertama tersebut dalam aplikasi kita. Pada contoh di atas,
KomponenPertama jika dirender akan menghasilkan tulisan pada layar "Hello
Komponen React" dengan cetak tebal. Sesederhana itu.

Perhatian: Dalam membuat nama komponen kita harus membuatnya CamelCase, misal
Komponen, atau KomponenPertama, bukan komponen, komponen-pertama,
komponenPertama. Huruf pertama harus kapital. Hal ini merupakan konvensi dan untuk
membedakan antara tag HTML dengan Komponen React.

Untuk mencoba contoh di atas, buka JSBIN yang kita siapkan sebelumnya. Buka tab
"JSX", lalu tambahkan kode di atas, pada bagian paling atas. Setelah itu pada render
method "Komponen" component, tambahkan . Sehingga kode render
"Komponen" Component pada JSBIN menjadi seperti ini:

Selamat! Kamu baru saja belajar dasar composite component. Mudah bukan?
composite di sini maksudnya Kamu membuat komponen yang digunakan oleh
komponen lainnya. Inilah salah satu cara berpikir react, dan composite ini merupakan
pondasi dari reusable component.

12
JSX

2. JSX
Apakah kamu memerhatikan kode yang dikembalikan oleh method _render yang diapit
oleh "( )" ? apakah itu HTML? Bukan, kode yang MIRIP HTML itu disebut dengan JSX
(Javascript Syntax Extension). Merupakan Extensi untuk menulis javascript dengan
syntax yang menyerupai HTML. Dalam menulis JSX pada render method. Kita harus
memastikan beberapa hal, antara lain:

Nilai kembalian JSX pada method render harus terdiri dari satu tag paling luar
(root tag), tidak boleh lebih.

Contoh Benar:

Lihat di contoh kode method render sebelumnya, JSX paling atas dari method render
tersebut terdiri dari satu tag yaitu .

Contoh Salah (Error)

Contoh benar apabila ingin menampilkan nested tag

14
JSX

Mari kita ubah kode JSX pada contoh salah agar tidak error. Kita tahu tujuan dari kode
JSX tersebut adalah agar Komponen menampilkan tulisan "Hello Komponen React"
diikuti dengan "Kamu Siap Belajar React?". Tidak ada masalah sama sekali dengan
tujuannya, hal itu sangat mungkin. Tinggal kita perbaiki agar hanya terdapat satu tag
paling luar.

Semua tag harus benar-benar ditutup

Semua tag harus benar-benar ditutup. Apabila tidak, maka akan muncul error yang
menyebabkan Komponen tidak dapat dirender. Berbeda dengan HTML, ketika ada tag
yang tidak ditutup tetap akan jalan meskipun tampilannya rusak. React tidak akan
merender apabila ada tag JSX yang tidak ditutup.

Gunakan className apabila ingin memberikan class ke sebuah tag.

Dalam tag HTML kita terbiasa menggunakan class, hal ini tidak berlaku untuk JSX.
Untuk menambahkan class yang akan dibaca oleh kode CSS, kita gunakan className.
Apabila menggunakan class, tidak akan terjadi kegagalan render, namun class tidak

15
JSX

dibaca sehingga tampilannya tidak sesuai dengan class pada kode CSS kita.

Inline-style pada JSX menggunakan object

Selain perbedaan sintak saat pemberian class pada sebuah tag, sintak pemberian
inline-style juga sedikit berbeda dengan sintak pada HTML.

Sintak untuk style object adalah:

Nama properti ditulis seperti pada kode CSS biasa;

Nilai dari properti harus diapit tanda petik (" "), "red", "yellow", "left", "10px".
Sementara pada CSS biasa, kita gunakan red, yellow, left, 10px, dst tanpa tanda
petik;
Apabila nama properti lebih dari satu kata, contoh background-color, padding-left,
text-align, maka kita ubah menjadi snakeCase menjadi backgroundColor,
paddingLeft, textAlign, dst.

Contoh

16
JSX

Kode comment

Kode komentar sedikit berbeda dengan komen HTML.

17
Props

3. Props
Mari kita membuat komponen baru yang dapat kita setting propertinya. Seperti pada
HTML, misalkan tag memiliki beberapa properti, seperti action, sehingga kita
menulisnya . Nah komponen react juga bisa kita setting
propertinya.

Kita akan membuat komponen , komponen ini akan menyapa nama orang
tertentu sesuai dengan prop.

Kita buat komponen Sapa terlebih dahulu.

Pada deklarasi Class komponen di atas, perhatikan render methodnya. Ada kode
, apa maksudnya? maksudnya adalah, ganti kode tersebut dengan
properti yang dipassing ke Komponen . Lihat kode di bawah ini:

18
Event Handler

4. Event Handler
Event handler, merupakan method yang akan dipanggil ketika terjadi event yang
disebabkan misalkan oleh interaksi user. Ketika menggunakan jQuery, sering kita
memasang listener pada elemen di DOM. Event handler merupakan satu dari sekian
bagian dari komponen. Mari kita lihat contohnya, buat komponen berikut pada JSBIN,
tab "JSX", bagian paling atas.

Coba kamu gunakan komponen <Sapa/> tersebut pada komponen <Komponen/>,

jangan lupakan properti ya, seperti berikut:

Seharusnya kamu bisa melihat hasilnya pada tab "Output". Apa hasilnya? hasilnya
adalah sebuah tulisan "Halo, selamat belajar, Nama kamu" dan sebuah tombol dengan
label "Katakan Halo". Apabila tombol tersebut diklik, maka akan muncul alert "Haloooo,
Nama Kamu".

Selamat! kamu sudah belajar event handler pada react.

19
State

5. State
State adalah kondisi komponen. Segala sesuatu pasti memiliki kondisi, misal Buah, ada
buah yang segar, busuk, agak busuk, nah sebenarnya itu adalah state dari buah itu,
statenya masih baik, statenya udah busuk, dst. Contoh lain adalah mobil kita (yang
belum punya, semoga disegerakan), mobil kita saat ini katakan memiliki lebih dari satu
state, misal, state warnanya saat ini hitam, state pajaknya lunas, state ban masih baru,
dst. Nah seiring dengan berjalannya waktu, pasti state itu bisa berubah, misal buah yang
tadinya bagus menjadi busuk, mobil kita warna hitam, lalu kita cat menjadi putih, dst.
Nah, state ini menentukan tampilan luar bukan? buah segar dan buah busuk tampilan
luarnya beda bukan? Sama halnya dengan analogi-analogi tersebut, state pada
komponen react juga bisa kita gunakan untuk menentukan tampilan dari komponen kita.
Misal state warna merah, komponen kita berbackground merah, lalu kita ganti state
menjadi kuning, background komponen kita berubah menjadi kuning. Masuk akal
bukan?

State mirip dengan props, bedanya adalah state dibuat dan disimpan secara internal.
Sementara props bisa diset dari luar Komponen. Selain itu, props bersifat static, artinya
sekali dibuat maka props tidak dapat diubah, sementara state bersifat dapat diubah. Dan
state ini sangat penting, karena bisa kita gunakan untuk beberapa fungsi, misal untuk
menyimpan data, menentukan UI, dll.

Kita akan mengubah sedikit perilaku dari komponen yang sudah kita buat. Kita
ingin komponen Sapa tersebut akan menampilkan tiga buah tombol, masing-masing
tombol tersebut dengan label nama orang yang berbeda. Bila tombol tersebut diklik,
maka tulisan di atasnya, akan menyapa nama orang yang ada di label tombol.

21
State

Apa hal baru yang kita temukan dari contoh kode di atas? Ada yang bisa menjawab?

method getInitialState
kode
kode

getInitialState

method ini digunakan untuk mendefinisikan state default atau kondisi awal komponen
. Method getInitialState menghasilkan sebuah state object. Pada contoh di atas,
state object tersebut memiliki satu properti yaitu . Inilah state yang dihasilkan
pada contoh di atas:

kode

Kode ini artinya, tampilkan state kepada dari komponen . Kondisi awal state
kepada adalah? Yup, betul "Andi". Artinya kode akan dirender
menjadi "Andi". Sehingga komponen pada saat dirender pertama kali akan
memunculkan tulisan "Halo, selamat belajar, Andi" diikuti oleh 3 tombol di bawahnya.

kode

22
State

Kode ini berfungsi untuk mengubah state komponen kita. Dalam contoh di atas, kita
menggunakan untuk mengubah state kepada dari komponen
dengan nilai namaOrang sesuai dengan tombol yang diklik.

Apa yang terjadi ketika kita mengubah state komponen?

Ketika kita mengubah state komponen, maka secara otomatis react akan memanggil
method render dari komponen yang berubah. Dengan artian, komponen tersebut
dirender ulang dengan state terbaru.

Komponen state kepada = "Andi" -> Klik tombol Joni -> state kepada berubah menjadi
Joni -> Render ulang dengan state kepada = "Joni". Sehingga komponen dirender
browser menjadi "Halo, selamat belajar, Joni".

23
Membuat UI Sederhana Jquery & React

Overview
Kita akan membuat perbandingan antara implementasi jQuery dan React dalam
membuat UI sederhana. Saya berusaha membuat contoh-contoh di buku ini
sesederhana mungkin, mengabaikan faktor desain dan estetika. Tujuannya adalah agar
kita bisa lebih fokus memahami fitur-fitur dasar React.

Kita akan membuat dua komponen masing-masing menggunakan jQuery dan React.
Sehingga diharapkan kita akan mengetahui perbedaan jQuery dan React dari sisi

Event handling
UI Update
Struktur

Pada bab sebelumnya saya sudah menjelaskan tentang Anatomi Dasar Komponen
React sehingga kali ini saya akan menuliskan contoh kode membuat UI Sederhana
dengan jQuery dan React, kamu tidak harus mengikutinya, tapi kamu silahkan
perhatikan bagaimana dua implementasi kode bisa berjalan. Silahkan..

24
Komponen 1: Background Change

Komponen 1: Background Change

jQuery
HTML

Javascript (jQuery)

React
HTML

Javascript (JSX)

25
Komponen 1: Background Change

JSBIN
http://jsbin.com/dumesa/edit?html,js,output REACT

http://jsbin.com/xorucoj/6/edit?html,js,output JQUERY

26
Komponen 2: Validasi Email

Komponen Validasi Email

jQuery
HTML

Javascript (jQuery)

React

27
Komponen 2: Validasi Email

HTML

Javascript (JSX)

JSBIN
http://jsbin.com/juweqeb/1/edit?html,js,output JQUERY

http://jsbin.com/konohe/edit?js,output REACT

28
Hasil Observasi jQuery & React

Hasil Observasi jQuery & React

Kamu sudah melihat dua implementasi pembuatan UI sederhana pada bagian
sebelumnya. Sekarang kamu sudah mulai paham perbedaan dan kemiripan dalam:

struktur komponen user interface

event handling
pengelolaan state

Struktur Komponen UI
Dalam jQuery kita menaruh kode kita dalam HTML. Lalu di tempat lain yang terpisah,
kita menuliskan kode javascript kita yang akan memanipulasi DOM kode HTML kita.
Biasanya dengan metode seperti ini, kita seringkali mencampur adukkan antara kode
HTML dan Javascript, memang aplikasi kita berjalan tidak ada masalah tapi dalam skala
yang lebih besar, hal ini bisa membingungkan untuk melakukan perubahan. Apalagi
ketika kita bekerja sama dengan developer yang belum familiar dengan kode kita, butuh
waktu yang lebih lama untuk mempelajari letak dan alur kode jQuery kita terlebih dahulu.

Event Handling
Sebenarnya mirip implementasi event handling antara jQuery dan React, pada jQuery
kita meletakkan listener di suatu kode javascript, kita pilih dulu komponen yang akan kita
dengarkan, lalu kita pasang callback jika terjadi event. Di react kita letakkan handler
sebagai method dari class komponen tersebut, sehingga posisinya menjadi lebih jelas.

30
Hasil Observasi jQuery & React

32
Hasil Observasi jQuery & React

33
Pengetahuan Lebih Lanjut

Pengetahuan Lebih Lanjut

Latihan Komponen Welcome Screen

http://jsbin.com/gobadi/edit?html,js,output

Topik Advanced
Kita baru saja mempelajari dasar dari React, lalu apa selanjutnya? Banyak hal yang bisa
memudahkan kamu ketika menggunakan React, antara lain menggunakan sintaks ES6,
menggunakan state container seperti Redux atau menggunakan observer pattern
seperti Mobx. Tapi kesemuanya adalah opsional, akan tetapi jika kamu serius ingin
belajar React, saya sangat menyarankan untuk mempelajarinya. Tidak harus semuanya,
minimal ES6, dan pilih antara Redux atau Mobx.

Kabar baiknya, @arrowfunxtion berkomitmen untuk share hal-hal di atas. Oleh karena
itu like dan share @arrowfunxtion ya.

35
ES5 dan ES6

ES5 dan ES6

Apa yang sudah kita pelajari pada bab-bab sebelumnya menggunakan sintaks ES5,
asumsi saya, teman-teman terbiasa menggunakan ES5 sesuai dengan target audience
buku ini. Namun, pada praktiknya teman-teman mungkin akan tertarik untuk
menggunakan ES6. Apa itu? ES6 atau EcmaScript 6, merupakan standar javascript
terbaru dan belum semua browser mendukungnya.

Untuk menggunakan ES6, maka kita memerlukan bantuan pre-compiler semisal babel.
Jadi apabila teman-teman ingin memanfaatkan fitur-fitur ES6, seperti Arrow Function,
Spread Operator, dll, teman-teman bisa mempelajari Babel, Webpack, dan sintak ES6
itu sendiri. Yang jelas bukan nambah ribet ya, tapi banyak fitur-fitur powerful yang siap
kamu pakai!

Apa contohnya?

Arrow Function

Arrow function sangat berguna sekali dalam pemakaian sehari-hari terutama jika kita
menggunakan class-class komponen.

Spread Properties

36
ES5 dan ES6

Dan masih banyak lagi fitur-fitur ES6 lainnya. Jadi kamu sekarang semakin tertarik untuk
mempelajari React dan ES6, like dan share http://fb.com/arrowfunxtion ya. Eh tunggu
dulu, masih ada yang keren lagi untuk kamu padukan dengan React, apa itu? Redux
dan Mobx, apa itu? Silahkan lanjutkan membaca ...

37
Redux

Redux
Redux merupakan state container yang akan membantu developer menulis kode yang
clean, terstruktur rapi dan konsisten. React terkenal dengan alur data yang satu arah
dan umumnya menggunakan implementasi dari arsitektur Flux. Namun, banyak orang
menganggap Flux justru menambah kerumitan dalam workflow mereka sehingga
lahirlah Redux. Dengan redux diharapkan developer mampu menerapkan Flux tanpa
mengadopsi kerumitannya.

Seperti apa sih redux? silahkan bisa dibaca di http://redux.js.org/.

Namun sayangnya, sebagian orang menanggap Redux pun masih agak rumit, lalu
beberapa orang seperti saya justru lebih nyaman menggunakan MobX, apa itu MobX?
Baca halaman selanjutnya ya..

38
Mobx

Mobx
MobX adalah tool favorit saya, sangat simpel dan tidak banyak aturan yang harus saya
patuhi. Saya bisa implement sesuai dengan kebutuhan saya. MobX bukanlah state
container seperti Redux. Justru karena itulah, Mobx lebih mudah untuk dipelajari dan
diterapkan, setidaknya itu untuk saya, Developer Kemarin Sore.

Menggunakan MobX ibarat menemukan tambatan hati buat si React. Kamu mungkin
belum begitu memahami mengapa bisa begitu, untuk itu tetap stay tune dengan
http://facebook.com/arrowfunxtion agar bisa terus update.

39
Congratulation

Selamat!
Kamu baru saja mempelajari dasar-dasar React sehingga kamu sekarang lebih paham
keunggulan dibandingkan menggunakan jQuery saja. Apalagi setelah ini?

Terima Kasih, Semoga Bermanfaat

Eh, sebelum kamu tutup ebook ini, kamu perlu tahu ini, beberapa waktu lagi saya
akan launching situs belajar React seacara interaktif. Kabar baiknya, semua boleh
belajar di situ alias GRATIS untuk semua.

Oleh karena itu,

40
Congratulation

Mari tetap bersilaturahmi dengan saya,

silaturahmi membuka rezeki ^_^
facebook: Muhammad Azamuddin
linkedin: https://www.linkedin.com/in/azamuddin/
facebook page: @ArrowFunxtion

KEEP CODING, BE CREATIVE!

41