Membangun Aplikasi Web Katalog Buku Sederhana menggunakan React.Js

Tampilan Aplikasi Web Katalog Buku

Hai teman2 developers !

Gw rasa di tahun 2019 ini kita udah gak asing lagi dengan framework JavaScript. Menurut pengalaman gw setelah lulus kuliah di tahun 2016, gw lebih sering ketemu lowongan kerja PHP daripada JavaScript. Nah, semenjak populer AngularJs (versi 1) lalu React, banyak perusahaan mulai adopsi framework atau library tersebut. Terutama perusahaan-perusahaan besar seperti e-commerce.

Dulu gw beruntung dapat pekerjaan pertama sebagai Frontend Developer dengan teknologi yang digunakan adalah AngularJs. Gw banyak belajar hal tentang AngularJs. Yg awalnya gw menganggap JavaScript itu cuma buat halaman web menjadi interaktif seperti nampilin popup alert , menghilangkan element dari DOM dan lain-lain. Saat itu berubah seketika. Setalah gw baca dokumentasi AngularJs di W3Schools dulu. Dan … wah JavaScript ternyata bisa sehebat itu. Bisa buat routing, nampilin HTML, ngambil data dari server dan bahkan konversi satu jenis file ke file lainnya (pakai Gulp).

Singkatnya gw merasa senang dan pusing mikirin gimana gw belajarnya. Heheee .. biasalah pengalaman kerja pertama dan ditambah teknologi ‘baru’ bagi gw. Belum lagi lingkungan baru yang perlu adaptasi. Soalnya di kampus gw cuma diajarin Pascal, Java, Android (sedikit) HTML, dan CSS. Anehnya lagi, gw lebih nyaman pakai PHP yang sama sekali tidak diajarkan di kampus. Karena gw mudah banget ngerti PHP dan kebetulan banyak tutorial dalam bahasa Indonesia.

Gw yakin teman-teman udah lebih terbiasa dengan JavaScript daripada gw saat pertama kali kerja sebagai profesional programmer.

Mungkin sekian dulu ceritanya …

Kita lanjutkan ke tutorial :D

PENTING
Pada tutorial ini kita membutuhkan minimal Node.js versi 10.16.0 dan npm versi 6.9.0

Bagi kalian yang udah pernah nyoba React.Js pasti udah tau dong sama Create React App ? Kalo gak tau, parah banget. Soalnya hampir semua orang yang mulai belajar React.Js pasti pakai boilerplate (template projek) itu.

Kali ini gw pengen kita belajar membuat aplikasi React.Js tanpa Create React App (disingkat CRA). Gimana caranya ? Kita akan mengatur sendiri konfigurasi webpack, babel, struktur projek dan lain-lain.

Pertama, mari kita lihat rancangan struktur dari projek Aplikasi Katalog Buku seperti berikut ini

/katalog-buku
   /config
      webpack.common.js
      webpack.dev.js
      webpack.prod.js
   /dist
   /node_modules
   /src
      /components
      /css
      /pages
      constant.js
      index.html
      index.js
   .babelrc
   .prettierrc
   package.json
   README.md
   yarn.lock

Dari struktur projek di atas mari kita bahas satu persatu penjelasannya:

1. katalog-buku: nama folder dari projek kita.
2. config: nama folder untuk menyimpan file-file konfigurasi dari webpack.
3. dist: nama folder yang terbuat secara otomatis setelah kita menjalankan webpack. Jadi gak usah dibuat folder ini secara manual.
4. node_modules: nama folder untuk menyimpan library yang telah kita install.
5. src: nama folder untuk file-file yang dibutuhkan oleh projek kita. src adalah singkatan dari source . Yang dalam bahasa Indonesia berarti sumber.
6. components: nama folder untuk menyimpan component atau bagian umum dari halaman web seperti Header dan Footer yang digunakan pada banyak halaman.
7. css: nama folder untuk menyimpan file-file css yang umum digunakan di banyak tempat.
8. pages: nama folder untuk menyimpan setiap halaman dari projek atau aplikasi kita.
9. constant.js: file untuk menyimpan variabel yang sering digunakan di banyak file.
10. index.js: file utama dari React.Js yang melekatkan elemen HTML ke React DOM. File ini juga berfungsi sebagai file induk dari projek kita saat webpack mem-bundle (menggabungkan module/library) yang dibutuhkan.
11. .babelrc: file konfigurasi dari babel. Babel adalah transpiler (mengkonversi sintak JavaScript terbaru menjadi sintak lama). Karena belum semua fitur-fitur baru JavaScript diterapkan oleh browser.
12. .prettierrc: file konfigurasi untuk aturan penulisan kode yang dianjurkan (best practices).
13. package.json: file berisi metadata tentang projek kita. Yang paling sering dibahas adalah file ini berisi daftar library yang projek/aplikasi butuhkan.
14. yarn.lock: file berisi informasi lebih detil mengenai library yang kamu install (versinya). Sehingga saat orang lain menginstall projek kamu di sistem operasi berbeda dapat berjalan dengan baik.

