Membangun Aplikasi Web Katalog Buku Sederhana menggunakan React.Js

Membangun Aplikasi Web Katalog Buku Sederhana menggunakan React.Js

Halo, para pejuang kode! Lo lagi nyari tutorial bikin aplikasi keren tapi simpel buat belajar React.Js? Nah, lo datang ke tempat yang tepat! Kali ini gue bakal ngajak lo bikin aplikasi katalog buku sederhana pake React.Js tanpa bantuan si Create React App (CRA). Kita bakal setting semuanya sendiri, dari konfigurasi Webpack sampai struktur projek yang rapi.

Kenapa nggak pake CRA? Karena biar lo belajar dasar-dasarnya lebih dalam, bro. Kadang kalau langsung pake template yang serba otomatis, lo jadi kurang paham apa yang sebenarnya terjadi di balik layar. Jadi, siap? Yuk, kita mulai perjalanan coding lo yang penuh tawa dan haru ini!

React.Js: Temen Baik Developer Front-End

Sebelum masuk ke tutorial, gue mau kasih sedikit latar belakang. React.Js itu library JavaScript yang dibikin sama tim Facebook buat bikin UI (User Interface) yang interaktif. Dulu, JavaScript cuma dikenal buat bikin animasi simpel atau pop-up alert. Tapi sekarang, dengan adanya React, lo bisa bikin aplikasi kompleks dengan efisien, kayak Instagram atau Netflix.

Dulu, pas pertama kali kerja sebagai front-end developer, gue juga sama clueless-nya kayak lo. Tapi begitu kenal React, wah, hidup gue berubah, bro. Awalnya susah, tapi lama-lama seru! Jadi, santai aja, lo juga pasti bisa.

Baca Juga

• Developer Tools Wajib Biar Coding Makin Ngebut
• Membuat Carousel Atau Image Slider Pada React

 

Alat Tempur yang Dibutuhkan

Sebelum kita mulai, pastikan lo punya alat-alat ini:

1. Node.js versi minimal 10.16.0 dan npm versi 6.9.0.
2. Text Editor: Gue saranin pake Visual Studio Code biar keren.
3. Koneksi Internet: Ya iyalah, bro, masa lo mau install library tanpa internet?

Kalau alat-alat ini udah siap, kita bisa langsung mulai bikin aplikasi katalog buku.

 

Langkah-Langkah Membuat Aplikasi

1. Struktur Folder Projek

Pertama, lo harus bikin struktur folder yang rapi. Ini penting banget biar kode lo gampang di-maintain, apalagi kalau proyek lo makin gede. Berikut adalah struktur folder yang bakal kita pake:

/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 
   yarn.lock

Penjelasan:

• /config: Folder buat nyimpen konfigurasi Webpack.
• /src: Semua file sumber ada di sini, kayak komponen React, file CSS, dll.
• index.js: File utama buat nge-render aplikasi React lo.
• constant.js: Buat nyimpen variabel global, kayak API endpoint.
• .babelrc: File konfigurasi Babel buat kompatibilitas JavaScript terbaru.
• package.json: File metadata projek yang nyimpen daftar library.

 

2. Inisialisasi Projek

Buka terminal lo dan masuk ke folder projek. Ketik perintah ini buat inisialisasi projek lo:

mkdir katalog-buku 
cd katalog-buku 
npm init -y

Perintah ini bakal bikin file package.json yang isinya metadata projek lo.

 

3. Install Dependencies

Kita butuh beberapa library buat ngebangun projek ini. Jadi, install semua dependency yang diperlukan:

• npm install --save react react-dom prop-types axios react-router-dom 
• npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader html-webpack-plugin css-loader mini-css-extract-plugin clean-webpack-plugin

 

4. Konfigurasi Webpack

Webpack itu kayak koki yang ngeracik semua bahan di dapur lo jadi makanan enak. Kita butuh tiga file konfigurasi buat development, production, dan common settings:

config/webpack.common.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');


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

config/webpack.dev.js:

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');


module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    hot: true,
  },
});

config/webpack.prod.js:

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = merge(common, {
  mode: 'production',
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ],
});

 

5. Membuat Komponen React

Kita bakal bikin komponen sederhana buat menampilkan katalog buku.

src/components/BookCard.js:

import React from 'react';


const BookCard = ({ title, author }) => {
  return (
    <div className="book-card">
      <h3>{title}</h3>
      <p>{author}</p>
    </div>
  );
};


export default BookCard;

 

6. Tambahkan Data Dummy

Kita pake data dummy buat simulasi katalog buku.

src/constant.js:

export const books = [
  { id: 1, title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' },
  { id: 2, title: '1984', author: 'George Orwell' },
  { id: 3, title: 'To Kill a Mockingbird', author: 'Harper Lee' },
];

 

7. Render Aplikasi

Sekarang kita gabungkan semuanya di index.js.

src/index.js:


import React from 'react';
import ReactDOM from 'react-dom';
import BookCard from './components/BookCard';
import { books } from './constant';


const App = () => {
  return (
    <div>
      <h1>Katalog Buku</h1>
      <div className="book-list">
        {books.map((book) => (
          <BookCard key={book.id} title={book.title} author={book.author} />
        ))}
      </div>
    </div>
  );
};

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

 

8. Jalankan Aplikasi

Buat jalanin aplikasi lo, tinggal ketik di terminal:

• npm run start

Aplikasi lo bakal otomatis kebuka di browser. Voila! Lo baru aja bikin aplikasi katalog buku pake React.Js.

Tambahan: Jangan Lupa Tambah Fitur Menarik

Setelah lo berhasil bikin aplikasi katalog buku sederhana ini, jangan berhenti sampai di sini, bro! Tambahin fitur-fitur seru biar aplikasi lo lebih canggih dan keliatan profesional. Berikut beberapa ide fitur tambahan yang bisa lo coba:

1. Pencarian Buku

Lo bisa bikin fitur search bar di atas daftar buku. Jadi, user bisa cari buku berdasarkan judul atau nama pengarang. Gunakan fungsi JavaScript filter() buat nyaring buku yang sesuai input user.

const filteredBooks = books.filter((book) =>
  book.title.toLowerCase().includes(searchTerm.toLowerCase())
);

2. Detail Buku

Tambahin fitur di mana kalau user klik salah satu buku, bakal muncul detail lengkap tentang buku tersebut, kayak sinopsis atau tahun terbit. Lo bisa pake React Router buat bikin navigasi ke halaman detail.

3. Tambah Buku Baru

Coba tambahin form di mana user bisa input buku baru ke dalam katalog. Gunakan state React buat nge-handle data baru yang dimasukkan user.

Dengan fitur-fitur ini, aplikasi katalog buku lo bakal makin keren dan interaktif. Terus eksplor dan tambahkan fitur sesuai kreativitas lo, bro! Keep coding and stay creative!

 

Kesimpulan

Belajar React.Js itu emang challenging, tapi juga seru banget. Dengan bikin aplikasi sederhana kayak katalog buku ini, lo udah selangkah lebih dekat jadi front-end developer yang keren. Jangan lupa, bro, ngoding itu soal proses, bukan hasil instan. Nikmati perjalanan lo, belajar dari kesalahan, dan terus eksplor teknologi baru.

Selamat ngoding, bro dan sis! Keep calm, stay curious, and happy coding!

Published on July 03, 2025
Last updated on July 17, 2025