Pada bagian pendahuluan belajar react ini kita akan membahas tiga hal, yaitu Single Page Application (SPA), Front End Tools dan Environment Setup.

Single Page Application (SPA)

Memahami konsep Single Page Application (SPA) bisa lakukan dengan cara yang cukup mudah yaitu dengan mengamati bagaimana sebuah website memuat(load) tiap halaman dan menampilkan data pada halaman tersebut.

• Jika setiap perubahan tampilan dan data pada sebuah website dilakukan dengan harus melakukan refresh halaman secara keseluruhan maka website tersebut termasuk Multi-page application.

• Sedangkan jika perubahan tampilan atau data dilakukan tanpa harus refresh halaman secara keseluruhan maka inilah yang disebut Single Page Application (SPA).

Contoh SPA yang sering kita gunakan setiap hari:

• Facebook
• Google Maps
• Twitter

Website atau aplikasi yang dibuat menggunakan modern web framework seperti React, Vue atau Angular juga termasuk SPA.

Kelebihan SPA

Kelebihan dari SPA adalah kecepatan, karena untuk proses re-render halaman tidak perlu mendownload halaman + data dari server, cukup download data dari server kemudian SPA akan melakukan re-render halaman.

Ilustrasi antara Multi Page Application dan Single Page Application:

Multi Page Application

Single Page Application

Environment Setup

Karena React adalah sebuah library, React bisa ditambahkan ke dalam sebuah project JavaScript (existing project) atau membuat sebuah aplikasi React (React App) dari awal.

Ada beberapa cara yang dapat dipilih:

create-react-app

create-react-app (CRA) adalah package yang paling banyak digunakan untuk membuat sebuah React App.

Gunakan package create-react-app jika ingin membuat React App dari awal.

1. Download & Install VS Code
2. Download & Install Node JS
3. Buka Terminal atau Intregrated Terminal di VS Code (Menu Terminal -> New Terminal)
4. Jalankan perintah npx create-react-app my-app

my-app adalah nama dari React App, kita bisa ganti sesuai keinginan.

5. Jalankan perintah cd my-app kemudian npm start

CDN (Content Delivery Network)

Kita dapat menambahkan React ke sebuah dokumen HTML dengan langkah berikut:

1. Buat DOM container

DOM container dapat berupa sebuah element <div />.

index.html

Copy
1<div id="container"></div>

2. Tambahkan React ke dalam script tag <script />

index.hmtl

Copy
1<!-- Load React. -->
2<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
3<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
4<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
5
6<!-- Load our React component. -->
7<script src="button.js"></script>

3. Buat React component

button.js

Copy
1const domContainer = document.querySelector('#container');
2ReactDOM.render(e(Button), domContainer);

Online IDE / Code Playground

Cara paling simple untuk memulai membuat sebuah React App adalah menggunakan Online IDE / Code Playground seperti Stackblitz.

1. Buka Stackblitz
2. START A NEW WORKSPACE -> Pilih React JavaScript

Kita akan membuat React App dari awal menggunakan Stackblitz

Front End Tools

Tools yang disebutkan disini bukan tools khusus untuk react namun tools yang bisa dipakai di semua jenis aplikasi Javascript.

1.NPM

NPM = Node Package Manager

Sesuai namanya tool ini merupakan package manager untuk Node.js.

package pada dasarnya adalah module yang bisa ditambahkan ke dalam project Javascript yang memiliki format khusus agar bisa diregistrasi dan didistribusikan oleh NPM.

Contoh: menambahkan package create-react-app ke dalam project

Copy
1npm install create-react-app

Ada ribuan package tersedia yang bisa kita tambahkan ke project JavaScript.

Sedangkan untuk daftar package yang sering digunakan bisa dilihat disini.

Penggunaan

• Initialize project

Copy
1npm init

