Tujuan Pembelajaran

Memahami konsep React component
Bisa menggunakan props dan state

Analogi

Diagram


      React Component = LEGO Block

[App] = [Header] + [Sidebar] + [Main] + [Footer]
         (komponen reusable)

React dibangun dari komponen reusable yang independen

Penjelasan Konsep

React

React adalah library JavaScript untuk membangun user interface berbasis komponen. Komponen adalah fungsi JavaScript yang return JSX — syntax yang mirip HTML tapi berjalan di JavaScript.

Tiga Konsep Utama

Component — Fungsi yang menerima props dan return JSX. Reusable dan composable.
Props — Data yang dikirim parent ke child. Read-only, tidak boleh dimodifikasi child.
State — Data internal component yang bisa berubah. Perubahan state memicu re-render.

JSX Rules

Return single parent element (gunakan fragment <>…</> jika perlu).
Class menjadi className, for menjadi htmlFor.
JavaScript expression pakai curly braces { }.
Semua tag harus ditutup (termasuk self-closing seperti <img />).

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami konsep React component., dan bisa menggunakan props dan state. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca React Fundamentals, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

React dibangun dari komponen reusable yang independen. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Component = fungsi dengan props. useState = hook untuk state lokal.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

// FUNCTIONAL COMPONENT
function Welcome({ name, age }) {
  return (
    <div className="card">
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
}

// COMPONENT DENGAN STATE
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// COMPOSITION
function App() {
  return (
    <div>
      <Welcome name="Alice" age={25} />
      <Welcome name="Bob" age={30} />
      <Counter />
    </div>
  );
}

Penjelasan Kode

Component = fungsi dengan props. useState = hook untuk state lokal.

Prompt AI

Jelaskan bedanya props dan state di React.

Pertanyaan Reflektif

Buat aplikasi counter dengan React. Tambahkan increment dan decrement.