Bagian ini sangat penting, karena sekarang kita mulai memahami apa yang sebenarnya terjadi di balik layar ketika menjalankan aplikasi React dengan Vite.

Kalau materi sebelumnya menjawab:

“Bagaimana cara membuat dan menjalankan React?”

Materi ini menjawab:

“Apa isi project React kita, dan bagaimana file-file tersebut bekerja sama sampai akhirnya muncul di browser?”

1. Gambaran besar struktur project

Setelah menjalankan Vite, project kita kurang lebih terlihat seperti ini:

hello-world/
│
├── node_modules/
├── public/
├── src/
│
├── eslint.config.js
├── index.html
├── package.json
├── package-lock.json
├── vite.config.js
├── .gitignore
└── README.md

Secara sederhana, kita bisa mengelompokkannya menjadi:

Project React
│
├── 📦 Dependency
│   └── node_modules
│
├── 🌐 Static files
│   └── public
│
├── 💻 Source code
│   └── src
│
└── ⚙️ Configuration
    ├── package.json
    ├── vite.config.js
    ├── eslint.config.js
    └── ...

Yang paling penting untuk pemula adalah memahami:

package.json
index.html
node_modules/
public/
src/

2. package.json — daftar kebutuhan project

File pertama yang dibahas adalah:

package.json

Ini adalah salah satu file paling penting dalam project JavaScript/React.

Bayangkan package.json seperti daftar belanja project.

Misalnya kamu ingin membuat kue.

Kamu membutuhkan:

Tepung
Telur
Gula
Mentega

Project React juga membutuhkan berbagai package:

React
React DOM
Vite
ESLint
dll.

Daftar kebutuhan tersebut dicatat di package.json.

3. Apa itu dependency?

Dependency berarti:

Library/package yang dibutuhkan oleh project agar bisa bekerja.

Contohnya:

{
  "dependencies": {
    "react": "...",
    "react-dom": "..."
  }
}

Artinya aplikasi kita membutuhkan:

React
React DOM

4. React dan React DOM

Ada dua package yang penting untuk dipahami:

react
react-dom

react

Berisi inti dari library React.

React menangani konsep seperti:

• component
• state
• props
• rendering logic
• hooks
• dan sebagainya.

react-dom

react-dom digunakan untuk menghubungkan React dengan DOM browser.

DOM adalah representasi struktur HTML yang dikelola oleh browser.

Jadi secara sederhana:

React
  ↓
react-dom
  ↓
Browser DOM
  ↓
Tampilan

Ini sebabnya keduanya biasanya muncul bersama dalam aplikasi React untuk web.

5. Versi React

Di materi disebut React versi 19.x.

Misalnya:

19.2

Kamu mungkin melihat versi yang berbeda ketika membuat project sendiri.

Misalnya:

19.1
19.2
19.x

Itu normal.

Versi package bisa berubah seiring waktu.

Jadi jangan panik kalau project kamu tidak persis sama dengan screenshot atau video tutorial.

6. Cara update React

Materi menunjukkan command untuk meng-update React dan package terkait.

Secara konsep:

npm install react@latest react-dom@latest @types/react@latest @types/react-dom@latest

Artinya kurang lebih:

“Install versi terbaru dari package-package tersebut.”

@latest berarti kita meminta versi terbaru yang tersedia pada saat command dijalankan.

7. Apa itu @types/react?

Kalau kamu menggunakan JavaScript biasa, bagian ini mungkin belum terlalu penting.

@types/... berkaitan dengan TypeScript type definitions.

Contohnya:

@types/react
@types/react-dom

Package tersebut memberikan informasi tipe yang membantu tooling/editor/TypeScript memahami API React.

Untuk sekarang cukup ingat:

react
    → React

react-dom
    → React untuk browser

@types/react
    → Type information React

@types/react-dom
    → Type information React DOM

Nanti ketika belajar TypeScript, konsep ini akan lebih masuk akal.

8. dependencies vs devDependencies

