6. React JS kết xuất ra HTML

Trong lập trình React JS, quá trình chuyển đổi mã nguồn React thành mã HTML được gọi là “kết xuất” (rendering). Khi bạn viết mã React, bạn sẽ tạo các thành phần (components) bằng cách sử dụng JSX và sau đó sử dụng hàm ReactDOM.render() để kết xuất chúng thành mã HTML thực tế để hiển thị trên trình duyệt.

Dưới đây là một ví dụ đơn giản về cách kết xuất một thành phần React thành mã HTML:

jsx

import React from 'react';
import ReactDOM from 'react-dom';

// Định nghĩa một thành phần đơn giản
const MyComponent = () => {
  return <h1>Hello, React!</h1>;
};

// Kết xuất thành phần vào thẻ có id "root" trong HTML
ReactDOM.render(<MyComponent />, document.getElementById('root'));

Trong ví dụ này:

• Chúng ta đã import React và ReactDOM từ các thư viện tương ứng.
• Được định nghĩa một thành phần đơn giản tên là MyComponent sử dụng hàm arrow.
• Trong JSX, chúng ta trả về một thẻ <h1> với nội dung “Hello, React!” trong thành phần MyComponent.
• Hàm ReactDOM.render() được sử dụng để kết xuất thành phần MyComponent vào thẻ có id “root” trong mã HTML thực tế.

Khi bạn chạy mã trên, React sẽ kết xuất thành phần MyComponent thành một thẻ <h1> chứa nội dung “Hello, React!” và đặt nó vào thẻ có id “root” trong mã HTML. Kết quả là bạn sẽ thấy dòng “Hello, React!” hiển thị trên trình duyệt của mình.