Tutorial React Bahasa Indonesia (2020)
Panduan lengkap belajar react untuk pemula.
Intro
React atau ReactJS adalah JavaScript library yang digunakan untuk membuat User Interface (UI) pada sebuah web atau aplikasi.
React mulai dikembangkan oleh Facebook di tahun 2013, dibuat oleh seorang software engineer Facebook bernama Jordan Walke.
React berawal dari sebuah prototype bernama FaxJS. Terinspirasi oleh XHP, HTML component library untuk PHP. (Wikipedia)
Hingga tulisan ini dibuat React adalah salah satu JavaScript library yang paling populer di kalangan web developer.
Berdasarkan hasil Developer Survey tahun 2020 oleh stackoverflow.com, React menempati peringkat pertama untuk kategori The Most Wanted Web Framework.
Konsep
8 konsep React yang akan dipelajari di tulisan ini:
- JSX
- React Component
- Data Handling
- Event Handling
- Life-cycle Method
- Component Styling
- Form
- React Hooks
Sebelum membahas kedelapan konsep tersebut kita perlu lakukan persiapan berupa project setup dan install React.
Project Setup
Sebelum menginstall React ada beberapa tool yang harus disiapkan:
- Visual Studio Code (Code Editor)
- Node JS
- Git (untuk OS Windows)
- Terminal
Untuk code editor tidak harus Visual Studio Code, kamu bebas memilih.
Install React
Karena React adalah sebuah library, React bisa ditambahkan ke dalam sebuah project JavaScript (existing project) atau kita bisa membuat aplikasi React (React App) dari awal.
Ada beberapa cara yang bisa dipilih:
create-react-app
create-react-app (CRA) adalah package yang paling banyak digunakan untuk membuat sebuah React App.
Menggunakan CRA untuk membuat sebuah project React App.
- Buka Terminal atau Integrated Terminal di VS Code (Menu Terminal -> New Terminal)
- Jalankan perintah berikut:
my-app adalah nama dari React App, kamu bisa ganti sesuai keinginan
3. Kemudian pindah direktori dengan run command cd myapp
kemudian npm start
4. Buka browser dan navigasi ke http://localhost:3000
Jika tidak ada masalah, kamu akan mendapat tampilan seperti ini pada browser:
CDN (Content Delivery Network)
Kita menggunakan CDN jika ingin menambahkan React ke sebuah dokumen HTML.
Langkah-langkah yang harus dilakukan:
- Buat DOM container
DOM container dapat berupa sebuah element <div />
<div id="container"></div>
2. Tambahkan React ke dalam script tag <script />
<!-- Load React. --><script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script><!-- Load our React component. -->
<script src="button.js"></script>
3. Buat React Component
const domContainer = document.querySelector('#container');
ReactDOM.render(e(Button), domContainer);
Online IDE / Code Playground
Cara terakhir dan termasuk yang paling simple adalah menggunakan Online IDE / Code Playground seperti Stackblitz, CodeSandbox atau Repl.it
Contoh dengan Stackblitz:
- Buka Stackblitz
- START A NEW WORKSPACE -> Pilih React JavaScript
1. JSX
Pada dasarnya menulis code di React bisa menggunakan syntax JavaScript, tetapi mari kita lihat perbedaannya:
JavaScript
JSX
Sekilas JSX adalah perpaduan antara JavaScript & HTML, namun pada dasarnya JSX memungkinkan kita untuk menyertakan code HTML ke dalam code JavaScript.
Syntax JSX akan terlihat sangat familiar jika kamu tahu XML, karena facebook sendiri mengatakan bahwa JSX adalah syntax extension yang mirip dengan XML. (Sumber)
Karena React digunakan untuk membuat UI, kemampuan dapat menyertakan HTML ke dalam JavaScript jelas sangat membantu.
Oleh karena itu, penggunaan JSX pada React sangat direkomendasikan.
Expression
JavaScript expression (seperti variable atau string) pada JSX ditulis di dalam curly braces { }
:
2. Component
Sebuah React App tersusun dari banyak React Component.
Analogi
Jika sebuah React App dianalogikan sebagai rumah maka React component adalah bagian-bagian yang menyusun rumah tersebut.
Sebuah rumah umumnya terdiri dari bagian-bagian seperti kamar, dapur, ruang tamu atau halaman.
Sedangkan pada sebuah React App, component dapat berupa Header, Page, Footer, Button dll.
Component dan Function JavaScript
Pada dokumentasi React dijelaskan bahwa konsep component pada React mirip dengan konsep function pada JavaScript.
- Output dari function dapat berupa value atau function lain, sedangkan output dari component adalah React Element
- Baik function atau component dapat ditempatkan dimana saja di source code dan dapat digunakan berkali-kali (reusable)
Sehingga bisa dikatakan bahwa sebuah React App tersusun dari banyak component sebagaimana JavaScript App tersusun dari banyak function.
Membuat Component
Ada dua cara membuat component React, yaitu menggunakan ES6 Class syntax atau JavaScript Function.
ES6 Class
JavaScript Function (Arrow Function)
Kamu boleh memilih salah satu diantara kedua cara diatas.
Mengkombinasikan antara React Class Component dengan React Function Component dalam satu project bukanlah ide yang bagus.
Kecuali dalam kondisi tertentu seperti memanfaatkan hooks di project React yang sudah lama (sebagian besar component ditulis dalam ES6 class).
Nama dari component harus diawali dengan huruf kapital.
Kita tidak bisa memberi nama component seperti ini:
const app = () => {
...
}
Huruf pertama dari nama component harus kapital:
const App = () => {
...
}
Hubungan antar Component
Konsep yang biasa dipakai untuk menjelaskan hubungan antar component adalah konsep parent, child dan sibling.
Pada ilustrasi diatas hubungan antara Parent 1 component dan Parent 2 component adalah sibling.
3. Data Handling
Bagaimana React menghandle data yang ada didalam sebuah component?
Jawabannya adalah dengan props & state.
Props
props adalah singkatan dari properties.
React component adalah seperti function JavaScript, jika function JavaScript bisa menerima sebuah argument maka React component bisa menerima props.
Dimana nilai/value dari props ini akan ditampilkan pada React element.
<Component propsName="value" />
Data di dalam props ini dapat diakses di dalam component atau child component dengan mengakses object bernama props.
Pada contoh code diatas, kita menambahkan props bernama name ke component Dino. Kemudian name diakses di dalam Dino component dari sebuah object bernama props.
Yang perlu diperhatikan adalah props bersifat read-only, itu artinya kita bisa menggunakan value dari props namun tidak bisa mengubahnya.
Untuk menghandle data yang berubah-ubah (read/write), React menggunakan state
State
state pada dasarnya adalah sebuah object di dalam component yang valuenya hanya bisa diakses dimana state itu dibuat, sehingga tidak bisa diakses dari component lain.
Keberadaan state sangat penting dalam sebuah component, karena dalam sebuah aplikasi React atau React App perubahan dalam component atau proses render seringkali bergantung pada state.
Inisialisasi State
Karena kita menggunakan React Function Component, maka untuk inisialisasi state kita menggunakan React Hooks useState(). (Pembahasan React Hook akan dibahas di seri ke-9)
const state = useState('t-rex');
Value awal dari state diatas adalah t-rex.
Mengubah State
Meskipun state bisa diubah valuenya tapi kita tidak bisa mengubahnya secara langsung seperti ini:
state = 'Brachio';
Kita harus menggunakan method khusus bernama setState()
const [state, setState] = useState('t-rex');setState('Brachio'); // value berubah dari t-rex ke Brachio
Contoh:
Pada code diatas value dari state akan berubah dari T-rex ke Brachio ketika function handleChange() dieksekusi/button diklik.
Pilih Mana antara props & state ?
Jawabannya adalah keduanya, karena komunikasi data antar component sulit dilakukan tanpa memakai keduanya.
Props & State pada React Class Component
Untuk mempelajari props & state pada React Class Component silahkan lihat disini.
Unidirectional Data Flow
Kita perlu memahami bagaimana data ‘mengalir’ dari satu component ke component yang lain.
React menerapkan konsep Unidirectional Data Flow , yaitu data mengalir hanya satu arah dari parent component ke child component.
Komunikasi Data antar Component
Sampai disini mungkin akan timbul pertanyaan, bagaimana kita bisa mengirim data dari component satu ke component lain jika props dan state tidak bisa diakses antar component dan data hanya mengalir satu arah dari parent ke child?
Ada beberapa teknik yang bisa digunakan, dan teknik-teknik ini sering dipakai bersamaan.
- Parent ke child menggunakan props
Untuk mengirim data state yang ada di parent component ke child component kita bisa mengubah state tersebut menjadi props untuk child component. - Child ke parent menggunakan callback
Teknik ini bisa dibilang sedikit tricky karena sebagaimana dijelaskan bahwa data pada react mengalir dari parent ke child, teknik ini dipakai karena terkadang kita ‘terpaksa’ mengirim data dari child component ke parent component.
Untuk menggunakan teknik ini kita perlu memahami bagaimana React menghandle event yang terjadi dalam suatu component. - Context
Kita bisa anggap context sebagai global state dan biasanya context ini dibuat di root component.
Karena bersifat global maka semua component di bawah root component dapat mengakses data yang ada di dalam context. - React State Management Library
React State Management Library seperti Redux atau Recoil dapat digunakan untuk mengatur state di setiap component dan komunikasi yang terjadi antar component.
Namun perlu diketahui baik Redux atau Recoil memiliki konsep tersendiri, sehingga kita perlu mempelajari konsep tersebut sebelum bisa menggunakannya.
React state management library sering digunakan pada React App yang kompleks yang mungkin telah memiliki puluhan bahkan ratusan component dan harus mengelola data dari banyak server/source.
4. Event Handling
Handling event pada React mirip dengan handling event pada DOM element, namun dengan sedikit perbedaan:
- React event menggunakan camelCase, bukan lowercase
- Handler untuk event adalah sebuah function, bukan string
Kita ambil contoh code pada seri #4.
Event klik button pada React tidak ditulis onclick tapi onClick.
Event handler bernama handleChange berfungsi untuk menghandle event onClick, yang berarti ketika button di klik maka function bernama handleChange akan dieksekusi.
Event handler dengan Argument
Kita ubah contoh code diatas menjadi:
Untuk event handler dengan argument kita harus menggunakan arrow function:
<button onClick={() => handleChange('Brachio')}>Change Name</button>
Dan kita tidak bisa menulisnya seperti ini:
<button onClick={handleChange('Brachio')}>Change Name</button>
Jika kita menulisnya tanpa arrow function seperti diatas maka event handler akan dieksekusi di awal pada saat component mulai di-mount, sehingga tidak dieksekusi berdasarkan event yang terjadi di dalam component.
5. Lifecycle Method
Dalam proses menampilkan component pada browser, React mengeksekusi beberapa method di balik layar.
Proses eksekusi ini dibagi menjadi beberapa fase yaitu Mounting, Updating dan Unmounting.
Pada setiap fase, React akan mengeksekusi beberapa built-in method secara berurutan yang disebut lifecycle method.
Berikut diagram React Lifecycle Methods:
Salah satu keuntungan mengetahui hal ini adalah kita bisa menempatkan function tambahan untuk dieksekusi pada point tertentu di setiap fase.
Untuk contoh penggunaan lifecycle method kita akan ambil contoh codenya dari dokumentasi reactjs.org:
lifecycle methods yang digunakan pada contoh code diatas adalah componentDidMount() dan componentWillUnmount().
- function timer
setInterval(() => this.tick(), 1000)
di dalamcomponentDidMount()
dieksekusi setelah component dirender - function
clearInterval()
di dalamcomponentWillUnmount()
dieksekusi setelah component dihapus dari DOM
6. Styling
Bagaimana menambahkan CSS ke dalam sebuah React App ?
Ada beberapa cara yang bisa digunakan:
Inline Styling
CSS File
CSS Module
CSS Module adalah sebuah CSS file dimana style-nya secara default bersifat local, tidak seperti CSS file pada umumnya yang bersifat global.
Yang dimaksud bersifat local disini adalah style dapat dibatasi hanya untuk satu component, sehingga tidak terjadi konflik antara style untuk component satu dengan style untuk component yang lain.
Styled Components
Styled Components adalah library yang memungkinkan kita untuk menyisipkan CSS ke dalam React Components ( CSS-in-JS ).
7. Form
React Form sedikit berbeda dengan HTML Form, React memperkenalkan konsep controlled component dan uncontrolled component.
Controlled Components
Pada HTML, data dari sebuah form dihandle oleh DOM.
Tetapi pada React, data atau value dari setiap element di dalam form di simpan dalam component state.
Sebuah element HTML yang valuenya dikontrol oleh React disebut controlled component, selain itu disebut uncontrolled component.
Contoh membuat form di React:
Pada code diatas value dari element <input>
disimpan dalam state dan diupdate menggunakan setState()
, handler handleSubmit()
dieksekusi ketika form disubmit.
Uncontrolled Components
<input type="file" />
adalah contoh dari uncontrolled component, karena value tersebut tidak dikontrol oleh React maka kita harus menggunakan File API dan Refs untuk mengakses file.
Refs dapat digunakan untuk mengakses react element di dalam render method.
Untuk membuat Refs kita menggunakan React.createRef() kemudian diattach ke sebuah element lewat ref attribute.
8. React Hooks
React memperkenalkan React Hooks di versi 16.8
Hooks pada dasarnya adalah function yang disediakan React untuk mempermudah kita dalam menggunakan state dan fitur React lain seperti lifecylce method, context dll.
Hooks hanya bisa digunakan di dalam function component, sehingga tidak bisa dipakai di dalam class component
Kita bahas secara singkat beberapa React Hooks yang sering digunakan:
1. useState()
Digunakan untuk membantu kita dalam membuat dan mengupdate state.
Contoh:
2. useEffect()
Memungkinkan untuk menambahkan side effect di function component dan juga bisa menjadi alternatif untuk lifecycle method componentDidMount() dan componentDidUpdate().
side effect pada react sedniri adalah function yang dieksekusi setelah render.
salah satu kondisi dimana kita bisa menggunakan useEffect() adalah disaat kita harus fetch data dari server.
useEffect(() => {
fetchData(https://server.somewhere);
});
3. useContext()
Digunakan untuk memudahkan penggunaan context.
Context membuat kita bisa mengirim data dari satu component ke component lain baik itu parent, child atau sibling component tanpa harus menambahkan props di setiap component yang ‘dilewati’.
Context adalah salah satu solusi untuk masalah props drilling.
Untuk menggunakan context kita harus membuatnya terlebih dahulu.
- Buat context
const MyContext = React.createContext(null);const componentA = () => { return <MyContext.Provider value={'value'}></MyContext.Provider>;};
- Menggunakan (consume) context
const componentD = () => { const value = useContext(MyContext); return <>{value}</>;};
Hooks lain yang disediakan oleh React:
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue
Konsep React tidak terbatas 8 saja, namun dengan memahaminya kita sudah bisa mulai ngoding menggunakan React.
Untuk pembahasan lebih lengkap mengenai React dapat dilihat di halaman official React.
Untuk panduan membuat aplikasi menggunakan React bisa dilihat disini.
That’s All
Thanks for reading, feel free to share and tap on the clap button if you enjoyed it.
Download full chapter eBook Full Stack Gate, kumpulan materi pendahuluan untuk memulai karir sebagai Full Stack Web Developer disini.