Fragment, ClassName, dan Gaya JSX

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Fragment di JSX

Saat membuat komponen di React, kita sering kali perlu mengembalikan lebih dari satu elemen. Nah, masalahnya JSX hanya bisa mengembalikan satu elemen pembungkus! Kalau kita tidak ingin membungkusnya dengan <div>, kita bisa menggunakan Fragment.

Contoh Tanpa Fragment (Masalah!)

return (
  <div>
    <h1>Halo!</h1>
    <p>Selamat datang di React.</p>
  </div>
);

Kode di atas akan menghasilkan tag <div> tambahan yang mungkin tidak kita inginkan.

Contoh Dengan Fragment (Solusi!)

return (
  <>
    <h1>Halo!</h1>
    <p>Selamat datang di React.</p>
  </>
);

Fragment (<>...</>) tidak menambahkan elemen ekstra di dalam DOM, jadi lebih bersih dan efisien!

2. ClassName di JSX

Di HTML biasa, kita menggunakan class untuk menambahkan gaya ke elemen. Tapi di JSX, kita tidak bisa menggunakan class karena class adalah kata kunci di JavaScript.

HTML Biasa

<h1 class="judul">Halo!</h1>

JSX (Menggunakan className)

<h1 className="judul">Halo!</h1>

Ingat! Kalau kamu pakai class di JSX, React akan protes dan memberi error!

3. Gaya di JSX (Inline Styling)

React memungkinkan kita untuk menerapkan gaya langsung menggunakan inline styling, tapi dengan sedikit perbedaan dari CSS biasa.

Perbedaan Styling di JSX:

1. Properti CSS ditulis dalam format camelCase
   • background-color menjadi backgroundColor
   • font-size menjadi fontSize
2. Nilai properti harus dalam bentuk string atau angka
   • Jika dalam satuan px, bisa langsung ditulis angka (tanpa string).

Contoh Inline Style di JSX

const gayaJudul = {
  color: "blue",
  fontSize: 24,
  textAlign: "center"
};

return <h1 style={gayaJudul}>Halo, React!</h1>;

Kita juga bisa langsung menulis objek gaya di dalam elemen:

return <h1 style={{ color: "red", fontSize: "20px" }}>Halo!</h1>;

Kesimpulan

• Fragment (<>...</>) digunakan untuk menghindari <div> yang tidak perlu.
• className digunakan di JSX sebagai pengganti class di HTML biasa.
• Gaya JSX menggunakan objek JavaScript dengan properti dalam format camelCase.

Dengan memahami tiga konsep ini, kode React-mu akan lebih rapi dan efisien!