Materi ini membahas salah satu konsep paling fundamental dalam React: Component.

Kalau sebelumnya kita belajar bahwa React digunakan untuk membuat UI, sekarang pertanyaannya:

“UI itu sebenarnya dibuat dari apa?”

Jawabannya:

Component.

Kalau kamu benar-benar memahami component, kamu sudah memahami salah satu fondasi utama cara berpikir React.

1. Apa itu Component?

Definisi sederhananya:

Component adalah bagian dari User Interface (UI) yang memiliki tampilan dan logikanya sendiri.

Contohnya sebuah website:

+--------------------------------------+
|              HEADER                  |
+--------------------------------------+
| SIDEBAR |       MAIN CONTENT         |
|         |                            |
|         |                            |
+---------+----------------------------+
|              FOOTER                  |
+--------------------------------------+

Kita bisa memecahnya menjadi:

Website
│
├── Header
├── Sidebar
├── Main
└── Footer

Masing-masing bagian bisa dibuat menjadi component.

2. Kenapa UI dipecah menjadi Component?

Bayangkan kamu ingin membuat rumah.

Kamu tidak membuat rumah sebagai satu benda raksasa:

🏠

Sebaliknya, rumah terdiri dari:

Rumah
│
├── Pintu
├── Jendela
├── Dinding
├── Atap
└── Lantai

Masing-masing bagian punya tugas.

Begitu juga dengan aplikasi React:

Application
│
├── Header
├── Navigation
├── ProductList
├── ProductCard
├── Button
└── Footer

Kita membuat bagian-bagian kecil tersebut, lalu menggabungkannya.

3. Component bisa kecil atau besar

Ini penting.

Component tidak harus selalu berupa bagian kecil.

Component bisa sangat kecil:

Button

atau:

SearchBar

atau bisa lebih besar:

Navbar

atau bahkan:

Dashboard

atau satu halaman:

ProductPage

Jadi jangan berpikir:

“Component harus berupa button atau card.”

Tidak.

Component bisa berupa bagian UI apa pun yang masuk akal untuk dipisahkan.

4. Root Component

Dalam aplikasi React, biasanya kita memiliki component utama yang menjadi titik awal UI.

Pada project kita, component tersebut biasanya bernama:

App

Misalnya:

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

App bisa dianggap sebagai root component.

Kemudian di dalam App, kita bisa memasukkan component lain.

App
│
├── Header
├── Main
└── Footer

Jadi App adalah component yang menampung component-component lain.

5. Component adalah JavaScript Function

Ini adalah konsep yang wajib diingat:

React component pada dasarnya adalah JavaScript function yang mengembalikan JSX/UI.

Contoh:

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

Kita bisa membaginya menjadi dua bagian:

function Welcome()
       ↓
JavaScript Function

dan:

return <h2>Welcome Vishwas</h2>;

yang menentukan:

Apa yang ingin ditampilkan di UI?

6. Mari bedah component tersebut

Perhatikan:

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

Bagian pertama:

function Welcome()

Ini adalah function JavaScript.

Bagian kedua:

{
   ...
}

Ini adalah function body.

Bagian ketiga:

return

Function mengembalikan sesuatu.

Bagian keempat:

<h2>Welcome Vishwas</h2>

Ini adalah JSX yang menggambarkan UI.

Jadi:

Component
   ↓
JavaScript Function
   ↓
return JSX
   ↓
UI

7. Contoh component paling sederhana

Kita bisa membuat:

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

Component tersebut menggambarkan:

Hello World

Component lain:

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

menggambarkan:

[ Click Me ]

8. Tetapi membuat function saja belum cukup

Ini bagian yang sering membingungkan pemula.

Misalnya kita membuat:

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

Component sudah dibuat.

Tetapi kalau tidak digunakan:

Welcome component
       ↓
tidak digunakan
       ↓
tidak muncul di browser

Sama seperti kita membuat resep makanan tetapi tidak pernah memasaknya.

9. Bagaimana menggunakan Component?

Di dalam App, kita bisa menulis:

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

Perhatikan:

<Welcome />

Ini adalah cara kita menggunakan component Welcome.

10. Kenapa bentuknya seperti HTML?

Karena React menggunakan JSX.

Kita bisa menulis:

<Welcome />

dan React memahami bahwa Welcome adalah component.

