Post

Learn To Build React Boilerplate

Salam hangat sahabat sharehubid. Pada article kali ini kita akan belajar bagaimana membuat sebuah boilerplate untuk project yang menggunakan React sebagai front - end.

Apa sih boilerplate itu?

Sederhananya boilerplate adalah rangkaian code, library, dan lain - lain yang kita gunakan dalam membuat suatu project berulang kali. Bila kita asumsikan dalam pengembangan project yang kita lakukan biasanya terdiri dari beberapa library, seperti React, Babel, Express, Jest, Webpack, dll. Ketika kita memulai proyek baru, kita menginisialisasi semua library ini dan mengonfigurasinya agar saling dapat bekerja dengan baik.

Dengan setiap proyek baru yang kita mulai, kita akan mengulangi lagi konfigurasi - konfigurasi tersebut. Dalam melakukan konfigurasi - konfigurasi pada tiap - tiap project yang kita buat, memungkinkan terjadinya hal yang tidak konsisten sehingga cukup menimbulkan kesulitan dalam proses maintenance tiap project saat kita beralih dari satu project ke project  yang lain.

Nah, disinilah gunanya Boilerplate.

Baiklah, kita mulai saja. Pertama - tama buatlah sebuah directory baru dan menginitilisasi Git sekaligus seperti berikut.

mkdir react-boilerplate && cd react-boilerplate
git init

Dengan menginisialisasi Git, saya maksudkan agar nantinya bisa langsung terhubung dengan Git repository anda.

Selanjutnya, buat file README.md pada root project anda seperti berikut.

# React-Boilerplate
## Setup
npm install
npm run build
npm start

Selanjutnya bisa kita commit dulu sebagai initial commit seperti berikut.

git add .
git commit -m "ReadMe"

Selanjutnya, buatlah struktur folder seperti berikut.

mkdir -p src/client src/server

Lalu tambahkan Gitignore dengan membuat file ".gitignore" pada root project anda. Lalu tambahkan code sebagai berikut.

# Node
node_modules/
# Webstorm
.idea/
# Project
dist/

Selanjutnya, buka terminal/command prompt anda dan pastikan active directory pada root project ini dan lakukan perintah "npm init". Tentunya kita akan mendapati adanya dialog yang diberikan system saat kita melakukan npm init untuk mendeskripsikan project kita. Untuk sementara saya sarankan isikan saja secara default yang disarankan dari system.

Kira - kira, seperti inilah isi dari package.json yang telah kita buat.

{
"name": "react-boilerplate",
"version": "1.0.0",
"description": "React Boilerplate",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Almaida Jody",
}

Bila sudah, kita lanjutkan dengan membuat sebuah static file html. Buatlah sebuah file HTML dengan nama "index.html" pada directory client yang terdapat pada directory src. Tepatnya seprti ini src / client / index.html, dan tambahkan code sebagai berikut.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Boilerplate</title>
</head>
<body>
<div id="root">
Welcome to React Boilerplate!
</div>
</body>
</html>

Baiklah, pada article kali ini kita sudah mengawali untuk membuat react project boilerplate. Mengingat proses ini masih cukup panjang, maka utuk article ini saya cukupkan dlu sampai disini dan akan saya lanjutkan pada article berikutnya.

Sekian yang dapat saya sampaikan, selebihnya saya ucapkan terimakasih.