Bagian ini sebenarnya membahas dua konsep penting sekaligus:

1. Bagaimana memisahkan setiap React component ke file masing-masing.
2. Bagaimana export/import component menggunakan JavaScript Modules.
3. Perbedaan default export dan named export.
4. Kenapa banyak developer React suka menggunakan named export + arrow function.
5. Dan di akhir, transcript mulai mengantarkan kita ke konsep JSX.

Kita bahas pelan-pelan dari dasar.

1. Masalah: Semua Component Ada di App.jsx

Sebelumnya kita punya sesuatu seperti ini:

function Welcome() {
  return <h2>Welcome Vishwas</h2>;
}

function Button() {
  return <button>Click Me</button>;
}

function App() {
  return (
    <div>
      <h1>Codevolution React Course</h1>
      <Welcome />
      <Button />
    </div>
  );
}

export default App;

Ini tidak salah.

Untuk aplikasi kecil, cara ini masih nyaman.

Tapi bayangkan aplikasi kita semakin besar.

Misalnya ada:

App
├── Header
├── Navbar
├── Sidebar
├── Footer
├── LoginForm
├── RegisterForm
├── ProductCard
├── ProductList
├── Cart
├── CartItem
├── Button
├── Modal
├── SearchBar
├── UserProfile
└── ...

Kalau semua component ditulis di satu App.jsx, akhirnya file tersebut bisa menjadi:

App.jsx
│
├── Header
├── Navbar
├── Sidebar
├── Footer
├── LoginForm
├── RegisterForm
├── ProductCard
├── ProductList
├── Cart
├── CartItem
├── Button
├── Modal
├── SearchBar
├── UserProfile
├── ...
└── App

Berantakan.

Karena itu, React application biasanya menggunakan pendekatan:

Satu component → satu file.

2. Memisahkan Welcome ke File Sendiri

Misalnya kita punya:

function Welcome() {
  return <h2>Welcome Vishwas</h2>;
}

Daripada function tersebut berada di App.jsx, kita buat file baru:

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

Kemudian isi Welcome.jsx:

function Welcome() {
  return <h2>Welcome Vishwas</h2>;
}

Tapi ada masalah.

Di App.jsx, kita masih menulis:

<Welcome />

JavaScript akan bertanya:

“Welcome itu apa?”

Karena Welcome sekarang berada di file yang berbeda.

3. Setiap File JavaScript Punya Scope Sendiri

Ini konsep JavaScript yang sangat penting.

Bayangkan ada dua file:

Welcome.jsx
App.jsx

Di Welcome.jsx:

function Welcome() {
  return <h2>Welcome Vishwas</h2>;
}

Function Welcome ini secara otomatis tidak tersedia di App.jsx.

Jadi kalau di App.jsx kita langsung menulis:

function App() {
  return <Welcome />;
}

JavaScript akan mengatakan:

ReferenceError: Welcome is not defined

Artinya:

“Saya tidak tahu Welcome itu siapa.”

Dan ini masuk akal.

Karena kita sudah memindahkan Welcome ke file lain.

4. Solusinya: Export dan Import

JavaScript mempunyai fitur bernama modules.

Dengan module, satu file bisa memberikan sesuatu kepada file lain.

Ada dua langkah:

Welcome.jsx
    │
    │ export
    ▼
Welcome component
    │
    │ import
    ▼
App.jsx

Jadi:

File yang memiliki component

Harus melakukan:

export

File yang ingin menggunakan component

Harus melakukan:

import

Sederhananya:

Export = “Saya menyediakan sesuatu.”

Import = “Saya ingin menggunakan sesuatu.”

5. Default Export

Transcript pertama menggunakan default export.

Misalnya:

Welcome.jsx

function Welcome() {
  return <h2>Welcome Vishwas</h2>;
}

export default Welcome;

Perhatikan:

export default Welcome;

Artinya:

“Component Welcome ini saya jadikan export utama/default dari file ini.”

6. Kemudian Import di App.jsx

Di App.jsx:

import Welcome from "./Welcome";

Kemudian:

function App() {
  return (
    <div>
      <h1>Codevolution React Course</h1>
      <Welcome />
    </div>
  );
}

Sekarang React tahu Welcome berasal dari file:

./Welcome

7. Apa Arti ./Welcome?

Ini juga penting untuk dipahami.

