Memulai ReactJS dengan Webpack 4

Artikel kali ini akan membahas bagaimana memulai koding ReactJS menggunakan Webpack 4. Sebelumnya pastikan kalian sudah menginstall NodeJS terlebih dahulu karena kita akan mendownload modul ReactJS dan Webpack menggunakan NPM. Tanpa basa basi, silakan buat projek (folder) baru dengan nama “webpack-reactjs” misalnya dan isi sesuai dengan struktur file berikut:

webpack-reactjs
|--- src
|------ App.js
|--- index.html
|--- webpack.config.js

Jika sudah, buka terminal kemudian arahkan lokasi terminal ke folder projek yang sudah dibuat barusan. Misalnya lokasi projek kalian ada di /User/Document/webpack-reactjs, maka kalian perlu ketik kode berikut pada terminal Anda:

cd /User/Document/webpack-reactjs

Fyi, IDE atau text editor yang saya gunakan untuk koding adalah Visual Studio Code. Sudah tersedia fitur terminal, dan ketika dibuka akan otomatis diarahkan ke folder projek yang sedang dikerjakan sehingga saya tidak perlu repot untuk mengarahkan lokasi foldernya seperti sebelumnya.

Jika sudah diarahkan ke folder tujuan, sekarang kita perlu membuat file “package.json” yang akan digunakan untuk menyimpan modul-modul yang telah kita install sehingga ketika pindah ke komputer lain kita bisa langsung install saja tanpa harus mencari lagi modul-modul yang akan diiinstall. Caranya dengan ketik:

npm init

Nanti akan muncul beberapa field yang harus kalian isi. Tapi kalian bisa melewati tahap ini dengan menekan tombol “Enter” sampai selesai. Setelah selesai akan secara otomatis terbuat file baru dengan nama “package.json”. File tersebut adalah hasil dari field yang kalian isi tadi, jadi tidak masalah jika kalian melewati tahap isian tadi karena masih bisa diedit kembali. Sekarang kita punya struktur file seperti berikut:

webpack-reactjs
|--- src
|------ App.js
|--- index.html
|--- webpack.config.js
|--- package.json

Selanjutnya kita akan menginstall terlebih dahulu modul-modul yang kita butuhkan untuk dapat menjalankan kode ReactJS. Kita akan mulai dengan menginstall Webpacknya dulu. Sekarang buka terminal dan ketik kode berikut:

npm install --save-dev webpack webpack-cli

Jika sudah terinstall, akan ada folder baru dengan nama “node_modules” didalam projek kalian. Dan modul yang sudah diinstall barusan tersimpan di file “package.json” seperti berikut:

{
    ....
    “devDependencies”: {
        “webpack”: “^4.29.0”,
        “webpack-cli”: “^3.2.1”
    }
}

Selanjutnya kita akan menginstall modul Babel yang dibutuhkan untuk mengkonversi kode ES6 menjadi ES5 karena belum semua browser belum support (Internet Explorer contohnya) – karena ReactJS menggunakan code ES6. Sekarang buka terminal kalian dan ketik kode berikut:

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

Jika sudah terinstall, selanjutnya kita akan membuat kode konfigurasinya menggunakan Webpack. Sekarang buka file “webpack.config.js” dan ketik kode berikut:

const path = require('path')

module.exports = {
    entry: './src/App.js',
    output: {
        filename: 'script.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    }
}

Setelah itu buat file baru dengan nama “.babelrc” untuk konfigurasi Babelnya dan ketik kode berikut:

{
   “presets”: [“@babel/env”, “@babel/react”]
}

Jika sudah, buka file “package.json”. Pada bagian “scripts”: { … } tambahkan kode berikut:

"build": "webpack --config webpack.config.js"

Sehingga menjadi seperti ini:

“scripts”: {
   "test": "echo \"Error: no test specified\" && exit 1",     "build": 
   "webpack --config webpack.config.js --mode=development"
}

Setelah itu kita akan coba menjalankan perintah yang dibuat tersebut untuk mengecek apakah ada error pada konfigurasi yang sudah dibuat. Buka terminal kalian lalu ketik kode berikut:

npm run build

Jika tidak ada error, akan ada tambahan folder baru dengan nama “dist” di dalam folder projek, yang di dalamnya terdapat file “script.js”. Sampai sini kita sudah berhasil untuk membuatkan konfigurasinya. Selanjutnya kita akan memulai koding ReactJS.

Sebelumnya, kita perlu menginstall terlebih dahulu modul reactjsnya. Caranya dengan mengetik kode berikut di terminal kalian:

npm install --save react react-dom

Jika sudah, sekarang buka file “src/App.js” dan ketik kode berikut:

import React, { Component } from 'react'
import { render } from 'react-dom'

class App extends Component {
    render() {
        return (
            <h1>Hello world!!</h1>
        )
    }
}

render(
    <App />,
    document.getElementById('root')
)

Setelah itu buka terminal lagi dan ketik kode berikut:

npm run build

Selanjutnya buka file “index.html” lalu ketik kode berikut:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Setup ReactJS with Webpack</title>
    </head>

    <body>
        <div id="root">
            <!-- load by ReactJS -->
        </div>

        <!-- load script -->
        <script src="dist/script.js"></script>
    </body>
</html>

Sampai saat ini proses konfigurasi sudah selesai, Anda sudah bisa memulai koding ReactJS menggunakan Webpack. Untuk mengeceknya silahkan buka file “index.html” tadi di browser. Nanti akan tampil sesuai dengan yang sudah kita buat pada file “src/App.js”.

 

Sekian dari saya, mudah-mudahan bermanfaat.

Hasil kode dapat dilihat disini:
https://github.com/fachririyanto/training-webpack/tree/master/basic-reactjs

Referensi:
https://medium.freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75

Logo:
https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-big.png
https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/640px-React-icon.svg.png