Di package.json, kamu bisa melihat dua kelompok:

dependencies
devDependencies

Ini perbedaan yang penting.

dependencies

Package yang dibutuhkan oleh aplikasi.

Misalnya:

react
react-dom

devDependencies

Package yang terutama digunakan selama proses development/build/linting.

Misalnya:

vite
eslint

Sederhananya:

dependencies
    ↓
Kebutuhan aplikasi

devDependencies
    ↓
Kebutuhan developer/tooling

9. Scripts di package.json

Selain dependencies, package.json juga memiliki:

scripts

Contohnya bisa seperti:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  }
}

Scripts ini bisa dianggap sebagai shortcut command.

10. npm run dev

Ketika kita menjalankan:

npm run dev

npm melihat:

"dev": "vite"

Kemudian menjalankan Vite.

Alurnya:

npm run dev
      ↓
package.json
      ↓
"dev": "vite"
      ↓
Vite
      ↓
Development Server
      ↓
localhost:5173

11. npm run build

Command:

npm run build

digunakan untuk membuat versi aplikasi yang siap digunakan untuk production.

Secara sederhana:

Source Code
    ↓
npm run build
    ↓
Build Process
    ↓
Production Files

Misalnya ketika aplikasi sudah selesai dibuat dan ingin di-deploy ke hosting.

12. npm run preview

Setelah melakukan:

npm run build

kita bisa menggunakan:

npm run preview

untuk melihat/mengetes hasil build tersebut secara lokal.

Sederhananya:

Development
    ↓
npm run dev
    ↓
coding

Production simulation
    ↓
npm run build
    ↓
npm run preview

13. npm run lint

Command:

npm run lint

menjalankan ESLint.

Apa itu ESLint?

ESLint adalah tool yang membantu menemukan:

• kesalahan umum
• pola kode yang bermasalah
• masalah style tertentu
• potensi bug
• pelanggaran aturan coding

Misalnya kamu menulis sesuatu yang tidak sesuai dengan aturan project.

ESLint bisa memberi peringatan atau error.

Jadi:

ESLint
   ↓
Memeriksa kode
   ↓
Memberikan warning/error

14. vite.config.js

File berikutnya:

vite.config.js

Ini digunakan untuk melakukan konfigurasi Vite.

Misalnya:

Bagaimana Vite bekerja?
Bagaimana plugin digunakan?
Bagaimana konfigurasi tertentu diatur?

Untuk sekarang:

Tidak perlu mengubah file ini.

Kita akan lebih banyak fokus ke src/.

15. eslint.config.js

File:

eslint.config.js

digunakan untuk mengatur bagaimana ESLint memeriksa kode.

Misalnya:

Aturan coding
Plugin
File yang diperiksa
Konfigurasi linting

Sekali lagi, untuk pemula:

Belum perlu terlalu fokus di sini.

16. index.html — HTML utama aplikasi

Nah, sekarang kita masuk ke file yang sangat penting:

index.html

Dalam project React berbasis SPA, biasanya kita memiliki satu HTML utama yang menjadi entry point browser.

Contohnya secara sederhana:

<!doctype html>
<html>
  <head>
    <title>Hello World</title>
  </head>

  <body>
    <div id="root"></div>

    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Ada dua bagian yang sangat penting:

<div id="root"></div>

dan:

<script type="module" src="/src/main.jsx"></script>

17. Apa itu SPA?

Materi menyebut:

Single Page Application

atau:

SPA

Konsep sederhananya adalah aplikasi web menggunakan satu dokumen HTML utama, sementara isi UI dapat berubah ketika pengguna berinteraksi dan berpindah bagian aplikasi.

Misalnya aplikasi:

Dashboard
Users
Products
Settings

Pada pendekatan SPA, browser tidak harus mengambil HTML baru untuk setiap perubahan tampilan seperti aplikasi tradisional multi-page.

React dapat memperbarui bagian UI yang diperlukan.

