Daftar Isi I. Pengenalan ReactJs II. Instalasi III. Dasar-dasar ReactJs 1. JSX 2. Component 3. State 4. Props IV. Component Lifecycle V. Latihan 1. Todo List 2. React Router ** BatamJS Community**

1.
Akhmad Fauzi Hasibuan
SOFTWARE DELIVERY PROFESIONAL
REACT NATIVE PROGRAMMER
akhmadfauzihasibuan​@gmail.com​ | (m)
+6281371666601 | ​https://github.com/fauzzi
| ​http://www.thelekta.byethost8.com
Pengenalan ReactJs
Batam June 02, 2018
BatamJs Community
React
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACE

2. 2
Kata Pengantar
Modul ini merupakan bahan latihan ReactJs untuk pemula yang belum pernah memulai
samasekali atau pun yang sudah pernah membuat aplikasi pakai ReactJs sebagai bahan ulasan
konsep dasar dari ReactJs. Setelah memahami konsep dasar dari ReactJs ini, kita akan lebih
paham dan percaya diri untuk bisa membuat tampilan website dengan ReactJs.
Pengetahuan dasar yang diperlukan untuk dapat melanjutkan materi ini adalah Javascript,
HTML5, da CSS. Walaupun ReactJs tidak menggunakan sepenuhnya HTML, JSX adalah suatu
komponen mirip dengan Tag HTML yang kita bentuk secara sendirinya. Pengetahuan
EcmaScript 2015 juga di perlukan untuk pengetahuan dasar kita.
Daftar Isi
I. Pengenalan ReactJs
II. Instalasi
III. Dasar-dasar ReactJs
1. JSX
2. Component
3. State
4. Props
IV. Component Lifecycle
V. Latihan
1. Todo List
2. React Router

