Bagian ini adalah praktik pertama membuat aplikasi React dari nol. Saya akan jelaskan bukan hanya langkahnya, tetapi juga apa yang sebenarnya terjadi di balik setiap command, supaya kamu tidak sekadar copy-paste.

1. Gambaran besar prosesnya

Di materi ini kita akan melakukan alur seperti berikut:

Install Node.js
      ↓
Install VS Code
      ↓
Buat project React
      ↓
Menggunakan Vite
      ↓
Jalankan development server
      ↓
Buka aplikasi di browser
      ↓
Edit App.jsx
      ↓
Browser otomatis berubah

Jadi tujuan akhirnya adalah:

Browser
   ↓
Hello World

2. Apa yang harus disiapkan?

Ada dua hal utama:

1. Node.js

2. Code editor

Materi merekomendasikan VS Code.

3. Apa itu Node.js?

Ini sering membingungkan pemula.

Kalau React adalah library JavaScript untuk membuat UI, lalu kenapa kita membutuhkan Node.js?

Karena ketika mengembangkan React, kita membutuhkan berbagai development tools yang berjalan menggunakan JavaScript di komputer kita.

Node.js memungkinkan JavaScript dijalankan di luar browser.

Biasanya JavaScript dijalankan oleh browser:

JavaScript
    ↓
Browser
    ↓
Chrome / Firefox / Edge

Dengan Node.js:

JavaScript
    ↓
Node.js
    ↓
Operating System

Karena itu kita bisa menjalankan berbagai command seperti:

npm create vite@latest

atau:

npm run dev

4. Apa itu npm?

Ketika kamu menginstall Node.js, biasanya kamu juga mendapatkan npm.

npm adalah singkatan dari:

Node Package Manager

Sederhananya, npm adalah alat untuk mengelola package dan menjalankan berbagai command dalam project JavaScript.

Misalnya:

npm install

digunakan untuk menginstall dependency.

Sedangkan:

npm run dev

digunakan untuk menjalankan script development yang sudah didefinisikan project.

Jadi ketika kamu melihat:

npm ...

pikirkan:

“Saya sedang menggunakan package manager/tooling untuk project JavaScript saya.”

5. Apa itu VS Code?

VS Code adalah code editor.

Fungsinya sebagai tempat kita menulis dan mengedit kode.

Misalnya nanti kita memiliki:

src/
 ├── App.jsx
 ├── main.jsx
 └── ...

Kita membuka file tersebut menggunakan VS Code.

Kenapa banyak developer menggunakan VS Code?

Karena tersedia banyak fitur seperti:

• syntax highlighting
• autocomplete
• error detection
• extension
• integrated terminal
• Git integration
• debugging

Jadi VS Code bisa dianggap sebagai meja kerja programmer.

6. Client-side React

Materi kemudian mengatakan bahwa course ini menggunakan:

Client-side React

Apa maksudnya?

Bayangkan user membuka website.

Dengan pendekatan client-side:

User
  ↓
Browser
  ↓
Download JavaScript
  ↓
React berjalan
  ↓
React membuat UI

Browser yang menjalankan React dan menghasilkan tampilan UI.

Contoh sederhana:

Server
   │
   │ kirim aplikasi
   ↓
Browser
   │
   ↓
React
   │
   ↓
UI

7. Apakah client-side React satu-satunya cara?

Tidak.

Dalam ekosistem modern terdapat beberapa strategi rendering seperti:

• Client-Side Rendering (CSR)
• Server-Side Rendering (SSR)
• Static Site Generation (SSG)
• dan pendekatan lainnya.

Namun materi ini sengaja dimulai dari client-side React karena:

Ini memberikan fondasi yang bagus untuk memahami React itu sendiri.

Sebagai pemula, menurut saya ini juga pendekatan belajar yang masuk akal.

Sebelum belajar berbagai optimasi rendering, lebih penting memahami dulu:

Component
Props
State
Hooks
Events
Rendering

8. Membuat project React

Sekarang kita masuk bagian praktik.

Kita memiliki folder:

React Essentials

Folder ini menjadi workspace.

Kemudian buka terminal di VS Code.

Shortcut yang disebut dalam materi:

Ctrl + `

Backtick (`) biasanya berada di dekat tombol angka 1 pada keyboard.

9. Command pertama: npm create vite@latest

Kemudian jalankan:

npm create vite@latest

Ini adalah command yang sangat penting.

Secara sederhana, command tersebut mengatakan:

“npm, buatkan saya project menggunakan Vite versi terbaru.”

10. Apa itu Vite?

Vite adalah build tool dan development tool yang banyak digunakan dalam ekosistem frontend modern.

Jangan terlalu pusing dengan istilah “build tool” dulu.

Untuk sekarang, bayangkan Vite sebagai:

