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?

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>
  )
}