import Welcome from "./Welcome";

Bagian ini:

./

berarti:

folder saat ini

Misalnya:

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

Karena App.jsx dan Welcome.jsx berada di folder yang sama:

./Welcome

artinya:

“Cari file Welcome di folder tempat file ini berada.”

Kenapa tidak menulis .jsx?

Kita bisa saja menulis:

import Welcome from "./Welcome.jsx";

Tetapi biasanya cukup:

import Welcome from "./Welcome";

Bundler seperti Vite dapat mencari extension tersebut.

Jadi:

"./Welcome"

bisa diarahkan ke:

Welcome.jsx

8. Analogi Sederhana Export dan Import

Bayangkan kamu punya beberapa kamar.

Rumah
├── kamar-A
└── kamar-B

Di kamar A ada sebuah barang:

kamar-A
└── Laptop

Orang di kamar B tidak otomatis bisa menggunakan laptop tersebut.

Kamu harus mengatakan:

“Laptop ini saya keluarkan dari kamar saya.”

Itulah export.

Kemudian orang di kamar B mengatakan:

“Saya ingin mengambil laptop itu.”

Itulah import.

Dalam JavaScript:

// Welcome.jsx

export default Welcome;

Kemudian:

// App.jsx

import Welcome from "./Welcome";

9. Button Juga Dipisahkan

Sekarang kita lakukan hal yang sama untuk Button.

Struktur:

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

Button.jsx

function Button() {
  return <button>Click Me</button>;
}

export default Button;

App.jsx

import Welcome from "./Welcome";
import Button from "./Button";

function App() {
  return (
    <div>
      <h1>Codevolution React Course</h1>
      <Welcome />
      <Button />
    </div>
  );
}

export default App;

Sekarang App.jsx jauh lebih bersih.

10. Struktur Project Menjadi Lebih Rapi

Sebelumnya:

App.jsx
│
├── Welcome component
├── Button component
└── App component

Sekarang:

src/
│
├── App.jsx
├── Welcome.jsx
├── Button.jsx
└── main.jsx

Dan hubungan antar-file:

             App.jsx
            /       \
       import       import
          ↓           ↓
     Welcome.jsx   Button.jsx

Ini adalah awal dari modular architecture.

11. Kenapa Ini Lebih Bagus?

Bayangkan nanti Button punya 100 baris kode.

Misalnya:

function Button() {
  // logic
  // styling
  // event handling
  // accessibility
  // ...
  
  return <button>...</button>;
}

Kalau semua component ada di App.jsx, kita akan kesulitan mencari Button.

Tetapi kalau ada:

src/
└── Button.jsx

kita langsung tahu:

“Oh, kode Button ada di Button.jsx.”

Ini membuat kode:

• lebih rapi
• lebih mudah dicari
• lebih mudah diperbaiki
• lebih mudah dibaca
• lebih mudah digunakan ulang

12. Kemudian Transcript Membahas Arrow Function

Ada cara lain menulis component.

Sebelumnya:

function Welcome() {
  return <h2>Welcome Vishwas</h2>;
}

Kita bisa menulis:

const Welcome = () => {
  return <h2>Welcome Vishwas</h2>;
};

Ini disebut arrow function.

13. Membandingkan Keduanya

Function biasa

function Welcome() {
  return <h2>Welcome Vishwas</h2>;
}

Arrow function

const Welcome = () => {
  return <h2>Welcome Vishwas</h2>;
};

Keduanya dapat menjadi React component.

Jadi jangan berpikir:

“React component harus selalu dibuat dengan function.”

Tidak.

Keduanya valid.

14. Arrow Function Versi Singkat

Karena component hanya mengembalikan satu JSX expression, kita bahkan bisa menulis lebih pendek:

const Welcome = () => <h2>Welcome Vishwas</h2>;

Perhatikan kita menghilangkan:

{
  return ...
}

Karena arrow function dengan syntax ini:

() => sesuatu

secara otomatis me-return sesuatu.

Contoh JavaScript sederhana:

const add = (a, b) => a + b;

Sama seperti:

const add = (a, b) => {
  return a + b;
};

Begitu juga:

const Welcome = () => <h2>Hello</h2>;

sama konsepnya dengan:

const Welcome = () => {
  return <h2>Hello</h2>;
};

15. Pola yang Dipilih di Tutorial

