JSX không phải HTML

Thuộc phần Kiến thức cơ bản trong hành trình React của Coddy. Bài học 4 trên 42.

JSX trông giống HTML, nhưng nó nằm bên trong JavaScript, nên có một vài điểm khác biệt nhỏ mà bạn sẽ thường xuyên gặp:

1. className thay vì class. class là từ dành riêng trong JavaScript, vì vậy JSX đổi tên thuộc tính này:

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

2. Mọi thẻ đều phải đóng. HTML chấp nhận <br> và <input> không có thẻ đóng, còn JSX thì không. Thẻ tự đóng kết thúc bằng />:

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

3. Thuộc tính camelCase. Thuộc tính (attribute) gồm nhiều từ sẽ chuyển thành camelCase: onclick → onClick, tabindex → tabIndex. Bạn sẽ dùng onClick rất nhiều khi học đến sự kiện.

Thử thách

Người mới

Đoạn văn bên dưới cần có một lớp CSS, được thêm theo cách của JSX.

Thêm lớp CSS notice cho đoạn văn (hãy nhớ: JSX không dùng tên thuộc tính class).
Giữ nguyên id và nội dung văn bản của đoạn văn.

Tự làm thử

<!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>