Ini berbeda dari HTML biasa.

Misalnya:

<h1>Hello</h1>

h1 adalah built-in HTML element.

Sedangkan:

<Welcome />

adalah custom React component.

11. Parent dan Child Component

Sekarang kita masuk ke istilah yang sangat sering digunakan dalam React.

Misalnya:

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

Strukturnya:

App
│
├── Welcome
└── Button

Maka:

App
 ↓
Parent

dan:

Welcome
 ↓
Child

serta:

Button
 ↓
Child

Jadi kita bisa mengatakan:

App adalah parent component dari Welcome dan Button.

12. Component tree

Kalau aplikasi semakin besar, strukturnya bisa menjadi seperti pohon.

Misalnya:

App
│
├── Header
│   ├── Logo
│   └── Navigation
│
├── Main
│   ├── ProductList
│   │   ├── ProductCard
│   │   ├── ProductCard
│   │   └── ProductCard
│   │
│   └── Sidebar
│
└── Footer

Ini disebut component tree.

Kamu akan sering melihat istilah ini dalam React.

13. “Components all the way down”

Materi menggunakan istilah:

“It is components all the way down.”

Maksudnya, sebuah component bisa memiliki component lain.

Misalnya:

App
 ↓
Dashboard
 ↓
Sidebar
 ↓
Menu
 ↓
MenuItem
 ↓
Button

Semua bagian tersebut bisa menjadi component.

Jadi kita tidak membuat satu file dengan:

2000 baris HTML

Kita bisa memecahnya:

App
 ├── Header
 ├── Sidebar
 ├── Content
 │    ├── Card
 │    ├── Card
 │    └── Card
 └── Footer

Ini membuat aplikasi lebih mudah dikelola.

14. Reusable Component

Sekarang kita masuk ke salah satu keuntungan terbesar component:

Component bisa digunakan berkali-kali.

Misalnya kita memiliki component:

function PokemonCard() {
  return (
    <div>
      <h2>Pikachu</h2>
      <p>Electric</p>
    </div>
  );
}

Kita bisa menggunakannya:

<PokemonCard />
<PokemonCard />
<PokemonCard />

Tapi saat ini semuanya menghasilkan data yang sama.

Kita ingin:

Pikachu
Charizard
Squirtle

Component yang sama:

PokemonCard
    ↓
Data berbeda
    ↓
┌───────────┐
│ Pikachu   │
└───────────┘

┌───────────┐
│ Charizard │
└───────────┘

┌───────────┐
│ Squirtle  │
└───────────┘

Nanti kita akan menggunakan props untuk melakukan ini.

15. Kenapa reusable component sangat penting?

Bayangkan kamu memiliki 100 product card.

Tanpa component:

Product HTML
Product HTML
Product HTML
Product HTML
...
100 kali

Kalau desain berubah?

Kamu harus mengubah banyak tempat.

Dengan component:

<ProductCard />

kita memiliki satu definisi:

function ProductCard() {
  // UI product
}

Kemudian digunakan berkali-kali.

Jika desain berubah, kita cukup memperbaiki component tersebut.

16. PascalCase

Materi juga menjelaskan bahwa nama component harus menggunakan:

PascalCase

Apa itu PascalCase?

Setiap kata diawali huruf kapital.

Contoh:

UserProfile
ProductCard
ShoppingCart
LoginForm
NavigationBar
PokemonCard

Bukan:

userprofile
productcard
shoppingcart

Dan bukan:

user_profile
product_card

17. PascalCase vs camelCase

Perhatikan perbedaannya:

PascalCase

UserProfile

Huruf pertama U kapital.

camelCase

userProfile

Huruf pertama u kecil.

snake_case

user_profile

Menggunakan underscore.

Untuk React component:

PascalCase

adalah konvensi yang digunakan.

18. Kenapa Component harus huruf kapital?

Ini bukan hanya soal style.

Huruf kapital membantu React membedakan:

HTML element
       vs
React component

Contohnya:

<button>Click</button>

React tahu:

Ini HTML element.

Sedangkan:

<Button />

React tahu:

Ini custom component.

19. Apa yang terjadi kalau menggunakan huruf kecil?

Misalnya kamu membuat:

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

Tetapi kemudian menulis:

<welcome />

React akan menganggap:

“welcome adalah HTML tag.”

Bukan component Welcome.

