Kemarin saya berencana bikin app sederhana dengan React JS—saya sudah lama tak membuat app baru dengan React JS, saat ini merawat app React yg sudah ada—kemudian saya teringat, membuat app dengan React JS perlu beberapa langkah pendahuluan agar bisa berjalan di peramban.

Jujur saja, membuat app dengan React tak semudah menempel jQuery di berkas HTML dan menjalankannya di peramban. Meski sebenarnya bisa saja ditempel di berkas HTML seperti pada dokumentasi React, namun jika ingin app mudah dirawat di kemudian hari, ada baiknya dari sekarang dibikin agak ribet sedikit.

Kebutuhan

Standar aplikasi JavaScript yang saya gunakan untuk saat ini paling tidak menggunakan ES2015, dan jika memakai React harus ada dukungan JSX—dan biasanya saya juga memakai ES Proposal Stage 1 ke atas.

Dari spesifikasi tersebut, saya butuh paling tidak Babel untuk menerjemahkan ES2015 ke ES5 agar bisa berjalan di peramban. Karena saat ini peramban belum tentu bisa menjalankan semua fitur ES2015, apalagi JSX, apalagi dst.Dan agar mempermudah proses penerjemahan, saya menggunakan webpack.

Nah, kadang konfigurasi webpack yang ada di contoh app atau di boilerplate atau di dokumentasi terlalu kompleks dan tak mudah dicerna. Menyederhanakan konfigurasi webpack itulah yang menjadi alasan saya menulis artikel ini—paling tidak sebagai catatan untuk diri saya sendiri atau untuk sampeyan yang butuh konfigurasi sederhana.

Module apa saja yang diperlukan?

Module minimal yang diperlukan agar aplikasi ini bisa berjalan:

  • react dan react-dom
  • babel-core, babel-loader sesuai saran dari Babel Setup
  • babel-preset-2015, babel-preset-react, dan babel-preset-stage-1, yang terakhir opsional, sesuai kebutuhan.
  • webpack

Saya berasumsi struktur direktori app seperti ini:

.
├── dist # hasil bundle ada di sini
├── index.html
├── node_modules
├── package.json
├── src
│   └── index.js # berkas utama app
└── webpack.config.js # konfigurasi webpack

Perintah yang dijalankan di terminal untuk mengunduh module tersebut:

$ npm install --save react react-dom
$ npm install --save-dev babel-core babel-loader babel-preset-2015 babel-preset-react babel-preset-stage-1 webpack

Silakan bikin kopi, biasanya proses ini tergantung kecepatan koneksi internet.

Konfigurasi Webpack dan Babel

Ada dua berkas yang perlu disetel agar bisa menjalankan app React di peramban, package.json dan webpack.config.js

Pada berkas package.json saya akan menambahkan konfigurasi Babel—bisa juga konfigurasi ini dipasang di .babelrc namun saya lebih suka diletakkan di satu tempat. Tambahkan baris babel di package.json dan di bagian script saya tambahkan perintah build:

...
  "scripts": {
    "build": "webpack"
  },
  "babel": {
    "presets": [
      "es2015",
      "react",
      "stage-1"
    ]
  }
...

Berkas webpack.config.js berisi konfigurasi khusus webpack. Dan berisi skrip berikut ini:

module.exports = {
  entry: './src/index.js',
  output: {
    path: 'dist',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
}

Silakan coba perintah npm run build jika tak ada error, maka semua lancar.

Menjalankan app di peramban

Langkah di atas hanya berisi setelan penerjemahan sumber (src) app ke ES5, belum memasang hasilnya di HTML.

Sesuai konfigurasi webpack di atas, hasil terakhir dari proses penerjemahan ada di direktori dist dan bernama bundle.js. Dari situ, bisa kita pasang bundle.js ini di HTML dengan menambahkan script tag biasa ke index.html

<script type="text/javascript" src='dist/bundle.js'></script>

Kesimpulan

Jadi, jika sampeyan ingin mencoba membuat app dengan React dan menggunakan webpack, sebaiknya dimulai dari konfigurasi yang sederhana seperti di atas.

Saya sarankan untuk tidak menggunakan boilerplate secara langsung tanpa tahu apa yang sebenarnya terjadi di konfigurasi tersebut. Karena pengalaman saya, ada banyak konfigurasi di boilerplate yang mungkin tak berguna di app yang sampeyan bikin.

Matur nuwun sudah menyempatkan waktu membaca artikel ini.