Cara Mudah Mengatur React dengan Webpack dan Babel

Berikut adalah cara setup React dengan Webpack dan Babel.

Init project

Buat folder baru lalu jalankan perintah berikut:

npm init -y

Install React dan React DOM
Untuk menginstal React dan React DOM jalankan perintah berikut:

npm install react react-dom

Install Webpack
Ada beberapa package yang harus di-install untuk menggunakan webpack.
Jalankan perintah berikut untuk menginstallnya:

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

Install juga plugin untuk me-load html dengan menjalankan perintah berukut:

npm install html-webpack-plugin --save-dev

Install Babel
Kita juga perlu meng-install babel sebagai compailer. Jalankan perintah berikut untuk menginstallnya:

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

Konfigurasi folder dan file
Buat folder src lalu didalamnya buat file index.html, main.js dan App.js. Ini akan kita gunakan sebagai entry point untuk setup webpack.
Buat file webpack.config.js untuk konfigurasi webpack.
Buat file .babelrc untuk konfigurasi babel.
Jalankan perintah berikut untuk membuat file tersebut:

mkdir src && touch src/index.html src/main.js src/App.js webpack.config.js .babelrc

Konfigurasi webpack, babel dan package.json
Edit file webpack.config.js

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, "dist"),
    },
    module: {
        rules: [
            {
                test: /.js$/,
                loader: "babel-loader",
                exclude: /node_modules/,
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "src", "index.html"),
        }),
    ],
};

Edit file .babelrc

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

Edit package.json lalu dibagian script tambahkan kode berikut:
"start": "webpack serve"

Template Webpack HTML untuk index.html

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

  <body>
    <div id="root"></div>
  </body>
</html>

Edit App.js dan main.js
App.js

// src/App.js
import React, { Component } from "react";

export default class App extends Component {
    render() {
        return (
            <div>
                <h1>Hello World</h1>
            </div>
        );
    }
}

main.js

// src/main.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

Running server
Jalankan perintah berikut untuk menjalankan server:

npm run start

Selesai

Cara Mudah Mengatur React dengan Webpack dan Babel

Comments

More from this blog

Effortless Deployment of Next & Angular Apps with Firebase

Panduan Lengkap Menginstall Certbot di Ubuntu

Bagaimana Menggunakan Generics pada TypeScript

Panduan Lengkap Menangani Submodule Git

Perbedaan 'var', 'let', dan 'const' dalam JavaScript

Command Palette

Comments

More from this blog