2.2. React hiển thị lên trình duyệt thế nào ?

Một khái niệm thường được sử dụng để mô tả việc hiển thị lên giao diện người dùng là "render". Vậy React.js render HTML lên trình duyệt như thế nào ?

Nói nôm na, render là việc hiển thị nội dung lên trình duyệt. Nội dung có thể được viết từ các ngôn ngữ khác nhau. Tuy nhiên kết quả cuối cùng là hiển thị nội dung đó trên trình duyệt cho người dùng sử dụng.

Với React.js thì nội dung layout bạn viết không phải nằm ở trang HTML, mà được viết bên trong file Javascript, file HTML chỉ là cầu nối giúp nội dung Javascript "liên kết" với trình duyệt.

Trước tiên ta xét file index.html sau đây để hiểu nguyên lý hoạt động của nó

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, React!</h1>,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

Chạy file này trên trình duyệt, ta thu được kết quả như sau:

Qua ví dụ trên, ta thấy nội dung <h1>Hello, React!</h1> được tạo từ code Javascript, và được truyền vào file HTML thông qua id="root", nội dung này sẽ được hiển thị ra trình duyệt. Đây là một hình thức render.

Đó là một ví dụ đơn giản, nhưng thực tế quá trình làm việc của React phức tạp hơn một chút, phần lớn thao tác xử lý đều nằm ở file Javascript.

Sau đây, chúng ta cùng xét một ví dụ phức tạp hơn để hiểu rõ hơn về chúng.

Trong ví dụ này, ta xét 3 file với nội dung như sau:

/puclic/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Để ý ta sẽ thấy, file index.html không chứa bất kỳ nội dung nào hiển thị trên trình duyệt. Chỉ chứa một thẻ div có id là root.

/src/App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello, React!.</p>
      </header>
    </div>
  );
}

export default App;

Ta thấy đoạn code trong hàm return() chính là nội dung được hiển thị ngoài trình duyệt.
File này liên kết với /puclic/index.html thông qua /src/index.js:

/src/index.js


import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Import thư viện React và ReactDOM: import React from 'react'; import ReactDOM from 'react-dom/client';
import './index.css'; import nội dung file index.css
import App from './App'; import nội dung file App.js
ReactDOM.createRoot(document.getElementById('root')) tạo và render nội dung function App tới id="root"

Nội dung trên có nghĩa là file /src/index.js lấy nội dung từ function App của file /src/App.js render ra nội dung trả về id="root" của file /public/index.html, sau đó hiển thị nội dung này ra trình duyệt.

Previous2.1. Cấu trúc dự án Next2.3. JSX là gì ?

Last updated 8 months ago

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, React!</h1>, document.getElementById('root') ); </script> </body> </html>

import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p>Hello, React!.</p> </header> </div> ); } export default App;

import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();