Mục tiêu của React là render HTML trong một trang web theo nhiều cách.
React render HTML cho trang web bằng cách sử dụng một hàm có tên là createRoot() và phương thức render() của nó.
Hàm createRoot
Hàm createRoot() nhận một đối số, đó là một phần tử HTML.
Mục đích của hàm này là để định nghĩa phần tử HTML mà ở đó một React component sẽ được hiển thị.
Phương thức render
Phương thức render() sau đó được gọi để định nghĩa React component sẽ được render.
Nhưng render ở đâu?
Có một thư mục khác trong thư mục gốc của dự án React, có tên là "public". Trong thư mục này, có một tập tin index.html.
Bạn sẽ nhận thấy một phần tử <div> duy nhất trong phần body của file này. Đây là nơi mà ứng dụng React của chúng ta sẽ được render.
Ví dụ sau sẽ hiển thị một đoạn văn bản ở bên trong một phần tử với id là "root":
Kết quả sẽ được hiển thị trong phần tử <div id="root">:
Lưu ý rằng id của phần tử không nhất thiết phải là "root", nhưng đây là quy ước chuẩn.
HTML Code
HTML code trong tutorial này sử dụng JSX, nó cho phép chúng ta viết các thẻ HTML ở bên trong JavaScript code:
Đừng lo lắng nếu như cú pháp không quen, chúng ta sẽ tìm hiểu thêm về JSX trong chương tiếp theo.
Ví dụ sau sẽ tạo ra một biến chứa HTML code và hiển thị nó trên "root" node:
Root Node
Root node là phần tử HTML mà ở đó chúng ta muốn hiển thị kết quả.
Nó giống như một container để nội dung được quản lý bởi React.
Nó không nhất thiết phải là một phần tử <div> và nó không nhất thiết phải có id='root':
Ví dụ: root node có thể được gọi là bất cứ thứ gì mà chúng ta thích:
Hiển thị kết quả trong phần tử <header id="sandy">:
Không có nhận xét nào:
Đăng nhận xét