Belajar React JS Bagian 1 : Manual Set Up Environment React dengan Babel & Webpack

Webpack + React + Babel = Awesome !!

Terakhir diupdate: 06 November 2021 — Mengupdate Webpack ke versi 5

Fokus dari artikel ini adalah belajar konfigurasi environment React, dan sifatnya sangat basic. Jika kamu sudah terbiasa setting environment React mungkin akan terlihat lucu, dan artikel ini bisa kamu skip saja, hehe.

Artikel ini saya tujukan khusus buat temen-temen yang baru mau mulai belajar ReactJS dan tidak takut tangannya kotor saat mencoba set up boilerplate nya sendiri dari awal.

Mungkin aneh kenapa saya bilang tangannya kotor? 😃 Karena, jika temen-temen ingin mengembangkan aplikasi menggunakan React, setau saya terdapat dua boilerplate praktis yang sangat populer yaitu Create React App dan Next.JS .

Dengan menggunakan salah satu di antara boilerplate tersebut kamu tidak perlu repot-repot setting environment-nya sendiri dan tinggal fokus ke aplikasinya saja. Semua sudah siap pakai.

Di akhir artikel ini tangan kita akan menjadi kotor, namun kita akan dapat membuat boilerplate React kita sendiri dan kita akan mencoba membuat halaman yang menampilkan kalimat sakral yaitu “Hello World”.

Brace yourself.

Catatan : Pastikan Node JS dan NPM (Package Manager) telah terinstall di mesin kamu sebelum melanjutkan tutorial ini.

Tools yang dipakai :

1. Mesin berbentuk komputer / laptop 😅.
2. Text Editor (VSCode, Sublime Text, Atom, Vim, dll).
3. Terminal (untuk Linux dan Mac) atau Command Prompt (untuk Windows).

Package yang diperlukan :

Daftar Package yang akan kita pakai ialah sebagai berikut :

1. Webpack (Module Bundler, digunakan untuk mem-bundle file yang terpisah-pisah menjadi sebuah file saja).
2. Babel (Javascript Compiler, digunakan untuk menterjemahkan kode tertentu menjadi kode yang di kenali oleh browser. Contoh: ES6, ES7 di terjemahkan menjadi ES5 agar dapat berjalan di browser versi lama, lalu JSX menjadi Object javascript biasa).
3. React (Pastinya).

Mulai Nulis Kode

1. Buat Project Baru

Buka terminal lalu buat folder baru. Kamu bisa menamai folder sesuai keinginanmu, disini saya coba buat folder bernama setup-react. Setelah folder dibuat, masuk ke folder tersebut. Perintahnya kurang lebih seperti berikut (saya menggunakan mesin Linux).

mkdir setup-react && cd setup-react

Selanjutnya lakukan inisialisasi package.json menggunakan perintah berikut:

npm init -y

Biasanya akan muncul prompt untuk mengisikan informasi project. Kamu bisa enter terus sampai selesai.

2. Instalasi dan Konfigurasi Webpack

Selanjutnya install Webpack melalui terminal dengan menuliskan perintah berikut dan tunggu sampai selesai :

npm install webpack webpack-dev-server webpack-cli --save-dev

Kita menginstall tiga buah package yaitu webpack itu sendiri,webpack-dev-server yang akan kita gunakan untuk menjalankan server statis di mesin lokal kita, dan juga webpack-cli yang secara internal digunakan oleh Webpack. Setelah Webpack terinstall , kita perlu mengatur Webpack supaya bekerja sesuai apa yang kita butuhkan.

Untuk mengatur perilaku si Webpack ini, silahkan buat file bernama webpack.config.js lalu buka file tersebut melalui editor kesayangan kamu, lalu masukkan perintah berikut ke dalamnya:

const path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
        },
        exclude: /node_modules/,
      },
    ],
  },
  devServer: {
    port: 3000,
    hot: true,
    static: {
      directory: path.resolve('dist'),
    },
  },
};

Pada dasarnya, konfigurasi Webpack yang paling simple umumnya berbentuk Object dan terdiri dari 4 bagian, yaitu mode, entry, output, dan module.

1. mode : bertugas memberitahukan webpack, environment apa yang ingin kita pakai. Biasanya berisi development atau production.
2. entry : merupakan file utama dan yang pertama dieksekusi di aplikasi kita. Pada kode di atas, file utama dari aplikasi kita ialah index.js, dan letaknya berada di folder src yang relatif dengan file webpack.config.js sehingga saya menggunakan tanda . (titik).
3. output : mengatur hasil bundle nya ketika selesai diproses oleh Webpack. Disini saya atur hasilnya nanti bernama bundle.js dan letaknya berada di folder dist.
4. module : bagian module berfungsi sebagai proses tambahan saat proses bundling sedang berjalan. Disini saya menggunakan package babel-loader. Kalo webpack itu manusia, mungkin bunyi dari perintah bagian module pada kode di atas kurang lebih seperti berikut :

Wahai Webpack, cari semua file yang berakhiran js tapi tidak perlu cari filenya di folder node_modules. Kalo udah ketemu, saya pengen plugin babel-loader dipake buat nanganin file-file tersebut. Itu saja.