Nah, bagian ini penting.

Transcript mengatakan bahwa sepanjang course, dia lebih memilih:

Named exports + arrow functions

Jadi bukan:

function Welcome() {
  return <h2>Welcome Vishwas</h2>;
}

export default Welcome;

tetapi:

export const Welcome = () => {
  return <h2>Welcome Vishwas</h2>;
};

atau bahkan:

export const Welcome = () => <h2>Welcome Vishwas</h2>;

16. Apa Itu Named Export?

Mari kita lihat:

export const Welcome = () => {
  return <h2>Welcome Vishwas</h2>;
};

Perhatikan:

export const Welcome

Artinya kita melakukan named export dengan nama:

Welcome

Kemudian ketika meng-import:

import { Welcome } from "./Welcome";

Perhatikan ada:

{ Welcome }

Ada curly braces {}.

17. Kenapa Named Export Menggunakan {}?

Ini adalah syntax JavaScript Modules.

Named export

export const Welcome = ...

Import:

import { Welcome } from "./Welcome";

Sedangkan:

Default export

export default Welcome;

Import:

import Welcome from "./Welcome";

Perhatikan perbedaannya:

DEFAULT

export default Welcome
       ↓
import Welcome from "./Welcome"


NAMED

export const Welcome = ...
       ↓
import { Welcome } from "./Welcome"

18. Perbedaan Default Export dan Named Export

Ini salah satu bagian terpenting dari transcript.

Default Export

Misalnya:

// Welcome.jsx

const Welcome = () => {
  return <h2>Welcome Vishwas</h2>;
};

export default Welcome;

Kita bisa import:

import Welcome from "./Welcome";

Tetapi yang menarik:

Kita bisa mengganti nama saat import.

Misalnya:

import Hello from "./Welcome";

Bahkan:

import AmazingComponent from "./Welcome";

Secara teknis tetap bisa.

Kemudian:

<AmazingComponent />

akan tetap bekerja.

19. Kenapa Bisa Diganti Namanya?

Karena yang diekspor adalah:

export default Welcome;

Kita mengatakan:

“Ini adalah default value dari file ini.”

Nama yang digunakan oleh file lain tidak harus sama.

Jadi:

import Welcome from "./Welcome";

dan:

import AmazingComponent from "./Welcome";

keduanya bisa mengambil default export yang sama.

20. Masalah Naming Confusion

Bayangkan project besar.

File:

Welcome.jsx

isinya:

export default Welcome;

Developer A menulis:

import Welcome from "./Welcome";

Developer B:

import Hello from "./Welcome";

Developer C:

import AmazingThing from "./Welcome";

Semuanya bisa bekerja.

Tetapi orang yang membaca kode bisa bingung:

“Ini sebenarnya component Welcome atau AmazingThing?”

Padahal semuanya berasal dari file yang sama.

21. Named Export Menghindari Masalah Ini

Dengan:

export const Welcome = () => {
  return <h2>Welcome Vishwas</h2>;
};

kita import:

import { Welcome } from "./Welcome";

Kita harus menggunakan nama Welcome.

Tidak bisa:

import { AmazingComponent } from "./Welcome";

karena tidak ada named export bernama AmazingComponent.

Yang tersedia adalah:

Welcome

Jadi namanya konsisten.

22. Contoh Lebih Jelas

Misalnya file:

Button.jsx

export const Button = () => {
  return <button>Click Me</button>;
};

Kemudian:

import { Button } from "./Button";

Kita menggunakan:

<Button />

Kita tidak bisa sembarangan:

import { AmazingButton } from "./Button";

karena AmazingButton tidak diekspor.

23. Default vs Named: Tabel Singkat

Contoh:

Default

export default Button;

import Button from "./Button";

Named

export const Button = () => {};

import { Button } from "./Button";

24. Named Export Bisa Lebih dari Satu

Ini juga kelebihan named export.

Misalnya:

export const Button = () => {
  return <button>Click</button>;
};

export const Input = () => {
  return <input />;
};

Kemudian:

import { Button, Input } from "./components";

Kita mengambil dua export sekaligus.

Sedangkan default export biasanya hanya ada satu default utama dalam satu file.

25. Kenapa Tutorial Memilih Named Export + Arrow Function?

Pola yang digunakan:

export const Welcome = () => {
  return <h2>Welcome Vishwas</h2>;
};

