React Development Practices

Chrisando Ryan
Day 1
5 Mei 2021

Creating Solutions through Education with Creativity and Technology

 Agenda
• Introduction to React JS Development
• React Components: The Basic
• React Components: Class Component
Introduction to React JS
 What is React, and Why?
• React di-develop oleh Facebook
• React adalah Library UI, bukan Framework.
• React membantu developer membuat UI Component yang reusable
• React bersifat sangat deklaratif, efisien, dan fleksibel
 The Environment
• IDE
• Node JS
• NPM atau Yarn
• Creativity dan Curiosity
 The Environment
• IDE
• Node JS
• NPM atau Yarn
• Creativity dan Curiosity
 The Environment
• IDE
• Node JS
• NPM atau Yarn
• Creativity dan Curiosity
 The Environment
• IDE
• Node JS
• NPM atau Yarn
• Creativity dan Curiosity
 One-fit-all Way to Learn
React JS

https://reactjs.org/docs

...atau dokumentasi lain yang tersedia di Internet

 ES6 vs JavaScript
• ES6 adalah EcmaScript 6, atau nama keren dari ES2015
• ES6 beda dari JavaScript? Tidak.
• ES6 adalah nama resmi dari JavaScript kekinian, alias JavaScript v6.
 ES6 vs JavaScript, Apa yang
Berbeda?
• Template Literals
• Promises
• Maps
• Arrow Function + Spread Function
• …dan masih banyak lagi.

Penasaran Lebih Dalam?

http://es6-features.org/
Hands-on: Deep Dive into ES6.
 The Very First React
Application
npx create-react-app react-showdown
cd react-showdown
npm start
React Project Structure

• node_modules/
• package.json
• src/App.js
• src/components/
• src/assets/
• src/pages/
• src/constants/
 React Project Structure
• Haruskah Project Structure Seperti Itu? Tentu Tidak.

Prinsipnya:
• Hindari Terlalu Banyak Nesting (Folder di dalam Folder)
• …Jangan Dipikirin Banget.
 Using Third-party Library
• React JS punya Developer Community yang sangat luas.
• Banyak library yang sudah dibuat developer lain dan siap digunakan
di project React;
• Namun perlu berhati-hati terhadap dependency hell.
Using Third-party Library
Using Third-party Library
 Security Precautions in using
Library
• Selalu gunakan library yang bisa dipercaya dan di-maintain oleh
banyak developer. Kenapa?
• Dengan menggunakan library, kita menjalankan code buatan
developer lain pada aplikasi kita.
• Gimana kalo developer tersebut punya niat terselubung?
 Security Precautions in using
Library
• Selalu gunakan library yang bisa dipercaya dan di-maintain oleh
banyak developer. Kenapa?
• Dengan menggunakan library, kita menjalankan code buatan
developer lain pada aplikasi kita.
• Gimana kalo developer tersebut punya niat terselubung?
 Security Precautions in using
Library
• Ketika menggunakan Third-party Library, pastikan lakukan update
terus menerus. Kenapa?
• Beberapa contoh Third-party Library sudah ditemukan mengandung
security vulnerabilities
Hands-on: My First React App.
React Components
 Understanding JSX
• Apa itu JSX? Javascript + XML/HTML
• JSX adalah Syntax Extension untuk JavaScript
• Untuk menulis text HTML/XML ke dalam source code JavaScript
• Memiliki tipe file/extension .jsx
 Understanding JSX
• Kenapa JSX? Karena Prinsip React JS.
• Rendering Logic + Data Handling Logic, Harus Jadi Satu!

The Example
 React Component
• Apa itu Component? Reusable bits of code.
• Sama seperti fungsi atau function pada JavaScript;
• Kalau fungsi atau function mengembalikan value (bool, string, etc.),
• Component akan mengembalikan HTML untuk di-render.
• Ada dua jenis Component:
• Class Component (Stateful Component)
• Functional Component (Stateless Component)
 React Component
Login Box Component

Image Component

Header Component Button

Component

Info Component
 Class Component
• Adalah sebuah JavaScript class yang meng-extends React.Component
• Dapat menyimpan data/informasi dalam bentuk state
• Dapat memiliki banyak function didalamnya
• Memiliki constructor, seperti class pada umumnya.
 Class Component Lifecycle
• Gunanya? Untuk menjalankan code pada timing tertentu saat
Component sedang diproses pada Browser.
 Class Component Lifecycle
componentDidMount()
• Dijalankan ketika Component akan di-render pada Browser
• Timing terbaik untuk membuat Network Request (Load API, etc.) dan
membuat Subscriptions: setTimeout(), setInterval(), dsb.
 Class Component Lifecycle
componentDidUpdate()
• Dijalankan ketika Component mengalami perubahan (ada state yang
berubah, ada data (props) yang diterima, etc.)
• Dapat digunakan juga sebagai timing untuk membuat Network
Request (Load API, etc.)
 Class Component Lifecycle
componentWillUnmount()
• Dijalankan persis sebelum Component dihilangkan dari tampilan
Browser dan dihancurkan.
• Timing terbaik untuk melakukan clean-up (mis., membatalkan
Network Request, membatalkan timer/countdown, dsb.)
 Class Component Lifecycle
componentDidCatch()
• Dijalankan ketika terdapat error pada saat proses rendering, atau
error pada proses pemanggilan constructor sebuah Component
• Momen terbaik untuk meng-handle berbagai jenis error, melakukan
validasi terhadap logic flaw, dsb.
Hands-on: Creating Component.
 Component Props
• Sama seperti pada function, programmer dapat melempar data ke
dalam Component; menggunakan props (singkatan dari properties)
• props tidak hanya dapat melempar value, tapi juga function lain.
• props bersifat Read-Only. Artinya?
• props sebaiknya digunakan hanya untuk melempar data antar
Component, tidak untuk menyimpan data.
 Component Props
• props pada Class Component

• props pada Functional Component

Hands-on: Passing Data between
Components.
THANK YOU