3. 3
I. Pengenalan ReactJs
Original Author ​Jordan Walke ​(​https://github.com/jordwalke​) Software Engineer di Facebook​.
Developer ReactJs ​saat ini ->​ ​Facebook, Instagram & Community.
Write in ​JavaScript, ​Platform ​Cross Platform.
Community & Forum :
● https://stackoverflow.com/questions/tagged/reactjs
● https://stackoverflow.com/questions/ask?tags=reactjs
● https://discuss.reactjs.org/
● https://js.coach/
Merupakan salahsatu Facebook framework. Biasanya digunakan untuk membuat UI Component
yang dapat di kompilasi sama seperti bahasa pemrograman lainnya. Untuk memanipulasi DOM
dengan model pemrograman yang sederhana dan kinerja yang lebih baik. ReactJs juga dapat
ditampilkan di segi server menggunakan Node, dan native app React Native.

4. 4
Fitur-fitur di ReactJs
● Virtual DOM
Langkah umum cara kerja Virtual DOM
❏ Setiap kali ada perubahan data yang mendasar, seluruh UI di render kembali
dalam representasi Virtual DOM
❏ Kemudin perbedaan antara representasi DOM sebelumnya dan yang baru
dihitung.

5. 5
❏ Setelah perhitungan selesai, DOM yang sebenarnya akan diperbaharui hanya
dengan hal-hal yang benar-benar berubah.
● JSX
Merupakan ekstensi sintak di Javascript. Dalam pengembangan ReactJs tidak
diperlukan akan tetapi dianjurkan.
JSX Code sebagai berikut :
Akan di kompail sebagai berikut :

6. 6
● Component
Di React semunya adalah tentang Component, berfikir bagaimana caranya membuat
suatu component seperti Tag HTML. Hal ini mempermudah kita saat pengembangan
nantinya , Tampak pada gambar di bawah ini:

7. 7
● Unidirectional data flow and Flux
React mengimplementasikan aliran data satu arah (one-way data flow) yang
membuatnya mudah untuk kita nalar. Flux merupakan pola (pattern) yang membantu
menjaga data kita satu arah juga. Kapan pun setiap nilai ​prop​ berubah, memungkinkan
menampilkan perubahan component dari fungsi render component tersebut.
● License
React dilisensi oleh Facebook Inc. Dokumentasi berlisensi oleh CC BY 4.0.

8. 8
Keuntungan di ReactJs
● Menggunakan virtual DOM yang merupakan object JavaScript. Ini akan meningkatkan
kinerja aplikasi, karena JavaScript Virtual DOM lebih cepat daripada DOM biasa.
● Dapat digunakan disisi client dan server serta dengan framework lainnya seperti Laravel,
Flask, dan sebagainya.
● Dengan pola Component struktur kode lebih mudah di baca & gampang dimaintain untuk
aplikasi skala besar sekalipun.
Batasan di ReactJs
● Hanya mencakup lapisan view layer di aplikasi, untuk tahap lebih lanjut diperlukan
teknologi lain untuk tools lainnya yang lebih lengkap oleh pengembang.
● Inline template dan JSX, yang agak aneh untuk pengembang pemula.

9. 9
II. Instalasi
Yang perlu di install untuk bekerja ReactJs adalah Node.js, command line React interface dan,
IDE yang digunakan adalah Visual studio code(4).
Node.js
Node.js dapat di download (1) dan installer node.js bebarengan dengan npm yang merupakan
package manager dari javascript. NPM sering digunakan untuk menambahkan package lainnya
seperti react router dom (npm install react-router-dom --save) (2) untuk keperluan di suatu
project. Juga dapat menggunakan alternatif lain package manager seperti yarn (3). Yarn sama
hal nya dengan npm. Usahakan ambil yang terbaru atau bisa ikut version dari gambar di bawah
ini. Untuk dapat memastikan node.js atau pun yarn terinstall, dapat menggunakan perintah di
bawah ini:
> node --version
> npm --version
> yarn --version
1. https://nodejs.org/en/download/
2. https://github.com/ReactTraining/react-router
3. https://yarnpkg.com/docs/install/
4. https://code.visualstudio.com/download
Berikut adalah version yang sudah terinstal.

10. 10
React CLI
Setelah package manager di install, untuk dapat menggunakan package manager ReactJs dapat
di install melalui command prompt dengan perintah :
Perintah di atas akan menghasilkan suatu perintah lagi untuk memulai membuat aplikasi
ReactJs.
Percobaan setelah instalasi:
Tunggu sampai proses download selesai maka akan membuat sebuah folder project my-app.
Setelah selesai lanjut ke folder my-app tadi dengan perintah di bawah ini:
Untuk dapat menjalankan project kita tadi, cukup hanya perintah di bawah ini makan akan
membuka sebuah halaman web di browser kesayangan kita, biasanya dengan port 3001.

11. 11
III. Dasar-dasar ReactJs
1. JSX
ReactJs menggunakan JSX untuk templat nya. Bukan JavaScript biasa namun tidak
perlu menggunakannya, berikut cuap-cuap dari JSX:
- Lebih cepat karena melakukan optimasi saat di kompilasi ke JavaScript.
- Aman, sebagian kesalahan di tangkap oleh kompilasi.
- Mudah untuk menulis template bagi yang sudah terbiasa dengan HTML
Silahkan buat folder screensApp.jsx
Ubah index.js kita menjadi

12. 12
Untuk latihan bisa di buat script di bawah ini:

13. 13
2. Component
Untuk membuat Component cukup mudah, misal kita akan membuat Component
MyHeader yang nanti nya di panggil di main aplikasi kita. Sebagai contoh silahkan buat
struktur folder berikut :
Isi dari MyHeader adalah copy paste dari App.js sebelumnya, beserta style nya yang kita
ubah namanya menjadi MyStyle.css

14. 14
Import MyHeader.js di index.js file yang sudah kita buat sebelumnya
3. State
State dikatakan sebagai mutable yang artinya ialah nilainya dapat berubah atau
diperbaharui dalam suatu waktu. Untuk dapat memahami penggunaan state, ubah
sedikit main project kita App.jsx sebagai berikut:

15. 15
4. Props
Prop dapat dikatakan sebagai suatu ketetapan yang artinya adalah nilainya tidak dapat
berubah dalam suatu waktu (immutable). Penggunaan prop cukup gampang, ubah
sedikit Component MyHeader.js kita menjadi :

16. 16
IV. Component Lifecycle
ReactJs memiliki aturan dari Component yang kita buat, ini merupakan suatu fungsi bawaan
dari ReactJs untuk melihat alur dari pertamakali aplikasi di jalankan sampai aplikasi itu berhenti
atau di tutup. Ada beberapa fungsi bawaan dari Component sebagai berikut :
● componentWillMount
Dieksekusi sebelum dirender, di sisi server maupun client.
● componentDidMount
Dieksekusi setelah dirender. Misal ada AJAX request makan kita bisa
update state yang sudah kita buat sebelumnya disini.
● componentWillReceiveProps
Dipanggil segera setelah ada pembaharuan update sebelumnya. Disini
juga bisa update state.
● shouldComponentUpdate
Harus ada return value true or false, Ini akan mengakibatkan component
akan di perbaharui atau tidak. Default nya adalah true. Jika kita yakin
bahwa komponen tidak perlu dirender setelah state atau props
diperbarui, Kita dapat mengembalikan nilai false.
● componentWillUpdate
Di panggil sebelum rendering.

17. 17
● componentDidUpdate
Dipanggil setelah rendering.
● componentWillUnmount
Dipanggil setelah component unmounted dari DOM. Maksudnya
unmounted dari main aplikasi kita.
Untuk dapat memahami bisa di tambahkan fungsi berikut di dalam code
kita sebelumnya dan lihat hasilnya di inspector browser masing-masing.

18. 18
V. Latihan
1. Todo List
https://reactjs.org/
2. React Router
https://www.tutorialspoint.com/reactjs/reactjs_router.htm

19. 19
Terimakasih
Akhmad Fauzi Hasibuan
SOFTWARE DELIVERY PROFESIONAL
REACT NATIVE PROGRAMMER
akhmadfauzihasibuan​@gmail.com​ | (m) +6281371666601 |
https://github.com/fauzzi​ | ​http://www.thelekta.byethost8.com
Please follow and we will get in touch in my social media :
https://www.facebook.com/fauzi.jobs
https://www.linkedin.com/in/fauzzi/
https://twitter.com/twitt_fauzi
https://www.instagram.com/fauzzzzi/
https://www.behance.net/hsbusub349
https://stackoverflow.com/users/1378205/fauzi
Discord @fauzi
Semoga Bermanfaat

20. 20
Please join with us
Untuk bisa berbagi lebih lanjut :
BatamJS Community
Berkaya Bersama dengan Teknologi JS Terkini
https://www.facebook.com/groups/321352068292193/
Telegram Channel
@batamjs
t.me/batamjs