Kemudian:

import { Welcome } from "./Welcome";

Alasannya terutama:

1. Nama component konsisten

File:

Welcome.jsx

Component:

Welcome

Export:

Welcome

Import:

Welcome

Semuanya konsisten.

2. Lebih mudah debugging

Kalau error mengatakan:

Welcome is not defined

kita bisa lebih mudah mencari component Welcome.

Daripada ada:

import X from "./Welcome";

yang sebenarnya isinya component bernama Welcome.

3. Lebih mudah maintenance

Pada aplikasi besar, konsistensi nama sangat membantu.

Misalnya:

UserProfile.jsx → UserProfile
ProductCard.jsx → ProductCard
ShoppingCart.jsx → ShoppingCart
SearchBar.jsx → SearchBar

Semuanya mudah ditebak.

26. Tapi Apakah Default Export Salah?

Tidak.

Ini sangat penting.

Default export:

export default Welcome;

bukan berarti salah.

Named export:

export const Welcome = ...

juga bukan berarti selalu lebih benar.

Keduanya merupakan fitur resmi JavaScript Modules.

Transcript hanya mengatakan:

“Untuk course ini, saya lebih suka menggunakan named export.”

Di dunia React kamu akan menemukan keduanya.

Jadi sebagai programmer React, kamu sebaiknya memahami kedua syntax tersebut.

27. Gambaran Lengkap Project Kita

Setelah perubahan ini, project kira-kira menjadi:

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

Welcome.jsx

export const Welcome = () => {
  return <h2>Welcome Vishwas</h2>;
};

Button.jsx

export const Button = () => {
  return <button>Click Me</button>;
};

App.jsx

import { Welcome } from "./Welcome";
import { Button } from "./Button";

function App() {
  return (
    <div>
      <h1>Codevolution React Course</h1>

      <Welcome />

      <Button />
    </div>
  );
}

export default App;

Perhatikan sekarang App.jsx lebih fokus pada menyusun UI, bukan mendefinisikan semua component.

28. Cara Berpikir yang Bagus

Jangan melihatnya hanya sebagai:

“Saya memindahkan function ke file lain.”

Lebih baik lihat sebagai:

Component
   ↓
punya tanggung jawab sendiri
   ↓
diletakkan di file sendiri
   ↓
di-export
   ↓
bisa digunakan component lain
   ↓
di-import

Ini adalah konsep modular programming.

29. Analogi LEGO

Bayangkan membuat rumah dari LEGO.

Daripada membuat semuanya dalam satu blok besar:

[ SELURUH RUMAH ]

kita pecah:

       Rumah
         │
   ┌─────┼─────┐
   ↓     ↓     ↓
  Pintu  Atap  Jendela

Dalam React:

       App
        │
   ┌────┼─────┐
   ↓    ↓     ↓
Header Button Footer

Masing-masing component punya file sendiri:

Header.jsx
Button.jsx
Footer.jsx

Kemudian App.jsx menyusunnya:

<Header />
<Button />
<Footer />

Inilah component composition + modules.

30. Jangan Salah Paham: File Bukan Component

Ini juga penting untuk pemula.

File:

Welcome.jsx

bukan berarti otomatis menjadi component.

Yang menjadi component adalah:

export const Welcome = () => {
  return <h2>Welcome Vishwas</h2>;
};

File hanyalah tempat kita menyimpan kode.

Jadi:

Welcome.jsx
    │
    └── berisi component Welcome

Sama seperti:

Button.jsx
    │
    └── berisi component Button

31. Lalu Transcript Masuk ke JSX

Di bagian terakhir transcript muncul pertanyaan menarik:

“Kita menulis sesuatu yang terlihat seperti HTML di dalam JavaScript. Kok bisa?”

Contohnya:

function App() {
  return (
    <div>
      <h1>Codevolution React Course</h1>
      <Welcome />
      <Button />
    </div>
  );
}

Kalau kamu baru belajar JavaScript, mungkin kamu bertanya:

“Bukankah <div> dan <h1> itu HTML?”

Jawabannya:

Bukan HTML murni.

Itu adalah:

JSX

JSX = JavaScript XML

JSX adalah syntax yang memungkinkan kita menulis struktur UI yang mirip HTML di dalam JavaScript.

32. JSX Bukan HTML

