React Render HTML
Mục tiêu của React theo nhiều cách là hiển thị HTML trong một trang web.
React hiển thị HTML cho trang web bằng cách sử dụng một hàm được gọi là
ReactDOM.render().
Chức năng kết xuất
Hàm ReactDOM.render()nhận hai đối số, mã HTML và một phần tử HTML.
Mục đích của hàm là hiển thị mã HTML được chỉ định bên trong phần tử HTML được chỉ định.
Nhưng kết xuất ở đâu?
Có một thư mục khác trong thư mục gốc của dự án React của bạn, có tên là "công khai". Trong thư mục này, có một index.htmltệp.
Bạn sẽ nhận thấy một tệp duy nhất <div>
trong phần nội dung của tệp này. Đây là nơi ứng dụng React của chúng tôi sẽ được hiển thị.
Thí dụ
Hiển thị một đoạn bên trong một phần tử có id là "root":
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));Kết quả được hiển thị trong <div id="root">phần tử:
<body>
<div id="root"></div>
</body>
Lưu ý rằng id phần tử không nhất thiết phải được gọi là "root", nhưng đây là quy ước tiêu chuẩn.
Được chứng nhận!
$ 95 GHI DANH
Mã HTML
Mã HTML trong hướng dẫn này sử dụng JSX cho phép bạn viết các thẻ HTML bên trong mã JavaScript:
Đừng lo lắng nếu cú pháp không quen thuộc, bạn sẽ tìm hiểu thêm về JSX trong chương tiếp theo.
Thí dụ
Tạo một biến có chứa mã HTML và hiển thị nó trong nút "gốc":
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
ReactDOM.render(myelement, document.getElementById('root'));
Nút gốc
Nút gốc là phần tử HTML mà bạn muốn hiển thị kết quả.
Nó giống như một vùng chứa nội dung do React quản lý.
Nó KHÔNG phải là một <div>phần tử và nó KHÔNG cần phải có id='root':
Thí dụ
Nút gốc có thể được gọi là bất cứ thứ gì bạn thích:
<body>
<header id="sandy"></header>
</body>
Hiển thị kết quả trong <header id="sandy">phần tử:
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));