Setelah menjalankan command npm init, NPM akan membuat sebuah file dengan bernama package.json, file ini berisi semua informasi yang berkaitan dengan project seperti nama dari project, versi, deskripsi, author dll.

Selain itu file ini juga digunakan untuk mengatur project dependency.

• Install Dependencies / Local Package

Copy
1npm install package_name

alias: npm i atau npm add

☑️ Package yang diinstall menggunakan perintah ini hanya tersedia di dalam project dimana package itu diinstall

☑️ File dari package tersebut ada di folder node_modules

☑️ Setiap package memiliki dependencies / bergantung pada package lain

• Install Global Package

Copy
1npm install -g package_name

Package yang diinstall menggunakan perintah ini akan tersedia secara global dan dapat digunakan oleh setiap project yang ingin menggunakannya tanpa harus menginstall lagi secara local.

• Remove Package

Copy
1npm uninstall package_name

Perintah ini digunakan untuk menghapus package.

Perintah - perintah npm yang dijelaskan di atas adalah yang paling sering digunakan, untuk melihat semua npm command silahkan lihat disini.

# Alternatif

Selain NPM terdapat alternatif package manager lain yang juga sering digunakan, yaitu Yarn.

2.webpack

Sebuah project Javascript umumnya memiliki dan menggunakan banyak module JavaScript eksternal, module - module ini dapat dijadikan satu / dibundle dengan menggunakan webpack.

Secara teknis webpack akan membuat sebuah dependecy graph yang memetakan setiap Javascript module yang digunakan pada sebuah project.

Kemudian module - module tersebut dibundle menjadi satu file atau lebih sesuai konfigurasi yang sudah dibuat sebelumnya.

Kenapa webpack?

Pada awalnya untuk menggunakan module atau plugin ke sebuah aplikasi JavaScript kita harus menambahkan / include setiap script yang dibutuhkan.

Copy
1<script type="text/javascript" src="local-folder/path-to-javascript-file-1.js"></script>
2<script type="text/javascript" src="https://server-1.com/path-to-javascript-file-2.js"></script>
3<script type="text/javascript" src="https://server-2.com/path-to-javascript-file-3.js"></script>
4<script type="text/javascript" src="https://unpkg.com/path-to-javascript-file-4.js"></script>

Jika ukuran dari script tersebut cukup besar dan script-script tersebut berada di server yang berbeda, maka akan timbul masalah pada jaringan yang biasa disebut dengan network bottleneck.

Teknik export/import module baik itu ES Module atau CommonJS Module sebenarnya dapat mengatasi masalah ini karena dengan teknik ini kita bisa import module yang dibutuhkan saja, tetapi tidak semua browser support keduanya.

Oleh karena itu teknik bundling digunakan.

Yang menjadi kelebihan dari webpack adalah webpack mampu melakukan bundling tidak hanya pada JavaScript module namun juga berbagai macam jenis module dengan bantuan loaders.

Dengan loader webpack dapat melakukan proses bundling file json, css, sass, babel, html bahkan file seperti jpg, png dll.

3.Babel

JavaScript adalah salah satu bahasa pemrograman yang paling berkembang saat ini, hal ini terbukti dengan banyaknya fitur baru yang diperkenalkan di setiap versi ECMAScript.

Tetapi hingga tulisan ini dibuat tidak semua browser support fitur terbaru ECMAScript.

Untuk mengatasi masalah ini kita dapat menggunakan babel, tool untuk mengkonversi code JavaScript yang ditulis dalam versi ES6 keatas ke dalam versi JavaScript yang lebih "lama" (backwards compatible) dimana semua browser dapat menjalankannya.

Menggunakan webpack dan babel dalam sebuah project React App perlu proses instalasi dan konfigurasi yang prosesnya bisa dibilang tidak sederhana.

Untungnya dengan menggunakan tool seperti create-react-app kita tidak perlu melakukan proses install dan konfigurasi secara manual, hal ini membuat kita bisa fokus pada code yang kita tulis.