Misalnya:

const element = <h1>Hello World</h1>;

Kelihatannya seperti HTML.

Tapi file-nya:

App.jsx

dan kode tersebut diproses menjadi JavaScript yang bisa dipahami oleh React.

Secara konsep sederhana:

JSX
 ↓
JavaScript transformation
 ↓
React elements
 ↓
DOM
 ↓
Browser

Jadi browser tidak secara langsung memahami JSX.

Vite + toolchain React akan memproses JSX terlebih dahulu.

33. Kenapa JSX Dibuat?

Tanpa JSX, kita harus menulis UI dengan syntax JavaScript yang lebih verbose.

Dengan JSX:

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

Kita bisa melihat dengan cepat:

“Component ini menghasilkan heading Hello World.”

JSX membuat kode UI lebih mudah dibaca.

34. JSX Membuat React Terasa Seperti HTML

Contoh:

function Profile() {
  return (
    <div>
      <h1>Vishwas</h1>
      <p>React Developer</p>
      <button>Follow</button>
    </div>
  );
}

Kita bisa langsung melihat struktur UI:

Profile
└── div
    ├── h1
    ├── p
    └── button

Itulah salah satu kekuatan JSX.

35. Tetapi JSX Bisa Berisi JavaScript

Ini yang membuat JSX powerful.

Misalnya:

const name = "Vishwas";

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

Hasilnya:

Hello Vishwas

Bagian:

{name}

adalah JavaScript expression.

Jadi JSX merupakan semacam jembatan antara:

JavaScript
+
UI markup

36. Gambaran Besar Semua yang Baru Dipelajari

Sekarang kita punya beberapa konsep yang saling berhubungan:

React
 │
 ├── Component
 │     │
 │     ├── Welcome
 │     └── Button
 │
 ├── JSX
 │     │
 │     └── Menulis UI dengan syntax mirip HTML
 │
 └── JavaScript Modules
       │
       ├── export
       └── import

Contoh akhirnya:

src/
│
├── App.jsx
│     │
│     ├── import { Welcome }
│     ├── import { Button }
│     │
│     └── App
│
├── Welcome.jsx
│     └── export const Welcome
│
└── Button.jsx
      └── export const Button

Hubungannya:

Welcome.jsx
    │
    │ export
    ▼
 Welcome
    │
    │ import
    ▼
  App.jsx
    │
    │ render
    ▼
 <Welcome />

dan:

Button.jsx
    │
    │ export
    ▼
  Button
    │
    │ import
    ▼
  App.jsx
    │
    │ render
    ▼
 <Button />

37. Cheat Sheet

Membuat component

export const Welcome = () => {
  return <h2>Hello</h2>;
};

Import component

import { Welcome } from "./Welcome";

Menggunakan component

<Welcome />

Default export

export default Welcome;

Import:

import Welcome from "./Welcome";

Named export

export const Welcome = () => {};

Import:

import { Welcome } from "./Welcome";

Path ./

"./Welcome"

artinya:

Cari Welcome dari folder saat ini.

38. Inti Pelajaran Ini

Kalau disederhanakan menjadi satu alur:

Awalnya
Semua component → App.jsx
        ↓
Project membesar
        ↓
Pisahkan component
        ↓
Welcome.jsx
Button.jsx
Header.jsx
Footer.jsx
        ↓
Component harus di-export
        ↓
Component di-import oleh file yang membutuhkan
        ↓
Kode menjadi modular dan mudah dirawat

Dan pola yang dipakai dalam tutorial:

// Welcome.jsx
export const Welcome = () => {
  return <h2>Welcome Vishwas</h2>;
};

// App.jsx
import { Welcome } from "./Welcome";

function App() {
  return (
    <div>
      <Welcome />
    </div>
  );
}

Kalimat paling penting untuk diingat:

export = membuat sesuatu dari sebuah file bisa digunakan file lain.

import = mengambil sesuatu dari file lain agar bisa digunakan di file sekarang.

Named export menggunakan {}, sedangkan default export tidak.

Memisahkan component ke file berbeda membuat project React lebih rapi, mudah dicari, dipelihara, dan digunakan kembali.

Dan transcript berikutnya akan masuk ke JSX, yaitu alasan kita bisa menulis sesuatu seperti <div>, <h1>, <Button /> langsung di dalam JavaScript.