18. index.html bukan tempat utama membuat UI React

Ini sangat penting.

Pemula kadang berpikir:

“Kalau ingin membuat halaman, saya tulis semuanya di index.html.”

Dalam aplikasi React, biasanya bukan seperti itu.

Kita ingin React mengontrol UI.

Karena itu kita memiliki:

<div id="root"></div>

Kemudian React akan masuk ke dalam element tersebut.

19. Apa itu root?

Perhatikan:

<div id="root"></div>

root adalah tempat React “dipasang”.

Bayangkan:

index.html
│
└── <div id="root">
         ↑
      React masuk
      di sini

Kemudian React mengontrol isi di dalamnya.

20. Analogi root

Bayangkan rumah:

Rumah
│
└── Ruang kosong
       ↓
      root

Kemudian React masuk dan mengisi ruang tersebut:

root
│
├── Header
├── Navigation
├── Main Content
└── Footer

Jadi root adalah semacam titik pemasangan aplikasi React.

21. package-lock.json

File:

package-lock.json

berfungsi membantu memastikan dependency yang diinstall tetap konsisten.

Misalnya kamu dan temanmu sama-sama mengerjakan project.

Tanpa lock file, versi dependency tertentu bisa berpotensi berbeda.

Dengan lock file:

Developer A
     ↓
package-lock.json
     ↓
versi dependency tertentu

Developer B
     ↓
package-lock.json
     ↓
versi dependency yang sama

Tujuannya:

“Di komputer saya jalan, di komputer kamu juga harus mendapatkan dependency yang konsisten.”

22. .gitignore

File:

.gitignore

berhubungan dengan Git.

Git digunakan untuk mencatat perubahan kode.

Tetapi tidak semua file perlu dimasukkan ke repository.

Contohnya:

node_modules/

Biasanya tidak kita commit.

.gitignore memberitahu Git:

“File/folder ini jangan dimasukkan ke Git.”

23. Kenapa node_modules tidak di-Git?

Karena node_modules bisa sangat besar.

Misalnya project hanya memiliki:

package.json
package-lock.json

kita bisa menjalankan:

npm install

dan npm akan menginstall dependency kembali.

Jadi tidak perlu menyimpan seluruh:

node_modules/

ke repository.

24. README.md

File:

README.md

biasanya berisi dokumentasi project.

Misalnya:

Nama project
Cara install
Cara menjalankan
Cara build
Informasi project

Untuk project yang kamu buat sendiri, README juga bisa kamu gunakan untuk menjelaskan cara orang lain menjalankan project tersebut.

25. Folder node_modules

Sekarang kita masuk ke folder.

Pertama:

node_modules/

Bayangkan ini sebagai:

Gudang besar berisi semua dependency yang diinstall.

Misalnya project membutuhkan:

React
React DOM
Vite
ESLint

npm akan menginstall package-package tersebut dan dependency mereka ke:

node_modules/

26. Kenapa node_modules sangat besar?

Karena dependency biasanya memiliki dependency lagi.

Misalnya:

Project
  ↓
React
  ↓
Dependency A
  ↓
Dependency B
  ↓
Dependency C

Jadi walaupun kamu hanya merasa:

“Saya cuma install React.”

sebenarnya banyak package pendukung yang mungkin ikut diperlukan.

Akibatnya:

node_modules/

bisa berisi ribuan file.

27. Kalau node_modules dihapus?

Tidak masalah selama kita masih memiliki:

package.json
package-lock.json

Kita bisa menjalankan:

npm install

Kemudian npm akan menginstall dependency kembali.

Jadi:

node_modules
     ↓
bisa dibuat ulang

Itulah sebabnya folder ini biasanya tidak di-commit ke Git.

28. Folder public

Folder berikutnya:

public/

digunakan untuk static assets.

Misalnya:

public/
├── image.png
├── favicon.ico
└── robots.txt

File-file di sini bisa disajikan sebagai asset statis.

29. Apa itu static asset?