alat yang membantu kita membuat dan menjalankan project React dengan cepat.

Vite membantu dalam hal seperti:

Membuat project
      ↓
Menjalankan development server
      ↓
Memproses source code
      ↓
Memberikan pengalaman development yang cepat

Jadi:

React
   +
Vite
   ↓
Development environment

React dan Vite memiliki peran yang berbeda.

React → membuat UI.

Vite → membantu development dan proses build project.

11. Prompt pertama: Project name

Setelah menjalankan:

npm create vite@latest

terminal akan memberikan beberapa pertanyaan.

Pertama:

Project name:

Materi menggunakan:

hello-world

Perhatikan bahwa penulisannya:

hello-world

bukan:

hello world

Tanda - disebut hyphen.

12. Memilih framework

Kemudian Vite akan bertanya:

Select a framework:

Kita pilih:

React

Karena tujuan kita adalah membuat aplikasi React.

Secara konsep:

Vite
 │
 ├── React
 ├── Vue
 ├── Svelte
 └── ...

Vite bisa digunakan dengan beberapa teknologi frontend.

Kita memilih:

React

13. Memilih variant

Setelah memilih React, akan ada pilihan variant.

Materi memilih:

JavaScript + React Compiler

Kenapa JavaScript?

Karena course tersebut akan membahas React menggunakan JavaScript terlebih dahulu.

Ada juga TypeScript, tetapi itu akan dipelajari secara terpisah.

Jadi untuk sekarang:

React
 +
JavaScript

14. Apa itu React Compiler?

Kalau kamu melihat pilihan:

JavaScript + React Compiler

jangan langsung berpikir:

“Wah, saya harus memahami React Compiler sekarang.”

Tidak.

Untuk tahap awal, kamu cukup tahu bahwa React Compiler adalah tooling yang membantu melakukan optimasi tertentu terhadap kode React.

Fokus utama kamu tetap React-nya.

Jangan sampai terlalu banyak tooling membuat konsep dasar React menjadi membingungkan.

15. Experimental Rollup

Kemudian ada pertanyaan mengenai Rollup/Vite experimental feature.

Materi memilih:

No

Untuk pemula, pilihan ini masuk akal.

Alasannya sederhana:

Kita sedang belajar React, bukan bereksperimen dengan fitur build system yang belum diperlukan.

16. Install dependencies dan start sekarang

Kemudian Vite akan menanyakan apakah ingin menginstall menggunakan npm dan menjalankan project.

Pilih:

Yes

Vite kemudian melakukan beberapa pekerjaan.

Kurang lebih:

Create project
      ↓
Create files
      ↓
Install dependencies
      ↓
Start development server

Setelah selesai, kita mendapatkan folder project.

17. Apa yang sebenarnya ada di dalam project?

Kurang lebih struktur awalnya seperti:

hello-world/
│
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── App.jsx
│   ├── App.css
│   ├── index.css
│   └── main.jsx
│
├── index.html
├── package.json
├── package-lock.json
└── vite.config.js

Jangan khawatir kalau saat ini belum memahami semuanya.

Nanti bagian folder structure akan dibahas lebih detail.

18. Development server

Setelah project dibuat, terminal akan menunjukkan sesuatu seperti:

Local: http://localhost:5173/

Ini berarti Vite menjalankan development server.

19. Apa itu localhost?

localhost berarti:

komputer kita sendiri.

Jadi:

localhost

bukan website yang berada di internet.

Misalnya:

http://localhost:5173

artinya:

Komputer kamu
     ↓
Port 5173
     ↓
Aplikasi React

20. Apa itu port 5173?

Ini juga sering membingungkan.

Komputer bisa menjalankan banyak aplikasi/network service sekaligus.

Port bisa kita bayangkan seperti nomor pintu.

Misalnya:

localhost:5173

berarti:

localhost
   +
port 5173

Vite menggunakan port tersebut untuk development server secara default dalam setup ini.

Jadi browser diarahkan ke:

http://localhost:5173

dan mendapatkan aplikasi React kita.

21. Alur ketika membuka localhost

Ketika kamu membuka:

http://localhost:5173

alur sederhananya:

Browser
   │
   │ request
   ↓
Vite Development Server
   │
   ↓
Project React
   │
   ↓
Browser menampilkan UI

Jadi sebenarnya kita sedang menjalankan website di komputer sendiri.

22. Kenapa ada spinning React logo?

Project yang dibuat Vite biasanya memiliki starter UI.

Kurang lebih:

Vite + React

       ⚛️

Edit src/App.jsx and save to test HMR

Ada logo React yang berputar.

Itu bukan aplikasi final kita.

Itu hanya starter/template untuk memastikan project berhasil dibuat dan berjalan.

23. Apa itu HMR?

