JSX Bukan HTML

Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 4 dari 42.

JSX terlihat seperti HTML, tetapi berada di dalam JavaScript, dan itu menimbulkan beberapa perbedaan kecil yang akan sering kamu temui:

1. className, bukan class. class adalah kata yang dicadangkan dalam JavaScript, jadi JSX mengganti nama atribut ini:

<p className="warning">Careful!</p>

2. Setiap tag harus ditutup. HTML membolehkan <br> dan <input> tidak ditutup, JSX tidak. Tag yang menutup dirinya sendiri diakhiri dengan />:

<input id="name" />
<br />

3. Atribut camelCase. Atribut yang terdiri dari beberapa kata menjadi camelCase: onclick → onClick, tabindex → tabIndex. Kamu akan sering menggunakan onClick saat kita membahas event.

Tantangan

Pemula

Paragraf di bawah ini memerlukan class CSS, yang ditambahkan dengan cara JSX.

Beri paragraf tersebut class CSS notice (ingat: JSX tidak menggunakan nama atribut class).
Biarkan id dan teksnya tetap sama.

Coba sendiri

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>