Bikin project React paling gampang memang pake create-react-app. Tapi itu lebih cocok untuk belajar ( dokumentasinya juga bilang begitu ). Untuk project beneran, kita bisa pake tool lain yang lebih fleksibel & bisa dikustom atau bikin sendiri dari nol pake bundler semacem Webpack, Parcel atau Rollup.
Untuk bikin project minimalis pake Webpack cukup gampang. Pertama ya bikin direktori, terus inisialisasi NPM.
$ mkdir myproject
$ npm init -y
Instal paket NPM
Instal paket-paket Babel.
$ npm i -D @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
$ npm i @babel/runtime
Terus instal webpack.
$ npm i -D webpack webpack-cli webpack-dev-server babel-loader
Lanjut instal paket untuk compile CSS & SCSS ( bisa diganti LESS atau CSS-preprocessor yg lain kalo mau).
$ npm i -D node-sass sass-loader style-loader css-loader
Terakhir, instal React.
$ npm i react react-dom
Konfigurasi Webpack
Bikin dulu konfigurasi untuk webpack.
module.exports = (env = {}) => {
return {
entry: './src/index.jsx',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
devtool: env.dev ? 'eval-source-map' : '',
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};
};
Tulis Kodenya
Sekarang coba tulis kode sederhana untuk mastiin setingan proyeknya udah bener.
Pertama bikin direktori src/ & dist/. Di direktori dist/ bikin file index.html yang isinya begini:
<!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>Minimal React</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
Pindah ke direktori src/. Bikin file-file di bawah
// file: src/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Title from './Title';
import './styles.scss';
const title = 'React with Webpack and Babel';
ReactDOM.render(
<div>
<Title title={title} />
</div>
document.getElementById('app')
);
// file: src/Title.jsx
import React from 'react';
export default function({ title }) {
debugger;
return <h2>{title}</h2>;
}
// file: src/styles.scss
body {
background: lightgrey;
padding: 20px;
h2 {
color: red;
}
}
Terakhir tambahin skrip di package.json.
"scripts": {
"start": "webpack-dev-server --env.dev"
}
Sekarang coba jalanin,
$ npm start
Kalo setingan udah bener di terminal bisa kita liat lognya, kurang lebih begini
｢wds｣: Project is running at http://localhost:8080/
｢wds｣: webpack output is served from /
｢wds｣: Content not from webpack is served from ./dist
... bla bla bla
[./src/Title.jsx] 148 bytes {main} [built]
[./src/index.jsx] 288 bytes {main} [built]
[./src/styles.scss] 1.18 KiB {main} [built]
+ 35 hidden modules
｢wdm｣: Compiled successfully.
Buka localhost:8080 di browser.
Dah gitu aja. Nanti kalo udah diperlukan tinggal nambahin yang lain-lain, misalnya file-loader, react-redux, dll.
Also in this category ...
- » Python 101: List & Tuple
- » Python 101: Input Output
- » React: Context
- » Membuat Tooltip dengan CSS
- » Branching Git Alternatif dengan Worktree