Ini salah satu bagian menarik dari Vite.

Materi menyebut:

Hot Module Replacement

atau biasa disingkat:

HMR

Misalnya browser sedang menampilkan:

Vite + React

Kemudian kamu membuka:

src/App.jsx

dan mengubahnya menjadi:

Hello World

Kemudian save.

Browser bisa langsung memperbarui tampilan.

Edit code
   ↓
Save
   ↓
Vite mendeteksi perubahan
   ↓
HMR
   ↓
UI diperbarui

Kita tidak perlu terus-menerus:

Stop server
↓
Start server
↓
Refresh

Itulah yang membuat proses development terasa cepat.

24. Mengubah App.jsx

Sekarang bagian yang paling penting.

Buka:

src/App.jsx

File ini berisi component utama aplikasi.

Starter project biasanya memiliki code yang lebih panjang.

Kita bisa mengubah heading-nya menjadi:

<h1>Hello World</h1>

Setelah save:

App.jsx
   ↓
Vite mendeteksi perubahan
   ↓
HMR
   ↓
Browser
   ↓
Hello World

Dan akhirnya:

Hello World

muncul di browser.

🎉 Selamat!

Kamu sudah menjalankan aplikasi React pertama.

25. Apa sebenarnya App.jsx?

Ini penting untuk dipahami sejak awal.

.jsx berarti file JavaScript yang bisa menggunakan syntax JSX.

Contohnya:

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

Di sini:

function App()

adalah sebuah React component.

Sedangkan:

<h1>Hello World</h1>

adalah JSX yang mendeskripsikan UI.

26. Apa itu JSX?

JSX memungkinkan kita menulis sesuatu yang bentuknya mirip HTML di dalam JavaScript.

Contoh:

function App() {
  return (
    <div>
      <h1>Hello World</h1>
      <p>Welcome to React</p>
    </div>
  );
}

Sekilas terlihat seperti HTML.

Tetapi ini berada di dalam file JavaScript/JSX.

Inilah salah satu ciri khas React.

Nanti kita akan belajar bahwa JSX bukan HTML biasa.

27. Cara menghentikan development server

Di terminal, tekan:

Ctrl + C

Ini akan menghentikan development server.

Misalnya:

Vite server
     ↓
RUNNING

setelah:

Ctrl + C

menjadi:

Vite server
     ↓
STOPPED

Browser mungkin tidak lagi bisa mengakses aplikasi tersebut.

28. Cara menjalankan kembali

Untuk menjalankan kembali, gunakan:

npm run dev

Tetapi ada satu hal penting.

Kamu harus berada di folder project.

Misalnya project berada di:

React Essentials/
└── hello-world/

Kalau terminal sedang berada di:

React Essentials/

jalankan:

cd hello-world

Kemudian:

npm run dev

29. Apa itu cd?

cd berarti:

change directory

Artinya berpindah folder.

Misalnya:

cd hello-world

berarti:

“Masuk ke folder hello-world.”

Secara visual:

React Essentials/
│
└── hello-world/

Sebelum:

📁 React Essentials

Setelah:

📁 React Essentials
    └── 📁 hello-world ← sekarang di sini

30. Kenapa npm run dev bisa error?

Misalnya kamu menjalankan:

npm run dev

ketika terminal berada di:

React Essentials/

bukan:

React Essentials/hello-world/

Maka npm tidak menemukan konfigurasi project yang diperlukan.

Karena file seperti:

package.json

berada di:

hello-world/

Jadi:

❌ React Essentials/
    npm run dev

sedangkan:

✅ React Essentials/hello-world/
    npm run dev

31. Apa itu package.json?

Ini file yang sangat penting dalam project JavaScript.

Contoh sederhananya:

{
  "scripts": {
    "dev": "vite"
  }
}

Ketika kita menjalankan:

npm run dev

npm melihat package.json.

Kemudian menemukan:

"dev": "vite"

dan menjalankan:

vite

Jadi hubungan sederhananya:

npm run dev
      ↓
package.json
      ↓
script "dev"
      ↓
vite
      ↓
Development server

32. Jadi apa sebenarnya yang terjadi ketika kita menjalankan npm run dev?

Ini bagus untuk dipahami.

Kita mengetik:

npm run dev

Kemudian:

npm
 ↓
mencari package.json
 ↓
mencari script "dev"
 ↓
menjalankan Vite
 ↓
Vite menjalankan development server
 ↓
localhost:5173
 ↓
Browser

Jadi command tersebut bukan command React secara langsung.

Kita menjalankan script npm yang menjalankan Vite.

33. Bedakan React, Node.js, npm, VS Code, dan Vite

Ini bagian yang sering membuat pemula bingung.

Ingat tabel berikut:

