Dấu ngoặc nhọn

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

JSX trở nên thú vị khi bạn kết hợp JavaScript. Dấu ngoặc nhọn { } mở một lối từ markup trở lại JavaScript:

const name = 'Ada';

return <p>Hello, {name}!</p>;

Mọi thứ bên trong dấu ngoặc nhọn đều được đánh giá như JavaScript, và kết quả xuất hiện trên trang: ở đây, đoạn văn hiển thị Hello, Ada!.

Nếu không có dấu ngoặc nhọn, JSX xem nội dung bạn nhập là văn bản thuần. <p>Hello, name!</p> sẽ hiển thị nguyên văn từ name, có lẽ không phải điều bạn muốn.

Đây là phần JSX được dùng nhiều nhất: định nghĩa dữ liệu dưới dạng biến, rồi chèn dữ liệu vào phần đánh dấu bằng { }.

Thử thách

Người mới

Thành phần khai báo const name = 'Ada' nhưng lời chào lại hiển thị từ name theo nghĩa đen.

Sửa đoạn văn để dùng biến (variable): nội dung cần hiển thị là Hello, Ada!.
Đừng thay đổi biế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>