Jangan lupa untuk membuat folder katalog-buku dan ketikkan command npm init -y dalam folder tersebut di CMD atau terminal (Ubuntu).

Inisialisasi projek dengan npm (Node Package Manager)

Perintah npm init -y akan membuat suatu file package.json dengan beberapa informasi di dalamnya seperti nama projek, version dan sebagainya.

Kemudian copy dan paste kode di bawah pada package.json

"devDependencies": {
  "@babel/core": "^7.5.0",
  "@babel/plugin-proposal-class-properties": "^7.5.5",
  "@babel/preset-env": "^7.5.4",
  "@babel/preset-react": "^7.0.0",
  "babel-loader": "^8.0.6",
  "babel-polyfill": "^6.26.0",
  "clean-webpack-plugin": "^3.0.0",
  "copy-webpack-plugin": "^5.0.3",
  "cross-env": "^5.2.0",
  "css-loader": "^3.0.0",
  "html-webpack-plugin": "^3.2.0",
  "mini-css-extract-plugin": "^0.8.0",
  "react-hot-loader": "^4.12.3",
  "webpack": "^4.38.0",
  "webpack-cli": "^3.3.5",
  "webpack-dev-server": "^3.7.2",
  "webpack-merge": "^4.2.1",
  "write-file-webpack-plugin": "^4.5.0"
},
"dependencies": {
  "axios": "^0.19.0",
  "prop-types": "^15.7.2",
  "react": "^16.8.6",
  "react-dom": "^16.8.6",
  "react-router-dom": "^5.0.1"
},
"scripts": {
  "start": "cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.dev.js",
  "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

Sekarang file package.json kamu akan mirip seperti di bawah ini:

Berikut ini beberapa hal yang perlu kamu ketahui dari file di atas:

1. devDependencies: daftar library yang kamu butuhkan saat membangun file bundle (file yang telah dikompres menjadi satu atau beberapa) dari aplikasi.
2. dependencies: daftar library yang dibutuhkan saat aplikasi berjalan.
3. scripts: daftar command untuk membuat file bundle dan menjalankan aplikasi pada komputer lokal (yarn start) dan membuat file bundle yang telah dioptimasi untuk dideploy ke production (yarn run build).
4. Dan lain-lain.

Mari kita bahas secara singkat apa kegunaan dari library-library yang kita install pada package.json tersebut.

1. @babel/core: module atau package utama dari babel
2. @babel/plugin-proposal-class-properties: module yang memperbolehkan developer menulis state tanpa harus di dalam constructor.
3. @babel/preset-env: module yang bertugas mengubah sintak terbaru JavaScript yang ditulis oleh developer ke versi lama yang didukung oleh mayoritas browser terbaru.
4. @babel/preset-react: module yang bertugas mongkonversi JSX (HTML di dalam JavaScript) ke HTML biasa.
5. babel-loader: module yang bertugas memasukkan babel pada webpack. Sehingga webpack mengerti apa tugas dari babel.
6. babel-polyfill: module yang bertugas mengkonversi beberapa fitur terbaru yang belum sepenuhnya didukung oleh browser seperti fungsi asynchronous.
7. clean-webpack-plugin: module yang bertugas menghapus file bundle atau hasil proses dari webpack pada folder dist.
8. copy-webpack-plugin: module yang berfungsi menggandakan file dari suatu tempat ke tempat lain.
9. cross-env: module yang bertugas untuk memastikan semua command yang kita jalankan pada scripts di package.json kompatibel di semua sistem operasi.
10. css-loader: module yang bertugas membaca file css.
11. html-webpack-plugin: module yang berguna untuk membuat sebuah file HTML untuk projek kita.
12. mini-css-extract-plugin: module yang berguna mengekstrak atau memisahkan css dari file bundle yang merupakan JavaScript ke pada file terpisah dengan ekstensi css.
13. react-hot-loader: module yang berguna untuk mendeteksi perubahan pada komponen React.Js
14. webpack: module bundler untuk projek JavaScript.
15. webpack-cli: module yang berguna agar developer dapat menjalankan command webpack dari CMD atau terminal.
16. webpack-dev-server: module yang berguna sebagai server lokal pada projek dengan module bundler berupa webpack.
17. webpack-merge: module yang bertugas menggabungkan konfigurasi file webpack.
18. write-file-webpack-plugin: module yang berguna untuk menuliskan file pada direktori di dalam folder dist alih-alih dalam memori (tidak kelihatan).

Beginilah ilustrasi cara kerja webpack pada projek yang akan kita bangun.

Ilustrasi Cara Kerja Webpack pada Aplikasi Katalog Buku

Selanjuntnya mari kita buat 3 file pada folder config. Kalau kamu belum punya, buat dulu folder config-nya. File-file yang akan dibuat adalah webpack.common.js, webpack.dev.js dan webpack.prod.js.

1. config/webpack.common.js

Kode dari webpack.common.js

Seperti namanya “common” yang artinya “umum”, file ini adalah konfigurasi umum dari webpack projek kita. Mari kita bahas satu-satu apa aja sih kegunaan mereka (baris kode) atau siapa sih mereka itu sebenarnya.

• Baris 1 : path adalah sebuah variable dengan value berupa module atau package path. Path adalah sub-library dari Node.js yang berguna untuk mengetahui letak suatu folder atau file pada direktori komputer. Perlu kamu ketahui bahwa require adalah keyword untuk meng-import suatu library/module/package pada Node.Js.
• Baris 2–5 : CleanWebpackPlugin, HtmlWebpackPlugin, MiniCssExtractPlugin dan WriteFilePlugin adalah beberapa nama library yang kita import di file ini selain path. Sebelumnya kita udah pernah membahas kegunaan dari library-library bersangkutan.
• Baris 7 : config adalah sebuah variabel berupa object yang menampung konfigurasi dari webpack projek kita.
• Baris 8 : entry adalah file utama yang akan diproses oleh webpack. Webpack akan membaca semua file yang kita import di dalam file entry ini. Kemudian memprosesnya sesuai anturan yang telah kita tetapkan pada file webpack.common.js dan lainnya.
• Baris 9 : module berisi aturan untuk memproses beberapa jenis file sesuai dengan library yang telah ditentukan.
• Baris 10 : rules sesuai namanya adalah sebuah array yang berisi kumpulan aturan.
• Baris 11–15 : baris ini akan memerintahkan babel-loader mencari file-file berekstensi .js dan mengkonversi sintaks yang ada di dalamnya ke versi ES5. Selain itu babel-loader juga tidak akan mengkonversi file yang ada pada folder node_modules (exlude).
• Baris 16–28 : kumpulan kode di baris-baris ini akan memproses file dengan ekstensi .css. use merupakan properti yang berisi loader-loader yang digunakan untuk memproses css. Kita membaca loader di use dari bawah ke atas. Pertama css-loader akan membaca file css kemudian MiniCssExtractPlugin.loader akan mengekstrak file css dari bundle dan menyisipkannya pada index.html. Kemudian ada options yang akan mengaktifkan hmr (Hot Module Replacement) pada environment development atau lokal. Properti reloadAll dengan nilai true berguna untuk melakukan refresh ketika ada perubahan pada file css sehingga perubahan dapat terlihat langsung dampaknya di aplikasi kita saat dijalankan pada browser.
• Baris 31–33 : resolve akan memberitahu webpack untuk membaca file dengan ekstensi .js terlebih dahulu jika ditemukan lebih dari 1 file dengan nama yang sama.
• Baris 34–40 : plugins berisi daftar library plugin untuk membantu kinerja webpack. Dalam hal ini kita bisa lihat ada 3 plugin yang digunakan di sini.
• Baris 41–45 : output berupa object berisi path, publicPath dan filename. path menunjukkan di mana letak folder hasil proses webpack dan sekaligus nama foldernya (dist). publicPath merupakan letak umum yang dapat digunakan untuk mengakses file-file hasil proses webpack seperti bundle.js, dan main.css.

2. config/webpack.dev.js

Kode dari webpack.dev.js

Seperti namanya yang terselip kata “dev” singkatan dari development, maka file ini pun berguna saat pengembangan pada komputer lokal kita. Mari kita bahas dan pahami baris per baris.

• Baris 1 : merge adalah variabel yang digunakan untuk menampung nilai dari library webpack-merge yang di-import.
• Baris 2 : common adalah variabel untuk menampung value dari konfigurasi webpack.common.js yang berisi aturan umum.
• Baris 3–4 : meng-import library webpack dan MiniCssExtractPlugin.
• Baris 6 : devConfig adalah sebuah object untuk menampung konfigurasi webpack spesifik untuk lingkungan (environment) development.
• Baris 7 : mode adalah properti dari webpack untuk memberitahukan bahwa kita sedang berada pada lingkungan tertentu. Dalam hal ini kita menggunakan development.
• Baris 8 : devtool berguna sebagai parameter debug (mencari error) saat file kita sudah menjadi bundle.js. Tentu akan sulit membaca error ketika semua file telah disatukan dan dikompress. Dengan opsi ini maka kita dapat men-track error lebih mudah karena webpack akan menampilkan file sesungguhnya alih-alih bundle.js.
• Baris 9–15 : plugin seperti yang telah kita bahas sebelumnya adalah properti yang berisi daftar plugin. Dalam kasus ini kita memiliki dua yaitu MiniCssExtractPlugin dan webpack.HotModuleReplacementPlugin. MiniCssExtractPlugin memiliki opsi nama file sesuai dengan nama aslinya dan untuk potongan atau file css hasil dari HMR akan menggunakan id. HotModuleReplacementPlugin berguna untuk mendeteksi perubahan pada entry file dan mengaplikannya sehingga kita tidak perlu refresh browser untuk melihat perubahan yang baru saja kita buat pada kodingan.
• Baris 16–21 : devServer adalah object yang berisi konfigurasi server lokal khusus webpack yang memiliki beberapa opsi. Saat ini kita memiliki 4 opsi, yaitu contentBase, hot, historyApiFallback dan open. contentBase menunjukkan pada server untuk mencari file yang dibutuhkan pada folder itu. hot mengatakan pada server bahwa kita mengaktifkan HMR. historyApiFallback membuat kita dapat kembali lagi pada index.html seandainya kita mengunjungi route yang tidak eksis. open memerintahkan pada server untuk membuka aplikasi pada browser default pengguna komputer.
• Baris 24 : module exports berguna untuk meng-eksport konfigurasi webpack yang telah digabung antara common + devConfig.

3. config/webpack.prod.js

Kode dari webpack.prod.js

Seperti namanya yang mengandung kata “prod”, tentu konfigurasi ini berguna saat lingkungan production. Mari kita bahas mengenai kegunaan dari baris-baris kode di atas.

• Baris 1 : sama seperti sebelumnya. merge adalah variabel yang digunakan untuk menampung nilai dari library webpack-merge yang di-import.
• Baris 2–3 : mengimport konfigurasi umum webpack dan library MiniCssExtractPlugin.
• Baris 5 : prodConfig adalah object yang menyimpan konfigurasi khusus untuk lingkungan production aplikasi kita.
• Baris 6 : mode dengan nilai production mengatakan kepada webpack untuk melakukan optimasi pada bundle kita seperti minify kode dan sebagainya.
• Baris 7 : sama seperti sebelumnya. Memerintahkan kepada webpack untuk men-track error pada saat live di production atau setelah kita deploy aplikasi kita ke hosting provider.
• Baris 8–13 : plugins di sini sama dengan sebelumnya yaitu berisi daftar plugin untuk membantu tugas webpack. Dalam kasus ini MiniCssExtractPlugin akan membuat nama file css kita dengan nama aslinya + hash.
• Baris 16 : module.exports meng-ekspor konfigurasi webpack yang telah disatukan antara common dan prodConfig.

Selanjutnya kita akan membuat folder dengan nama components dan di dalamnya akan kita buat sebuah file dengan nama Navbar.js.

File Navbar.js

Selanjutnya kita akan membuat folder dengan nama css dan di dalamnya akan kita buat sebuah file dengan nama App.css.

File App.css

Selanjutnya kita akan membuat folder dengan nama pages. Di dalam folder ini akan ada 2 file antara lain: Home.js dan Book.js.

File Home.js

File Book.js

Selanjutnya kita akan membuat file constant.js, index.html dan index.js di dalam folder src.

File constant.js

File index.html

Selanjutnya kita akan membuat file-file berupa .babelrc, prettierrc dan .gitignore.

File .babelrc

File .prettierrc

File .gitignore

Terakhir mari install library yang kita butuhkan dengan mengetikkan command berikut:

npm install atau yarn install

Untuk menjalankan aplikasi Katalog Buku ini, mari ketikkan command berikut:

npm start atau yarn start

Demikianlah tutorial ini semoga dapat memberikan wawasan baru bagi teman-teman yang mungkin masih pemula dalam hal programming di JavaScript. Terimakasih sudah membaca sampai sejauh ini.

Jika teman-teman merasa artikel ini bermanfaat, tolong dibagikan kepada teman yang lain di media sosial seperti facebook, instagram atau lainnya. Dan jika teman-teman menemukan kesalahan dalam penulisan artikel ini, tolong beritahu kepada saya.

Udah ngikutin semua steps, tapi projeknya gak jalan ? Mungkin kamu ada yang lupa. Coba cek repositori dari projek ini di Github.