React.js Fundamentals

Kuasai React.js — library UI paling populer di dunia.

Status Membaca:Belum Dibaca

Daftar Bab (3)

Uji Kuis Materi Ini

Bab 1 dari 3

Pengenalan React & JSX

Pengenalan React.js

React adalah library JavaScript untuk membangun UI yang dikembangkan oleh Meta. React menggunakan pendekatan component-based — UI dipecah jadi komponen-komponen kecil yang reusable.

Mengapa React?

Component reusable — tulis sekali, pakai berkali-kali

Virtual DOM — update UI super cepat

Ekosistem besar — ribuan library pendukung

Job market — skill paling dicari developer

JSX — JavaScript + HTML

JSX adalah sintaks extension yang memungkinkan kamu menulis HTML di dalam JavaScript.

// Komponen React paling sederhana
function Salam({ nama }) {
  return (
    <div className="card">
      <h1>Halo, {nama}!</h1>
      <p>Selamat datang di CodeBook.</p>
    </div>
  )
}

// Penggunaan
function App() {
  return <Salam nama="Budi" />
}

Rules JSX

// ✅ Harus ada satu root element
function Good() {
  return (
    <div>
      <h1>Judul</h1>
      <p>Paragraf</p>
    </div>
  )
}

// ✅ Atau pakai Fragment
function AlsoGood() {
  return (
    <>
      <h1>Judul</h1>
      <p>Paragraf</p>
    </>
  )
}

// ❌ Ini error — dua root element
function Bad() {
  return (
    <h1>Judul</h1>
    <p>Paragraf</p>
  )
}

Ekspresi di JSX

const nama = "CodeBook"
const xp = 1500
const isLogin = true

function Info() {
  return (
    <div>
      <h1>{nama}</h1>
      <p>XP: {xp * 2}</p>
      {isLogin && <span>✓ Login</span>}
      {isLogin ? <span>Online</span> : <span>Offline</span>}
    </div>
  )
}