Nah, selanjutnya kita bahas Babel.

3. Installasi dan Konfigurasi Babel

Sebelum mengkonfigurasi babel, install dulu babel dengan menuliskan perintah berikut di terminal :

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev

Installnya memang agak borongan 😂 jika tertarik, temen-temen bisa mampir ke website Babel untuk tau lebih dalam mengenai fungsinya atau sekedar mau tau lebih banyak package yang tersedia dari Babel.

Sama seperti Webpack, setelah Babel terinstall langkah selanjutnya adalah mengkonfigurasi Babel itu sendiri, nah salah satu caranya adalah dengan membuat file bernama .babelrc

Didalam file .babelrc masukkan konfigurasi sebagai berikut :

{
  "presets": [
    "@babel/preset-env", 
    "@babel/preset-react"
  ]
}

Pada saat Babel dijalankan (dalam kasus ini babel dijalankan bersamaan dengan webpack), Babel akan mencari file bernama .babelrc kemudian akan membaca konfigurasi yang kita atur. Pada konfigurasi kita, kita memanfaatkan plugin @babel/preset-env dan @babel/preset-react yang bertujuan agar kita dapat menggunakan syntax Javascript modern (ES6) dan JSX di kode kita.

4. Installasi React

Webpack sudah, Babel sudah, sekarang giliran React. Silahkan buka terminal dan ketikkan perintah berikut :

npm install --save react react-dom

5. Konfigurasi Selesai

Konfigurasi Webpack dan Babel sudah cukup. Selanjutnya buat folder bernama dist lalu di dalam folder tersebut kita coba buat file index.html. Isi kodenya kurang lebih seperti ini :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React App Setup</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

Kalo kita perhatikan file di atas, kita hanya membuat file html sederhana yang memanggil file bernama bundle.js dan sebuah div yang mempunyai id bernama root.

Dengan React kita dapat membuat aplikasi yang sepenuhnya dibuat menggunakan Javascript. Semua logic, user interface, sampai routing akan di handle oleh Javascript, teknologi ini dikenal dengan sebutan Single Page Application.

Semua kode Javascript tersebut dapat di inject ke salah satu elemen html. Dalam kasus ini, saya ingin semua kode Javascript di inject ke dalam elemen div yang mempunyai id root.

6. Koding React

Setelah tangan kita kotor, akhirnya kita baru bisa koding React nya 😄

Untuk memulai, silahkan buat folder bernama src lalu buat file bernama index.js di dalamnya. Untuk menampilkan kalimat sakral “Hello World”, kodenya yang adalah sebagai berikut :

import React from 'react';
import ReactDOM from 'react-dom';
function App() {
  return (
    <h1>Hello World</h1>
  )
}
ReactDOM.render(<App />, document.getElementById('root'));

Kurang lebih, struktur file kita sekarang harusnya seperti ini :

Struktur file

7. Menjalankan webpack-dev-server

Supaya praktis, buka file package.json kemudian tambahkan perintah berikut :

"scripts": {
  "start": "webpack serve"
}

Tujuan mengatur script di atas adalah membuat perintah alias. Jadi kita tinggal menuliskan perintah npm start melalui terminal, maka perintah webpack serve yang akan di eksekusi.

Nah, perintah webpack-dev-server di atas saya atur agar server statisnya disajikan melalui folder dist (index.html ada di folder dist), mengaktifkan fitur hot reload (supaya webpack merestart dirinya otomatis ketika ada perubahan kode), dan portnya diatur memakai port 3000.

File package.json saya menjadi seperti berikut :

{
  "name": "setup-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.0",
    "@babel/preset-react": "^7.16.0",
    "babel-loader": "^8.2.3",
    "webpack": "^5.62.1",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.4.0"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

Karena kita sudah atur di package.json, kita bisa menjalankan server statis nya dengan menuliskan perintah berikut di terminal :

npm start

Kemudian buka browser, dan ketikkan http://localhost:3000 di address bar. Niscaya hasilnya adalah sebagai berikut :

Coba kamu ubah tulisan Hello World di file index.js , browser akan reflek dan reload otomatis. Hal ini karena kita tadi mengatur webpack-dev-server agar mengaktifkan fitur hot reload nya.

Penutup

Source code dari artikel ini bisa diambil di https://github.com/trihargianto/manual-setup-react-webpack 👌

Buat kamu yang baru mau mulai belajar React, mungkin merasa cara di atas terlalu berlebihan dan terasa ribet 😂

Tentunya di awal artikel sudah saya sampaikan, artikel ini cuma buat yang mau tangannya kotor. Jika kamu merasa konfigurasi diatas terlalu ribet, kamu bisa coba menggunakan create-react-app . Library tersebut sudah terinstall Babel, Webpack, ESLint, dll yang sudah dikonfigurasi.

Jadi, kamu tidak perlu repot-repot mengaturnya sendiri dan tinggal fokus ke develop aplikasinya saja. Malahan, saya sering menggunakan create-react-app karena praktis dan tinggal pakai.

Tentunya dengan belajar konfigurasi environment sendiri seperti ini, kita jadi tau behind the scene nya library macam create-react-app.