B. JSX

Perhatikan React Component di bawah

app/page.tsx

export default function Home() {
  return (
    <main>
      <h1>Hello World</h1>
    </main>
  )
}

Pada kode di atas kita melihat kalau return dari React Componenet adalah element HTM. Namun sebenarnya ini bukanlah element HTML, namun ini adalah JSX. Lalu apa kenapa bisa sama seperti HTML? Untuk menjawab hal tersebut mari kita pelajari mulai dari apa itu JSX.

1. Apa itu JSX?

JSX merupakan singkatan dari JavaScript XML. JSX memungkinkan penulisan HTML di dalam file JavaScript/React. Namun sebenarnya JSX bukanlah HTML murni, malainkan kode JavaScript yang dibuat mirip dengan HTML.

Penulisan JSX memiliki aturan yang berbeda dengan HTML biasa. Adapun aturan dalam penulisan JSX sebagai berikut.

Harus mempunyai satu element parent, elemet parent bisa <div> ... </div>, <section>...</section> <React.Fragment></React.Fragment>.
Setiap Element yang memilki tag pembuka dan tag penutup harus berpasangan misal :<p> ... </p>, <h1>...</h1>.
Element yang tidak memilki tag pembuka dan tag penutup ditulis dengan / dibelakang nama element, seperti <input/> , <br/> , <img/>
Element HTML tidak boleh dibuat dengan Huruf Kapital seperti <H1></H1>, <Div></Div>.
Huruf Kapital pada JSX digunakan memanggil Komponen.
Property class pada ditulis dengan nama className
property pada tag ditulis dengan camelCase seperti onClick, placeholder , name, className dan lain-lain.

2. Contoh Salah Penulisan JSX

Tidak memilik element root

const Home = () =>  {
  return (
    <main>
      <h1>Hello World</h1>
    </main>
    <div>
      <h1>Hello World</h1>
    </div>
  )
}

export default Home

mengggunakan huruf kapital pada tag HTML

const Home = () =>  {
  return (
    <main>
      <H1>Hello World</H1>
    </main>

  )
}

export default Home