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:

1. JSX
2. React Component
3. Data Handling
4. Event Handling
5. Life-cycle Method
6. Component Styling
7. Form
8. 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.

1. Buka Terminal atau Integrated Terminal di VS Code (Menu Terminal -> New Terminal)
2. 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:

1. 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:

1. Buka Stackblitz
2. 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.

1. 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.
2. 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.
3. 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.
4. 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:

Sumber

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 dalam componentDidMount() dieksekusi setelah component dirender
• function clearInterval() di dalam componentWillUnmount() 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.