Karena itu:

<Welcome />

benar.

Sedangkan:

<welcome />

salah untuk custom component tersebut.

20. Kenapa React melakukan ini?

Karena React menggunakan konvensi sederhana:

lowercase
   ↓
HTML / built-in element

Uppercase
   ↓
Custom React component

Contoh:

<div />
<button />
<input />

adalah built-in elements.

Sedangkan:

<Header />
<Welcome />
<ProductCard />

adalah custom components.

21. Contoh lengkap dua component

Sekarang kita buat dua component:

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

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

Kemudian kita gunakan dalam App:

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

      <Welcome />

      <Button />
    </div>
  );
}

Hasilnya:

Codevolution React Course

Welcome Vishwas

[ Click Me ]

22. Perhatikan component tree-nya

Kode:

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

bisa kita gambarkan:

App
│
├── h1
│
├── Welcome
│
└── Button

Welcome dan Button adalah child dari App.

23. Component juga bisa memiliki component lain

Misalnya:

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

Kemudian:

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

Sekarang tree-nya:

App
│
└── Welcome
     │
     └── Button

Artinya:

App
 ↓
parent dari Welcome

Welcome
 ↓
parent dari Button

Button
 ↓
child dari Welcome

Ini sangat umum dalam aplikasi React.

24. Component bukan sekadar HTML

Definisi materi mengatakan:

Component adalah bagian UI yang memiliki logic dan appearance sendiri.

Ini penting.

Component tidak hanya mengembalikan HTML.

Nantinya component juga bisa memiliki logic.

Misalnya:

function Counter() {
  // logic

  return (
    <div>
      <button>+</button>
    </div>
  );
}

Nanti logic tersebut bisa mencakup:

State
Events
API calls
Conditional rendering
Data processing
Effects

Jadi component bisa dianggap sebagai:

Component
   │
   ├── Appearance
   │      ↓
   │     JSX
   │
   └── Logic
          ↓
      JavaScript

25. Contoh component yang memiliki logic

Misalnya nanti kita membuat counter:

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        +
      </button>
    </div>
  );
}

Component tersebut memiliki:

Appearance

<p>{count}</p>
<button>+</button>

Logic

setCount(count + 1)

Jadi component benar-benar menjadi unit UI + logic.

26. Kenapa pendekatan ini bagus?

Karena logic dan UI yang berkaitan bisa dikelompokkan.

Misalnya:

ProductCard
│
├── Product image
├── Product name
├── Product price
├── Add button
└── Product-related logic

Daripada logic tersebar di berbagai file.

Ini membantu aplikasi menjadi lebih terorganisir.

27. Component Composition

Ada istilah penting lainnya:

Composition

Composition berarti kita membuat UI dengan menggabungkan component-component kecil.

Misalnya:

App
│
├── Header
│   ├── Logo
│   └── Navigation
│
├── Main
│   ├── ProductList
│   │   ├── ProductCard
│   │   ├── ProductCard
│   │   └── ProductCard
│   │
│   └── Sidebar
│
└── Footer

Kita tidak membuat semuanya sekaligus.

Kita membuat:

Logo
Navigation
Header
ProductCard
ProductList
Sidebar
Footer
App

Kemudian menyusunnya.

Itulah composition.

28. Analogi LEGO

Ini mungkin analogi terbaik untuk React Component.

Bayangkan LEGO.

Kita punya:

🧱 Button
🧱 Card
🧱 Header
🧱 Footer

Kemudian:

Header
+
Main
+
Footer

menjadi:

🏠 Website

Jadi:

Component = LEGO block untuk UI.

Kita bisa membuat block kecil dan menyusunnya menjadi sesuatu yang lebih besar.

29. Component yang baik biasanya punya tanggung jawab jelas

Misalnya jangan membuat satu component:

EverythingComponent

yang menangani:

Header
Login
Product
Cart
Footer
Sidebar
Payment

Lebih baik dipecah:

Header
LoginForm
ProductCard
Cart
PaymentForm
Footer

Masing-masing memiliki tanggung jawab yang lebih jelas.

Ini membuat kode lebih mudah:

• dibaca
• diuji
• digunakan kembali
• diperbaiki
• dikembangkan

30. Tapi jangan terlalu banyak membuat component

Ada juga sisi lainnya.

Jangan berpikir:

