React vs Build Tools

Ringkasan dari materi: CRA vs tool modern, peran build tool, Node/React/Bootstrap/Vite, dan perbandingan praktis dengan Create React App.

A. CRA vs build tools

Perintah npm create-react-app berasal dari Create React App (CRA). Dulu ini cara standar membuat project React. Masalahnya: CRA sekarang sudah dianggap ketinggalan zaman untuk banyak use case modern.

1. Kenapa dulu CRA “cukup”?

CRA itu enak karena:

  • Langsung jadi, tanpa konfigurasi
  • Sudah include bundler (pakai Webpack di dalamnya)
  • Cocok buat pemula

Jadi benar: untuk belajar dasar React, CRA itu cukup. Tidak perlu development tool tambahan.

2. Kenapa sekarang banyak yang pindah ke tool seperti Vite?

Bukan karena “cuma alat pilihan”, tapi karena ada masalah nyata di CRA:

a. Lambat saat development

  • CRA pakai Webpack → build awal bisa lama
  • Hot reload kadang delay

Vite

  • Dev server jauh lebih cepat (pakai native ES modules)
  • Startup hampir instan

b. Sulit dikustomisasi

CRA itu “tertutup”: konfig Webpack disembunyikan; kalau mau ubah → harus eject (ribet & berisiko).

Vite: konfig lebih simpel & terbuka, lebih fleksibel.

c. Status CRA sekarang

Tim Meta (pembuat React) sendiri tidak lagi menjadikan CRA sebagai rekomendasi utama. Sekarang mereka lebih mengarah ke framework (Next.js, dll) atau tool modern seperti Vite.

3. Jadi harus pakai Vite?

Kalau kamu cuma belajar React → CRA masih oke.

Kalau mau ngikut standar modern → pakai Vite lebih masuk akal.

4. Cara melihatnya biar nggak bingung

Anggap saja: Create React App = “cara lama yang masih bisa dipakai”; Vite = “cara baru yang lebih cepat & ringan”. Bukan berarti yang lama salah—cuma sudah tergantikan.

5. Saran praktis (biar nggak overthinking)

  • Baru mulai → lanjut saja pakai CRA, fokus ke React
  • Mau mulai fresh → langsung pakai Vite
  • Yang penting bukan tool-nya, tapi: kamu ngerti React-nya atau nggak

B. Build tool

Keberadaan tools seperti Vite, Webpack, atau Parcel bukan sekadar “menambah pilihan”, melainkan hasil evolusi kebutuhan di dunia frontend. Jadi masalahnya bukan “terlalu banyak tools”, tapi karena kebutuhan yang berbeda-beda.

Dulu, JavaScript di browser itu sederhana—cukup pakai <script>. Tapi sekarang:

  • Aplikasi jadi besar — banyak pola rendering & arsitektur (lihat singkatan di bawah)
  • Banyak file (JS, CSS, image, modules)
  • Perlu optimasi (minify, code splitting)
  • Perlu fitur modern (ES modules, hot reload)

Di sinilah tools itu muncul.

Istilah singkat (referensi)

  • SPA — Single Page Application
  • SSR — Server-Side Rendering
  • CSR — Client-Side Rendering
  • SSG — Static Site Generation
  • ISR — Incremental Static Regeneration
  • MPA — Multi-Page Application
  • PWA — Progressive Web App
  • Hybrid — SPA + SSR
  • BFF — Backend for Frontend

Kenapa ada banyak pilihan?

Pertama, karena teknologi terus berkembang. Webpack dulu jadi standar, tapi konfigurasi cukup kompleks. Lalu muncul Vite yang lebih cepat dan simpel untuk development modern.

Kedua, karena filosofi yang berbeda.

  • Webpack: fleksibel, powerful, tapi ribet
  • Vite: cepat, minimal config
  • Parcel: “zero config”, cocok buat yang ingin langsung jalan

Ketiga, karena tidak ada solusi “one-size-fits-all”. Project kecil, besar, tim enterprise, atau side project—kebutuhannya beda.

1. Apakah ini buruk untuk pemula?

Jujur: iya, bisa membingungkan di awal. Tapi kabar baiknya: kamu tidak perlu belajar semuanya.

