Membuat Komponen Pertama

Membuat Komponen React Pertama

Komponen adalah blok bangunan dasar dari setiap aplikasi React. Setiap komponen adalah sebuah fungsi JavaScript yang mengembalikan JSX — sintaks yang mirip HTML tapi sebenarnya adalah JavaScript.

Komponen Fungsi (Function Component)

Cara paling modern dan direkomendasikan untuk membuat komponen adalah menggunakan fungsi:

function Greeting({ name }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Selamat datang di aplikasi kami.</p>
    </div>
  );
}

export default Greeting;

Aturan JSX

• Setiap komponen harus mengembalikan satu elemen root (gunakan <div> atau <> Fragment)
• Atribut HTML menggunakan camelCase: className bukan class, onClick bukan onclick
• Ekspresi JavaScript di dalam JSX ditulis dalam kurung kurawal: {variabel}
• Tag yang tidak punya children harus self-closing: <img />, <input />

Menggunakan Komponen

Setelah didefinisikan, komponen dipakai seperti tag HTML:

function App() {
  return (
    <div>
      <Greeting name="Khansa" />
      <Greeting name="Budi" />
    </div>
  );
}