Component đầu tiên của bạ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 2 trên 42.

Đã đến lúc viết component đầu tiên của bạn. Hãy xem App.jsx. Đây là một hàm (function) trả về JSX:

export default function App() {
    return (
        <div>

        </div>
    );
}

Hiện tại, nó trả về một <div> trống nên phần xem trước để trống. Bất cứ JSX nào bạn đặt bên trong cũng sẽ được hiển thị (tiêu đề, đoạn văn, nút, bất cứ thứ gì):

<h1 id="title">Hello, React!</h1>

Hãy chú ý đến thuộc tính id: nó hoạt động giống như trong HTML, và các bài kiểm tra của mình dùng id để tìm các phần tử của bạn. Hai tệp còn lại là phần nền tảng của ứng dụng: index.html chứa ứng dụng, còn main.jsx gắn App vào trang. Bạn không thể chỉnh sửa chúng. Bạn sẽ làm việc trong App.jsx.

Thử thách

Người mới

Hãy để ứng dụng chào thế giới.

Bên trong <div> trong App.jsx, hãy thêm một <h1> có id="title".
Văn bản bên trong phải chính xác là Hello, React!

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>