Kalau baru mulai:

  • Pilih satu saja (misalnya Vite)
  • Fokus ke konsep dasar (HTML, CSS, JavaScript)
  • Anggap tools itu “alat bantu”, bukan inti pembelajaran

2. Cara berpikir yang lebih membantu

Daripada melihatnya sebagai “banyak pilihan”, coba anggap: tools itu seperti framework sepeda—pilih satu, pakai, dan jalan dulu. Kamu baru butuh membandingkan setelah paham dasar dan punya konteks.

C. Peran masing-masing

Secara garis besar setiap bagian memiliki peran berbeda—bukan satu paket yang harus selalu dipakai bersama. Kalau dipahami perannya, jadi jauh lebih tidak membingungkan.

Bayangkan lagi bikin aplikasi web, ini pembagian tugasnya:

1. Node.js → “mesin di belakang layar”
Runtime untuk menjalankan JavaScript di luar browser. Dipakai untuk:
  • Menjalankan tools (seperti Vite)
  • Install package (npm, yarn)
  • Bisa juga bikin backend (API, server)
Jadi: Node.js itu fondasi / lingkungan kerja.
2. React → “cara bikin tampilan”
Library untuk bikin UI (tampilan interaktif). Dipakai untuk komponen, state sederhana, SPA. Jadi: React itu cara kamu menulis frontend.
3. Bootstrap → “baju & styling”
Framework CSS. Styling cepat (button, grid, navbar), responsive tanpa ribet. Jadi: Bootstrap untuk tampilan visual (CSS).
4. Vite → “alat bantu development”
Build tool / dev server modern: jalankan project saat dev, hot reload, build ke production. Jadi: Vite alat bantu biar ngoding lebih cepat & nyaman.

Hubungannya kalau digabung

Kalau kamu bikin project modern, biasanya alurnya: install Node.js → pakai Vite untuk buat project → di dalamnya pakai React untuk UI → tambahkan Bootstrap untuk styling.

Analogi

  • Node.js → dapur / listrik rumah
  • Vite → kompor & alat masak
  • React → cara kamu memasak (resep & teknik)
  • Bootstrap → plating & tampilan makanan

Yang sering bikin salah paham

  • “Harus pakai semuanya?” → Tidak
  • “React butuh Bootstrap?” → Tidak
  • “Vite itu framework?” → Bukan, cuma tool

Saran biar tidak bingung

  • Mulai dari: HTML + CSS + JavaScript dulu
  • Lalu coba: React (tanpa Bootstrap dulu juga boleh)
  • Baru pakai: Vite sebagai tool

D. Perbandingan implementasi

Sekarang kita bandingkan secara nyata & praktis antara Create React App vs Vite supaya kelihatan kenapa industri mulai bergeser.

1. Cara buat project

CRA 
npx create-react-app my-app
cd my-app
npm start
Vite 
npm create vite@latest my-app
cd my-app
npm install
npm run dev

Sekilas: mirip, tapi Vite biasanya lebih cepat dari awal setup.

2. Waktu startup (yang langsung kerasa)

CRA: bisa 10–30 detik (tergantung spek). Vite: biasanya < 2 detik.

Kenapa? CRA pakai Webpack → bundling di awal. Vite pakai ES Modules → tidak bundling saat dev.

3. Hot reload (edit file → hasil muncul)

Coba ubah teks di komponen: CRA kadang delay / reload agak berat; Vite hampir instan. Ini penting kalau sering eksperimen UI (apalagi pakai Bootstrap).

4. Struktur project

CRA lebih “disembunyikan”: banyak config tidak terlihat; Webpack config tidak bisa diubah tanpa eject.

Vite lebih transparan: file config jelas (vite.config.js), lebih mudah dijelaskan. Buat pengajaran: Vite lebih “jujur” tentang cara kerja tools.

5. Dampak ke pembelajaran

Dengan kondisi sudah bisa React + Bootstrap + routing, masalah berikutnya biasanya: kenapa build lama? kenapa project berat? gimana optimasi? Di sini Vite jadi relevan karena mulai sadar performa dan siap ngerti tooling sedikit lebih dalam.