Static asset adalah file yang pada dasarnya ingin kita sajikan tanpa perlu diproses sebagai module JavaScript oleh aplikasi.

Contohnya:

Gambar
SVG
favicon
robots.txt
file tertentu

Bayangkan:

public/
   ↓
Storage room
   ↓
File siap digunakan

30. vite.svg

Pada template Vite biasanya terdapat:

public/vite.svg

File tersebut digunakan oleh starter project, misalnya sebagai favicon.

Setelah kita mulai membuat aplikasi sendiri, file ini bahkan bisa saja tidak kita perlukan.

31. Folder paling penting: src

Sekarang kita sampai pada folder:

src/

src adalah singkatan dari:

source

Ini adalah tempat utama kita menulis source code aplikasi.

Struktur sederhananya:

src/
│
├── assets/
├── App.jsx
├── App.css
├── index.css
└── main.jsx

Kalau kamu belajar React:

Sebagian besar waktu kamu akan berada di dalam src/.

32. App.jsx

File:

src/App.jsx

berisi component utama aplikasi.

Misalnya:

function App() {
  return <h1>Hello World</h1>;
}

export default App;

Di sini:

function App()

adalah React component.

Dan:

<h1>Hello World</h1>

adalah UI yang ingin ditampilkan.

33. App.css

File:

App.css

biasanya berisi styling yang berkaitan dengan App.

Misalnya:

.title {
  font-size: 40px;
}

Kemudian digunakan dalam component:

<h1 className="title">
  Hello World
</h1>

Jadi:

App.jsx
   +
App.css
   ↓
Tampilan App

34. index.css

Berbeda dengan App.css, file:

index.css

biasanya digunakan untuk global styling.

Contohnya:

body {
  margin: 0;
  font-family: sans-serif;
}

Style tersebut bisa memengaruhi keseluruhan aplikasi.

Jadi perbedaannya secara sederhana:

App.css
   ↓
Style yang berkaitan dengan App

index.css
   ↓
Global style aplikasi

35. assets

Folder:

src/assets/

digunakan untuk asset yang menjadi bagian dari source code aplikasi.

Misalnya:

src/assets/
├── react.svg
├── logo.png
└── icons.svg

Perhatikan bahwa ada dua konsep asset:

public/
    ↓
Static files

src/assets/
    ↓
Assets yang menjadi bagian dari source/module aplikasi

Untuk pemula, jangan terlalu khawatir membedakan keduanya dulu. Yang penting tahu bahwa keduanya memiliki tujuan berbeda dalam project Vite.

36. File paling penting: main.jsx

Sekarang kita sampai ke bagian yang sangat penting untuk memahami React:

src/main.jsx

File ini adalah salah satu titik awal aplikasi React.

Secara sederhana, isinya bisa seperti:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Jangan khawatir kalau belum memahami semua syntax.

Kita pecah satu-satu.

37. document.getElementById('root')

Bagian ini:

document.getElementById('root')

mencari element:

<div id="root"></div>

yang ada di index.html.

Jadi:

index.html
      ↓
<div id="root">
      ↑
dicari oleh main.jsx

38. createRoot

Kemudian ada:

createRoot(...)

Secara sederhana, ini memberitahu React:

“Gunakan element ini sebagai root aplikasi React.”

Misalnya:

createRoot(document.getElementById('root'))

berarti:

Cari #root
     ↓
Jadikan sebagai root React

39. .render()

Kemudian:

.render(...)

berarti kita memberitahu React:

“Render UI ini ke root.”

Misalnya:

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

Artinya secara sederhana:

Ambil #root
    ↓
Jalankan React
    ↓
Render <App />
    ↓
Masukkan UI ke #root

40. Ini adalah alur terpenting dari materi

Sekarang gabungkan semuanya.

Kita memiliki:

index.html

di dalamnya:

<div id="root"></div>

dan:

<script type="module" src="/src/main.jsx"></script>

Kemudian browser menjalankan:

main.jsx

main.jsx mengatakan:

Ambil #root
     ↓
Render <App />

Kemudian:

App.jsx

menghasilkan UI.

Akhirnya:

Browser
   ↓
Menampilkan UI

41. Gambaran lengkapnya

Ini bagian yang wajib kamu pahami:

                    index.html
                        │
                        │
              ┌─────────┴─────────┐
              │                   │
              ↓                   ↓
       <div id="root">      main.jsx
                              │
                              ↓
                     createRoot(#root)
                              │
                              ↓
                         render(<App />)
                              │
                              ↓
                          App.jsx
                              │
                              ↓
                         React UI
                              │
                              ↓
                           Browser

Dengan kata lain:

index.html
    ↓
main.jsx
    ↓
App.jsx
    ↓
UI

Ini adalah rantai utama aplikasi React sederhana.

42. Apa yang terjadi ketika npm run dev?

Sekarang kita bisa menjawab pertanyaan tersebut secara lengkap.

Kita menjalankan:

npm run dev

Step 1

npm membaca:

package.json

dan menemukan:

"dev": "vite"

Step 2

Vite dijalankan.

npm
 ↓
Vite

Step 3

Vite menjalankan development server.

localhost:5173

Step 4

Browser meminta halaman tersebut.

Browser
   ↓
localhost:5173

Step 5

Vite menyajikan:

index.html

Step 6

Browser membaca:

<script type="module" src="/src/main.jsx">

Kemudian menjalankan:

main.jsx

Step 7

main.jsx mencari:

<div id="root"></div>

Step 8

React merender:

<App />

ke dalam:

<div id="root">

Step 9

App.jsx menghasilkan UI.

Misalnya:

<h1>Hello World</h1>

Step 10

Browser akhirnya menampilkan:

Hello World

43. Diagram lengkap

Kalau dibuat sebagai satu diagram:

                npm run dev
                     │
                     ↓
                   Vite
                     │
                     ↓
          Development Server
                     │
                     ↓
                index.html
                     │
                     │
             ┌───────┴───────┐
             │               │
             ↓               ↓
          #root           main.jsx
                             │
                             ↓
                         React DOM
                             │
                             ↓
                          <App />
                             │
                             ↓
                         App.jsx
                             │
                             ↓
                          React UI
                             │
                             ↓
                          Browser

Kalau kamu memahami diagram ini, kamu sudah memiliki fondasi yang sangat bagus.

44. Lalu apa peran Vite setelah aplikasi berjalan?

Vite tidak hanya menjalankan aplikasi.

Vite juga mengawasi perubahan file selama development.

Misalnya kamu mengubah:

<h1>Hello World</h1>

menjadi:

<h1>Welcome to React</h1>

Kemudian save.

Vite mendeteksi:

App.jsx berubah

Kemudian menggunakan mekanisme seperti HMR untuk memperbarui aplikasi.

App.jsx
   ↓
Save
   ↓
Vite mendeteksi perubahan
   ↓
HMR
   ↓
Browser diperbarui

Itulah kenapa kamu bisa melihat perubahan hampir secara instan.

45. Bedakan development dan production

Ini juga penting.

Ketika belajar React, kita biasanya menjalankan:

npm run dev

Ini untuk development.

Kita coding, mencoba fitur, melihat perubahan, debugging, dan sebagainya.

Sedangkan:

npm run build

digunakan untuk membuat hasil production.

Jadi:

DEVELOPMENT
npm run dev
     ↓
Coding
     ↓
HMR
     ↓
Browser

vs:

PRODUCTION
npm run build
     ↓
Optimized files
     ↓
Deploy
     ↓
Users

46. Analogi sebuah restoran

Supaya semua konsep tadi lebih mudah diingat, bayangkan aplikasi React sebagai restoran.

package.json

Seperti daftar bahan dan peralatan yang dibutuhkan.

React
React DOM
Vite
ESLint

node_modules

Seperti gudang tempat semua bahan/peralatan berada.

public

Seperti ruang penyimpanan barang yang siap digunakan.

src

Seperti dapur utama tempat developer bekerja.

App.jsx

Seperti resep utama yang menentukan apa yang akan dibuat.

App.css

Seperti aturan tampilan makanan.

main.jsx

Seperti orang yang menghubungkan dapur dengan restoran:

“Gunakan resep App dan tampilkan hasilnya di tempat ini.”

index.html

Seperti bangunan restoran.

Di dalamnya ada:

root

sebagai tempat aplikasi React ditempatkan.

Vite

Seperti sistem operasional dapur yang membantu semuanya berjalan cepat selama development.

47. Exercise dari materi

Materi meminta kamu membuat project kedua:

core-concepts

Langkahnya:

npm create vite@latest

Kemudian pilih React dan JavaScript.

Setelah selesai:

cd core-concepts

Kemudian:

npm run dev

Buka aplikasi di browser.

Lalu buka:

src/App.jsx

Cari text yang ditampilkan.

Ubah misalnya menjadi:

function App() {
  return <h1>React Core Concepts</h1>;
}

Save.

Kemudian lihat browser.

Seharusnya UI berubah secara otomatis.

48. Kalau ingin benar-benar memahami latihan tersebut

Jangan hanya melakukan:

copy → paste → selesai

Coba lakukan eksperimen kecil.

Misalnya ubah:

<h1>Hello World</h1>

menjadi:

<h1>Belajar React</h1>

Kemudian:

<p>Ini aplikasi React pertama saya.</p>

Kemudian tambahkan:

<button>Click Me</button>

Sehingga:

function App() {
  return (
    <div>
      <h1>Belajar React</h1>
      <p>Ini aplikasi React pertama saya.</p>
      <button>Click Me</button>
    </div>
  );
}

Lalu perhatikan:

App.jsx
   ↓
Save
   ↓
Vite
   ↓
HMR
   ↓
Browser

Dengan melakukan eksperimen seperti ini, konsepnya akan jauh lebih mudah melekat.

49. Ringkasan setiap file

Berikut cheat sheet yang bisa kamu simpan:

50. Tiga file yang paling penting untuk kamu ingat

Untuk pemula, fokus dulu pada:

index.html
main.jsx
App.jsx

Hubungannya:

        index.html
             │
             │
        <div id="root">
             │
             ↑
             │
          main.jsx
             │
             │ render
             ↓
          <App />
             │
             ↓
          App.jsx
             │
             ↓
            UI

Kalau kamu ditanya:

“Bagaimana App.jsx akhirnya muncul di browser?”

Jawaban sederhananya:

Browser membuka index.html. Di sana terdapat div dengan id root dan script yang menunjuk ke main.jsx. main.jsx menggunakan React DOM untuk mengambil #root dan me-render <App /> ke dalamnya. App.jsx menghasilkan UI React yang kemudian ditampilkan oleh browser.

🧠 Inti yang harus benar-benar kamu pahami

Jangan berusaha menghafal semua nama file sekaligus. Untuk sekarang, pegang empat mental model:

1. package.json = daftar kebutuhan project

Apa yang dibutuhkan project?
→ package.json

2. node_modules = hasil install dependency

Dependency yang sudah diinstall?
→ node_modules

3. src = tempat utama kita coding

Di mana saya banyak menulis React?
→ src/

4. index.html → main.jsx → App.jsx = jalur utama React

Browser
  ↓
index.html
  ↓
main.jsx
  ↓
App.jsx
  ↓
React UI

Dan ketika development:

Edit App.jsx
     ↓
Save
     ↓
Vite + HMR
     ↓
Browser langsung update

Kalau alur index.html → main.jsx → App.jsx → browser sudah benar-benar kamu pahami, kamu sudah punya fondasi yang sangat bagus untuk masuk ke materi React berikutnya: JSX dan bagaimana sebenarnya kita menulis UI menggunakan component React.