Pengenalan	ReactJS Table	of	Contents 1.	Pendahuluan i.	Persiapan	sebelum	berkenalan ii.	Hal	Baru 2.	Instalasi	ReactJS i.	Instalasi	Perkakas ii.	Buat	Projek	Baru iii.	Build	System	dengan	Gulp 3.	Mengenal	ReactJS i.	Spesifikasi	Komponen 4.	Learning	by	Doing i.	Cara	Kerja 2
Pengenalan	ReactJS Pengenalan	ReactJS ReactJS	adalah	framework	untuk	membangun	User	Interface	yang	dibuat	oleh Facebook.	Akhir-akhir	ini	Facebook	sedang	gencar-gencarnya	membagikan	hasil hacking	mereka	selama	membangun	tak	hanya	dari	ranah Pengembangan	Web,	bahkan	hingga	perangkat	mobile	iOS	dan	Android	dengan	React Native.	Masih	banyak	lagi	hasil	hacking	Facebook	yang	sedang	mereka	bagikan.	Hal inilah	yang	saya	suka	dari	Facebook,	mereka	membagikan	sesuatu	yang	sudah	mereka buktikan	performancenya. Yap..	mereka	memakai	versi	beta	di	Facebook	sendiri	sebelum	mempublikasikannya. Hal	ini	yang	membuat	saya	kagum	dengan	Facebook.	Sejak	itu	saya	memfokuskan	diri untuk	berkiblat	ke	Facebook	dalam	hal	Development.	Sudah	banyak	yang dipublikasikan	oleh	facebook	seperti	yang	akan	kita	bahas	disini,	ReactJS.	Masih	banyak yang	sudah	di	open	source	kan	oleh	Facebook	seperti	React	Native	(Membuat	aplikasi native	dengan	ReactJS,	iOS	dan	Android),	GraphQL,	Relay,	Flux,	ImmutableJS	dan perkiraan	makin	banyak	lagi.	Tapi	saya	akan	membahasnya	dibuku	terpisah.	Agar	kita bisa	mengikuti	semua	framework	tersebut,	sangat	disarankan	untuk	memulainya	dari ReactJS.	Inilah	kenapa	saya	menuliskan	ReactJS	terlebih	dahulu,	agar	kita	bisa mengikuti	perkembangan	yang	sedang	dipakai	di	Facebook. Pendahuluan 3
Pengenalan	ReactJS Persiapan Sebelum	memulai,	ada	beberapa	persiapan	yang	harus	terpenuhi	terlebih	dahulu. NodeJS Sebenarnya	tanpa	NodeJS	kita	bisa	membuat	aplikasi	web	dengan	ReactJS,	namun	kita disini	tidak	hanya	mengejar	"bisa	jalan"	tetapi	juga	mengejar	"berjalan	dengan optimal".	Maka	saya	tekankan	untuk	mengikuti	best	practice	yang	sudah	ada,	yakni dengan	bantuan	nodejs	untuk	keperluan	build	system	seperti	uglify	file	javascript, penyatuan	file,	compile	less	ke	css	ataupun	sass	ke	css	dan	masih	banyak	lagi	kegunaan nodejs	untuk	memudahkan	kita	para	pengembang	web. NPM NPM	sudah	jadi	satu	dengan	NodeJS,	bagi	anda	yang	sudah	terbiasa	dengan	npm anda	bisa	skip	ke	persiapan	berikutnya.	Bagi	anda	yang	masih	belum	mengenal	apa	itu NPM,	akan	saya	kupas	dengan	singkat.	Sesuai	dengan	namanya	Node	Package Manager,	tugasnya	adalah	sebagai	package	manager	untuk	ekosistem	nodejs.	Sama seperti	composer	kalau	di	php.	Mendeklarasikan	dan	memuat	semua	dependensi modul	suatu	projek,	yang	akan	disimpan	di	package.json	di	root	folder	suatu	projek. Jika	masih	belum	familiar	anda	masih	bisa	mengikuti	buku	in,	nanti	pasti	akan	terbiasa. Browserify Browserify	membantu	kita	dalam	menata	susunan	file	javascript	kita,	bahkan	hingga mengecilkan	file	javascript	kita	atau	sering	disebut	dengan	minification.	Jika	anda	masih bingung	anda	tetap	bisa	mengikuti	buku	ini,	seperti	biasa..	pasti	nanti	akan	terbiasa. Ikuti	saja. Sebenarnya	ada	alternatif	lain	seperti	Webpack,	tapi	saya	rasa	Browserify	lebih	stabil untuk	belajar. Gulp Gulp	membantu	kita	dalam	task	automation,	melakukan	beberapa	task	dengan	satu	kali Persiapan	sebelum	berkenalan 4
Pengenalan	ReactJS perintah.	Seperti	build	process,	compile	less/sass	dan	lain	sebagainya.	Seperti	biasa	kita mengikuti	best	practice	yang	ada.	Untuk	saat	ini	task	automation	yang	stabil	untuk ekosistem	nodejs	adalah	gulp.
Koneksi	Internet	Stabil Koneksi	internet	dibutuhkan	untuk	menginstal	dependensi	yang	akan	kita	pakai	dalam ekosistem	pengembangan	kita,	seperti	reactjs,	browserify,	gulp,	compiler	less	dan	lain sebagainya.
Persiapan	sebelum	berkenalan 5
Pengenalan	ReactJS Hal	Baru Banyak	hal	baru	yang	digunakan	didalam	ReactJS,	seperti	EcmaScript	versi	ke	6	atau sering	disebut	dengan	es6.	JSX	untuk	penyusunan	komponen,	state	dan	props.	Untuk menghindari	kesalah	pahaman	saat	belajar,	lebih	baik	mengenal	hal	hal	baru	ini	lebih dahulu. ES6 Javascript	yang	sering	kita	gunakan	adalah	ES5,	masih	banyak	sintaks	jelek	yang	ada, bahkan	class	pun	tidak	ada	disini.	Untuk	mengindahkan	struktur	code	base	kita,	ReactJS menyarankan	untuk	menggunakan	ES6.	Seperti	biasa,	ikuti	best	practice	yang	sudah ada. JSX JSX	adalah	XML	dalam	javascript.	Pertama	saya	dengar	hal	ini..	Bukannya	sangat	buruk jika	template	kita	dijadikan	satu	dengan	logic?	Tunggu..	disini,	di	ReactJS,	tidak	ada yang	namanya	template.	Yang	dikenal	disini	adalah	komponen.	seperti .	Bayangkan	betapa	mudahnya	jika	anda	bisa	menyusun	google	map	view hanya	dengan .	Di	ReactJS	anda	bisa!! Didalam	JSX	juga	ada	beberapa	variabel	yang	bisa	kita	gunakan,	yakni	state	dan	props. Untuk	apa	mereka? Props Props	adalah	properti	yang	disertakan	dalam	suatu	komponen	dari	parentnya.	Lebih bersifat	inherit.	Contohnya, ,	dalam	class GoogleMap,	kita	bisa	menggunakan	atribut	yang	disertakan	didalam	komponen tersebut	dengan	memanggil ,	contohnya . State State	adalah	variabel	internal,	seperti	props	tapi	props	adalah	variabel	yang	datang	dari Hal	Baru 6
Pengenalan	ReactJS luar,	sedangkan	state	adalah	variabel	yang	sudah	ada	didalam	suatu	komponen.	cara memanggilnya	yakni	dengan
Hal	Baru 7
Pengenalan	ReactJS Instalasi	ReactJS 8
Pengenalan	ReactJS Instalasi	Perkakas Seperti	yang	sudah	dibahas	diatas,	perkakas	yang	kita	perlukan	adalah	NodeJS,	NPM,
Browserify,	dan	Gulp.
Install	NodeJS	dan	NPM Untuk	memasang	NodeJS	silakan	menuju	homepage	NodeJS	untuk	menginstal,
disarankan	untuk	menggunakan	versi	terbaru	dari	NodeJS.	Saat	buku	ini	ditulis,	versinya adalah	v4.0.0.	Sedangkan	NPM	versi	2.14.2.
Install	Browserify	dan	Gulp Browserify	dan	Gulp	harus	diinstall	secara	global,	yakni	dengan	menambahkan menginstal.	Setelah	NodeJS	dan	NPM	terinstal,	instal	browserify	dan	gulp	dengan perintah
Instalasi	Perkakas saat
Pengenalan	ReactJS Instalasi	Perkakas 10
Pengenalan	ReactJS Projek	Baru Semua	proses	dalam	buku	ini	sudah	tersedia	di	github,	silakan	clone	repositori	ini
toko
online
reactjs	karena	saya	akan	sangat jarang	memasukkan	kode	dibuku	ini	agar	tetap	sederhana	dan	tidak	panjang.	Jika	anda ingin	menulis	ulang	silahkan,	karena	tulis	ulang	kode	bisa	membuat	kita	semakin mengerti	alurnya.	Tapi	jika	tidak	ingin	repot,	bisa	copy
paste	saja	direpositori	ini.
Jika	anda	sudah	terbiasa	membuat	project	baru	di	ekosistem	NodeJS,	anda	bisa melewati	chapter	ini.	Tapi	jika	belum	silakan	ikuti	sampai	selesai.
Buat	Projek Untuk	mengawali	projek,	buat	projek	npm	terlebih	dahulu	dengan	perintah lalu	masukkan	detail	yang	anda	inginkan	seperti	gambar	berikut.
Buat	Projek	Baru 11
Pengenalan	ReactJS Install	Dependency Dependency	adalah	semua	module	yang	bisa	dicari	di	Module yang	kita	butuhkan	akan	disediakan	oleh	npm.	Dengan	perintah:
react	adalah	module	ReactJS	yang	akan	kita	pakai,	react
router adalah	router	yang	digunakan	react	dalam	navigasi	single	web	page.	Sedangkan	opsi	-
save	adalah	instruksi	agar	modul	tersebut	disimpan	di	package.json Buat	Projek	Baru 12
Pengenalan	ReactJS Install	Development	Dependency Disini	kita	akan	mengunduh	modul
modul	untuk	keperluan	development	seperti	gulp,
browserify,	compiler	less	dan	lain	sebagainya.	Sama	seperti	menginstall	dependency,
hanya	saja	dengan	parameter	-
save
dev Jika	berhasil	akan	muncul	gambar	seperti	berikut:
Buat	Projek	Baru 13
Pengenalan	ReactJS Okay	kita	sudah	berhasil	membuat	projek	baru.	Selanjutnya	kita	akan	membuat	build system	dengan	gulp.
Buat	Projek	Baru 14
Pengenalan	ReactJS Build	System	dengan	Gulp Build	System	adalah	sistem	yang	kita	bangun	agar	semua	task	development	seperti compile	less/sass,	uglify	javascript,	css	minify	dsb	bisa	menjadi	satu	kali	perintah	saja. Tentu	saja	mengikuti	best	practice	yang	ada. React	memiliki	beberapa	perlakuan	khusus	dalam	build	system,	kita	akan	menggunakan Gulp	sebagai	task	runnernya	dan	Browserify	sebagai	module	bundlernya.	Bagi	yang belum	tau	Browserify,	cara	kerjanya	seperti	require.js	tetapi	menggunakan	sintaks nodejs	dalam	memanggil	modul.	Namun	tidak	seperti	require.js	yang	memuat	semua modul	secara	asinkron,	Browserify	menyambung	semua	modul	menjadi	satu	file.	Anda tetap	bisa	mengikuti	buku	ini	meski	belum	mengenal	Browserify	terlalu	dalam. Tetap	di	project	yang	sudah	kita	buat	diatas,	buat	file	baru	di	root	folder	dengan	nama gulpfile.js	dan	sesuaikan	dengan	gulpfile.js	yang	ada	direpositori. Build	System	dengan	Gulp 15
Pengenalan	ReactJS Mengenal	ReactJS Tidak	seperti	framework	pada	umumnya,	ReactJS	memberi	kita	sedikit	API.	Yang	mana sangat	memudahkan	pengembang	dalam	mempelajarinya.	Jika	mempelajari	framework lain	harus	menghafal	semua	API,	di	ReactJS	kita	hanya	butuh	memahami	konsep kerjanya	saja.	Jika	sudah	paham,	waktu	kita	hanya	tersita	untuk	menata	logika	aplikasi kita	saja.	ReatJS	adalah	framework	berdasarkan	komponen,	bukan	template.	Karena ReactJS	adalah	framework	untuk	membangun	User	Interface. Dalam	suatu	komponen	ada	dua	variabel	data,	yakni	state	dan	props.	state	adalah	data interal	dari	suatu	komponen,	sedangkan	props	adalah	data	yang	diwariskan	dari komponen	parentnya.	Untuk	lebih	jelasnya	kita	akan	buat	komponen	baru.	Di	chapter ini	anda	tidak	diharuskan	menulis	kode,	cukup	lihat	saja	indahnya	sintaks. Berikut	ini	adalah	dasar	code	base	ReactJS	dalam	membuat	suatu	Komponen. Yap,	sesingkat	itu.	Mari	kita	urai	disini	tiap	barisnya. 1.	Muat	ReactJS 2.	Ambil	Component	dari	React.Component	(destrukturisasi	dari	ES6). Mengenal	ReactJS 16
Pengenalan	ReactJS 3.	Buat	komponen	dengan	deklarasi	class	baru	bernamakan	Komponen	dengan meng
extends	Component.
4.	Konstruktor,	dengan	parameter	props.
5.	Sampaikan	props	ke	parent.
6.	Definisikan	state,	data	internal.
7.	Objek	javascript	biasa.
8.	Render	method,	WAJIB	ada.
9.	render()	method	harus	mengembalikan	value	berupa	JSX.	dikurung	dengan	().
10.	JSX,	bisa	berupa	komponen	lain	ataupun	komponen	html	seperti	div,	h1,	p	dan lain
lain,	sedangkan	untuk	menampilkan	data	gunakan
11.	Render	Komponen	ke	document.body	dengan	props	external.
Selesai,	sederhana	bukan?	Jika	anda	masih	ragu	silakan	dipahami	lagi.	Karena	pattern inilah	yang	nantinya	akan	dipakai	disemua	komponen	yang	akan	kita	buat.	Saya tekankan	jangan	dipraktekkan	terlebih	dahulu,	cukup	mengerti	saja.
Lalu	untuk	event?
Pada	baris	16,	bisa	dilihat	bahwa	button	mempunyai	listener	onClick	yang	diisi	dengan this._buttonClick	yang	mengarah	ke	method	_buttonClick()	di	baris	10.	Itu	saja.	Ingat	isi fungsi	dengan	menutupinya	dengan
Tapi	bentar,	jika	props	adalah	data	external,	data	apa	saja	yang	bisa	dimasukkan?
Mengenal	ReactJS 17
Pengenalan	ReactJS Untuk	props,	terserah	data	apa	saja,	array	bisa,	string	bisa,	objek	juga	bisa,	bahkan fungsi	pun	juga	bisa.
Fungsi?
Pada	baris	ke	21,	props	external	berisi	fungsi	yang	kemudian	oleh	Komponen disematkan	pada	event	onClick	di	button.	Jadi	jika	button	di	klik	maka	fungsi	yang dipanggil	adalah
Diatas	adalah	dasar	dasar	ReactJS,	masih	ada	beberapa	API	yang	nantinya	sangat membantu	dalam	beberapa	skenario	tertentu.
Mengenal	ReactJS 18
Pengenalan	ReactJS Spesifikasi	Komponen ReactJS	memberikan	beberapa	kemudahan	yang	sangat	dibutuhkan	pada	skenario tertentu.	Baik	dari	segi	performance	maupun	dari	segi	logic.	Disamping	itu,	React	juga memiliki	spesifikasi	tertentu	dalam	pembuatan	komponennya. Spesifikasi Dalam	pembuatan	komponen	react,	harus	memenuhi	kriteria	tertentu,	mulai	dari	buat komponen,	lalu	memberi	implementasi	render()	dan	sebagainya. Membuat	Komponen Dalam	membuat	komponen,	ada	2	cara.	Bisa	dengan	class	di	ES6,	atau	dengan React.createClass()	di	ES5.	Dalam	buku	ini	kita	hanya	fokus	di	ES6.	Biar	up-to-date	gitu. Yap	itu	saja,	tapi	akan	terjadi	error	karena	kita	belum	memberi	satu	method	wajib, render() Method	Render() Method	render()	harus	ada	di	setiap	class	komponen,	dan	wajib	mengimplementasikan return	JSX.	JSX	bisa	berupa	komponen	lain	maupun	komponen	native	html	seperti	div, p,	b,	button	dll.	Lalu	bagaimana	kita	memberi	state	awal? Method	getInitialState() Method	getInitialState()	dipanggil	pertama	kali	komponen	di	render()	dan	harus	return object	yang	nantinya	dijadikan	state	awal.	Mengingat	kita	menggunakan	ES6,	kita	bisa melakukannya	di	constructor,	tidak	perlu	method	ini. Masih	banyak	lagi,	bisa	dibaca	disini: Spesifikasi	Komponen 19
Pengenalan	ReactJS Untuk	mempercepat	pemahaman	lebih	baik	di	skip	dulu,	next.
Lifecycle	Methods Lifecycle	methods	digunakan	untuk	melakukan	hal	tertentu	disela
sela	waktu	komponen di	render.	Mungkin	terdengar	asing,	tapi	jika	dilanjutkan	pasti	tau	maksudnya.
Mounting:	componentDidMount()
Dieksekusi	sekali	saja,	yakni	setelah	pertama	kali	komponen	di	render.	Dalam	arsitektur flux,	method	ini	berguna	untuk	me
listen	store	jika	ada	perubahan	state.
Mounting:	componentWillMount()
Dieksekusi	sekali	saja	yakni	saat	komponen	akan	dirender	pertama	kali.
Updating:	componenWillUpdate(object	nextProps,	object nextState)
Dieksekusi	tiap	komponen	akan	diupdate,	sama	seperti	render()	tapi	terjadi	sebelum render()	dipanggil.	Biasanya	digunakan	untuk	persiapan	render	ulang	atau	filter	apapun yang	kita	dapat	dari	nextProps/nextState.
Updating:	componentDidUpdate(object	prevProps,	object prevState)
Dieksekusi	tiap	komponen	selesai	di	render()	(tidak	untuk	render	pertama	kali,	hanya saat	update	state).	Disini	kita	bisa	mendapatkan	state	dan	props	sebelum	terjadi update,	yakni	di	prevProps	dan	prevState.
Updating:	nextProps)
Dieksekusi	tiap	komponen	mendapatkan	props	jika	parent	dari	komponen	ini	dirender ulang.	Kita	bisa	mengakses	props	baru	di	nextProps Updating:	shouldComponentUpdate(object	nextProps,
Spesifikasi	Komponen 20
Pengenalan	ReactJS object	nextState) Wajib	return	berupa	boolean,	jika	return	false	maka	komponen	tidak	akan	di	render(). Jika	true	maka	komponen	akan	di	render()	dengan	props	dan	state	baru.	Biasanya digunakan	untuk	tweak	performance,	yakni	jika	ada	perubahan	DATA	di	props	atau state,	komponen	hanya	akan	diubah	jika	DATA	antara	state	baru	dan	state	lama	ada perubahan.	Jika	tidak	maka	tidak	di	render().	Nanti	akan	sangat	berguna	saat	kita membahas	Immutable	Data	dengan	ImmutableJS.	Nanti. Unmounting:	componentWillUnmount() Terjadi	sekali	saat	komponen	akan	dibuang	dari	DOM.	Sering	digunakan	untuk	meng- unlisten	store	dalam	flux. Selebihnya	bisa	dibaca	disini:	specs.html Oke	kita	sudah	mengenal	sifat-sifat	ReactJS,	waktunya	kita	bermain	dengannya	:). Spesifikasi	Komponen 21
Pengenalan	ReactJS Learning	by	Doing Kita	sudah	tahu	caranya	membuat	komponen,	memberi	data	internal	maupun	external pada	komponen,	dan	merender	komponen.	Tapi	apa	itu	saja	cukup?	Jelas	tidak..
Sangat	sulit	menjelaskan	masalah	kepada	seseorang	yang	dia	sendiri	tidak	tahu	kalau dia	punya	masalah.	Solusinya?	Buat	masalah,	pecahkan.
Di	chapter	ini	kita	akan	belajar	bagaimana	menyusun	sistem	aplikasi	dengan	ReactJS.
Untuk	mempercepat	pemahaman,	cara	belajar	kita	adalah	dengan	mencontoh	project yang	sudah	ada,	mencontoh	artinya	melihat	dan	melakukannya	kembali.	Jika	hanya copy
paste	namanya	menyalin.	Pengalaman	pribadi	saya,	saya	sangat	cepat	belajar ketika	saya	menulis	ulang	kode	contoh.	Tapi	jika	tidak	suka	ya	terserah	anda,	bisa langsung	copy.
Seperti	biasa	kode	kodenya	ada	di	github,	tepatnya	di	commit
toko
online
Skenarionya	seperti	ini,	saya	ingin	ada	interaksi	add	to	cart	dan	remove	from	cart	dari deretan	produk	saya	di	aplikasi	ini.	Tampilan	ini	saya	dapat	dari
mode
switch/
Learning	by	Doing 22
Pengenalan	ReactJS Dan	akan	kita	buat	seperti	ini Struktur	direktori Struktur	direktorinya	seperti	ini Learning	by	Doing 23
Pengenalan	ReactJS Learning	by	Doing 24
Pengenalan	ReactJS Cara	Kerja Saya	akan	memberikan	beberapa	clue	dalam	project	ini.	Ada	2	module	npm	yang	saya gunakan.	Yakni dan . Module	React adalah	module	utama	dalam	membangun	aplikasi	ReactJS,	tidak	perlu	perlakuan khusus	mengingat	kita	sudah	membahasnya	di	atas. Module	React	Router adalah	modul	yang	digunakan	untuk	menata	routing	aplikasi	kita. Penggunaannya	tetap	menggunakan	JSX. Mulai	dari	baris	ke	7,	kita	memuat	semua	pages.	Dandi	baris	ke	13	kita	membuat yang	kemudian	akan	dipakai	sebagai	router	kita.	Handler={}	artinya,	apa	yang terjadi	jika	route	aplikasi	berada	di	#/nama_path	. Untuk	dokumentasinya	bisa	dibaca	disini	Sekarang	tugas	anda	adalah,	menyontoh	project	di	atas.	Untuk	aset	silakan	disalin, Cara	Kerja 25
Pengenalan	ReactJS untuk	file	javascript	ditekankan	untuk	ditulis	ulang. WTFFFFF...	tulis	ulang	sebanyak	itu??? Heheheh..	Jadi	gini	ceritanya,	anda	ingin	jadi	ReactJS	developer..	Jadi	harus	mengikuti jejaknya.	Ya	inilah	jejaknya.	Jejak	kode.	Paling	tidak	dengan	metode	ini,	anda	akan mengerti	bagaimana	pola	pikir	ReactJS	Developer. Saya	menerapkan	metode	ini	karena	saya	juga	ingin	memanfaatkan	imajinasi	anda dalam	belajar.	Saat	anda	menulis	ulang,	meski	hanya	menulis	ulang,	nantinya	imajinasi anda	yang	akan	berkeliaran,	"ini	apa	sih?	oh	mungkin	untuk	yang	ini,	eh	bukan,	oohhh ternyata	untuk	ini	ya".	Saya	rasa	metode	ini	lebih	menantang	daripada	hanya	membaca buku	buku	macam	buku	dokumentasi.	Lebih	asyik	untuk	dipelajari	dibandingkan	yang bergaya	dokumentasi.	Kuncinya	satu,	believe	your	imagination. Menjalankan	Contoh Untuk	menjalankan	contoh,	clone	repositori	diatas,	lalu	install	dependency	dengan menjalankan: Setelah	semua	terinstall,	jalankan	gulp	dengan: Lalu	akan	muncul	seperti	ini: Cara	Kerja 26
Pengenalan	ReactJS Selanjutnya	silakan	buka	untuk	melihat	hasilnya Repo	diatas	juga	berjalan	di
Cara	Kerja 27