Kalau digambarkan:

                 VS Code
              (tempat coding)
                   │
                   ↓
              React Project
                   │
                   ↓
                 Vite
           (development tool)
                   │
                   ↓
             localhost:5173
                   │
                   ↓
                Browser
                   │
                   ↓
              React UI

Sedangkan:

Node.js
   ↓
menyediakan runtime untuk tools JavaScript
   ↓
npm
   ↓
mengelola dependencies & scripts

34. Kenapa kita tidak langsung membuat file React sendiri?

Pertanyaan bagus.

Sebenarnya bisa saja.

Tetapi aplikasi React modern membutuhkan banyak konfigurasi.

Misalnya:

JSX transformation
Module handling
Development server
Hot reload
Build process
Dependency management
Production build

Kalau semuanya dilakukan manual, pemula akan terlalu sibuk dengan konfigurasi.

Vite membantu menyediakan fondasi tersebut.

Jadi kita bisa fokus pada:

Belajar React.

35. Analogi sederhananya

Bayangkan kamu ingin belajar memasak.

Tanpa Vite:

Cari kompor
Atur gas
Cari panci
Atur suhu
Siapkan dapur
Atur peralatan
...

Padahal tujuanmu:

Belajar memasak.

Dengan Vite:

Dapur sudah siap
     ↓
Kamu langsung belajar memasak

Dalam konteks ini:

Vite = menyiapkan dapur

React = belajar membuat masakan

36. Workflow React yang akan sering kamu gunakan

Mulai sekarang kamu akan sering melakukan pola seperti ini:

Pertama

Masuk ke project:

cd hello-world

Kedua

Jalankan development server:

npm run dev

Ketiga

Buka:

http://localhost:5173

Keempat

Edit:

src/App.jsx

Kelima

Save.

Keenam

Browser otomatis berubah karena HMR.

Workflow-nya:

                 ┌───────────────┐
                 │   App.jsx     │
                 └───────┬───────┘
                         │
                       Save
                         ↓
                 ┌───────────────┐
                 │     Vite      │
                 └───────┬───────┘
                         │
                        HMR
                         ↓
                 ┌───────────────┐
                 │    Browser    │
                 └───────────────┘
                         │
                         ↓
                    UI berubah

37. Apa yang sebaiknya kamu pahami sekarang?

Untuk tahap ini, jangan mencoba menghafal semua file.

Cukup pahami 7 hal berikut:

① Node.js

Runtime JavaScript yang dibutuhkan untuk tooling development.

② npm

Tool untuk mengelola package dan menjalankan script.

③ Vite

Tool yang membantu membuat, menjalankan, dan membuild project frontend.

④ React

Library yang kita gunakan untuk membuat UI.

⑤ npm create vite@latest

Command untuk membuat project menggunakan Vite.

⑥ npm run dev

Command untuk menjalankan development server.

⑦ App.jsx

Salah satu file utama tempat kita mulai membuat React component.

38. Urutan command yang perlu kamu ingat

Untuk membuat project baru:

npm create vite@latest

Kemudian pilih:

Project name → hello-world
Framework → React
Variant → JavaScript + React Compiler
Experimental Rollup → No
Install dependencies and start → Yes

Setelah project dibuat, biasanya:

cd hello-world

Kemudian:

npm run dev

Lalu buka:

http://localhost:5173

39. Mental model yang paling penting

Jangan melihat proses ini sebagai kumpulan command yang harus dihafalkan.

Pahami hubungan antar komponennya:

             NODE.JS
                │
                ↓
               npm
                │
                ↓
        Membuat / menjalankan
             project
                │
                ↓
              Vite
                │
                ↓
          React Project
                │
                ↓
             App.jsx
                │
                ↓
             Component
                │
                ↓
              UI
                │
                ↓
             Browser

Dan ketika kamu mengubah kode:

App.jsx
   ↓
Save
   ↓
Vite / HMR
   ↓
Browser update

Kalau alur ini sudah kamu pahami, kamu tidak perlu takut dengan command-command tersebut.

40. Apa yang akan dipelajari setelah ini?

Materi selanjutnya kemungkinan akan membahas struktur folder project.

Dan ini sangat penting karena kamu akan mulai melihat file seperti:

hello-world/
│
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── App.jsx
│   ├── App.css
│   ├── index.css
│   └── main.jsx
│
├── index.html
├── package.json
├── package-lock.json
└── vite.config.js

Jangan khawatir kalau sekarang terlihat banyak.

Kita bisa membongkarnya satu per satu, terutama menjelaskan hubungan:

index.html
    ↓
main.jsx
    ↓
App.jsx
    ↓
Component
    ↓
UI di browser

Bagian main.jsx → App.jsx ini adalah salah satu alur terpenting untuk memahami bagaimana aplikasi React pertama kita benar-benar bekerja.