“Semua HTML harus menjadi component.”

Misalnya:

function Paragraph() {
  return <p>Hello</p>;
}

Belum tentu kita membutuhkan component hanya untuk satu <p> sederhana.

Component sebaiknya dibuat ketika pemisahan tersebut masuk akal.

Contohnya:

ProductCard
LoginForm
Navbar
Sidebar
Comment
UserProfile

biasanya lebih masuk akal daripada membuat component untuk setiap <div>.

31. Masalah ketika semua Component berada dalam satu file

Pada awal belajar, kita mungkin memiliki:

App.jsx
│
├── App
├── Welcome
├── Button
├── Header
├── Footer
├── ProductCard
├── Sidebar
└── ...

Kalau component masih dua atau tiga, tidak masalah.

Tetapi kalau sudah puluhan:

App.jsx
↓
500 baris
↓
1000 baris
↓
2000 baris 😵

Akan sulit dikelola.

Karena itu component biasanya dipisahkan ke file masing-masing.

Misalnya:

src/
│
├── components/
│   ├── Header.jsx
│   ├── Footer.jsx
│   ├── Button.jsx
│   └── ProductCard.jsx
│
├── App.jsx
└── main.jsx

Kemudian kita menggunakan:

import Header from "./components/Header";

dan:

<Header />

Materi selanjutnya akan membahas export dan import component.

32. Alur berpikir saat membuat Component

Ketika membuat aplikasi React, biasakan berpikir seperti ini:

Langkah 1 — lihat UI

Misalnya:

+----------------------+
| Header               |
+----------------------+
| Product              |
|                      |
| [ Image ]            |
| Product Name         |
| $100                 |
| [Add to Cart]        |
+----------------------+
| Footer               |
+----------------------+

Langkah 2 — pecah menjadi bagian

App
├── Header
├── ProductCard
│   ├── Image
│   └── Button
└── Footer

Langkah 3 — buat component

Header
ProductCard
Image
Button
Footer

Langkah 4 — compose

App
├── Header
├── ProductCard
└── Footer

Inilah cara berpikir React.

33. Hubungan Component dengan Props

Materi Pokémon tadi sebenarnya sedang mempersiapkan kita untuk konsep berikutnya: props.

Misalnya kita punya:

<PokemonCard />

Kita ingin memberikan data:

<PokemonCard
  name="Pikachu"
  type="Electric"
/>

Kemudian:

<PokemonCard
  name="Charizard"
  type="Fire"
/>

Component-nya tetap:

PokemonCard

Tetapi datanya berbeda.

PokemonCard
     │
     ├── name
     └── type

Inilah salah satu kekuatan component:

Satu component dapat digunakan berkali-kali dengan data yang berbeda.

34. Ringkasan konsep Component

Sekarang kita rangkum.

Component adalah:

Bagian dari UI

yang:

memiliki
   ↓
appearance + logic

dan biasanya ditulis sebagai:

function ComponentName() {
  return <div>...</div>;
}

Component dapat:

├── digunakan kembali
├── menerima data
├── memiliki logic
├── memiliki styling
├── berada di dalam component lain
└── menggunakan component lain

35. Cheat sheet Component

🧠 Hal yang paling penting untuk diingat

Kalau kamu hanya mengingat 5 hal dari materi ini, ingat ini:

1. Component adalah bagian dari UI

Header
Button
Card
Sidebar
Footer

semuanya bisa menjadi component.

2. Component pada dasarnya adalah function

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

3. Component harus menggunakan PascalCase

<Welcome />
<ProductCard />
<UserProfile />

bukan:

<welcome />

4. Component bisa dimasukkan ke component lain

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

Sehingga:

App
├── Welcome
└── Button

5. React adalah “components all the way down”

App
│
├── Header
│   ├── Logo
│   └── Navigation
│
├── Main
│   ├── ProductList
│   │   ├── ProductCard
│   │   ├── ProductCard
│   │   └── ProductCard
│   │
│   └── Sidebar
│
└── Footer

Jadi cara berpikir utama React adalah: lihat UI → pecah menjadi component → buat component → gabungkan component → berikan data yang diperlukan.

Dan materi berikutnya tentang export dan import sebenarnya merupakan kelanjutan alami dari konsep ini: setelah component mulai banyak, kita perlu memisahkan component ke file masing-masing agar project tetap rapi.