# 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:
```bash
npm init -y
```
**Install React dan React DOM**
Untuk menginstal `React` dan `React DOM` jalankan perintah berikut:
```bash
npm install react react-dom
```
**Install** `Webpack`
Ada beberapa package yang harus di-install untuk menggunakan `webpack`.
Jalankan perintah berikut untuk menginstallnya:
```bash
npm install webpack webpack-cli webpack-dev-server --save-dev
```
Install juga plugin untuk me-load `html` dengan menjalankan perintah berukut:
```bash
npm install html-webpack-plugin --save-dev
```
**Install** `Babel`
Kita juga perlu meng-install `babel` sebagai compailer. Jalankan perintah berikut untuk menginstallnya:
```bash
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:
```bash
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`
```javascript
// 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`
```json
{
"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`
```xml
Hallo React
```
**Edit** `App.js` **dan** `main.js`
`App.js`
```javascript
// src/App.js
import React, { Component } from "react";
export default class App extends Component {
render() {
return (
Hello World
);
}
}
```
`main.js`
```javascript
// src/main.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(, document.getElementById("root"));
```
**Running server**
Jalankan perintah berikut untuk menjalankan server:
```bash
npm run start
```
**Selesai**