Như chúng ta đã thấy việc khởi tạo một dự án ReactJS tương đối nhiều bước và cũng có những sự phức tạp nhất định khi phải cài một loạt công cụ mà chưa chắc chúng ta đã hiểu hết. Trong bài này Dũng sẽ cùng các bạn đi tìm hiểu một chút về bản chất của một dự án ReactJS mà chúng ta vừa khởi tạo nhé.

Cuối cùng vẫn là HTML, CSS, Javascript

Một trình duyệt có thể hiển thị một trang web nếu có các mã html mà không cần phải có css hay javascript. Tuy nhiên việc có thêm css sẽ giúp trang web trông đẹp hơn và việc có các mã javascript sẽ giúp chúng ta tương tác được với các thành phần giao diện của trang web.
Như vậy bạn sẽ đặt ra câu hỏi là làm thế nào mà một tập tin hello-world/index.html với mã nguồn như sau lại có thể hiển thị ra một trang web tương đối thú vị khi chạy câu lệnh yarn dev?

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Mặc dù mã nguồn và đuôi tập tin là html, nhưng trên thực tế hello-world/index.htm là một tập tin mẫu (template). Khi chúng ta sử dụng yarn dev thì máy chủ vite sẽ hỗ trợ việc chuyển đổi từ tập tin mẫu sang html.
Để thấy được chính xác nội dung html bạn hãy chạy câu lệnh: yarn build. Sau đó bạn sẽ thấy một thư mục có tên dist với các tập tin như sau:

Bạn có thể mở tập tin dist/index.html và sẽ thấy mã nguồn như sau:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <script type="module" crossorigin src="/assets/index-DONsvf3q.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-DiwrgTda.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Bạn có thể thấy rằng đoạn mã đã không còn nữa, cuối cùng chúng ta chỉ còn các tập tin html, css, hay ảnh được đưa vào nội dung HTML mà thôi.

Tại sao lại phải chạy với một máy chủ trên máy local?

Thực ra thì không nhất thiết bạn phải khởi chạy một máy chủ thì mới có thể mở được ra một trang web trên một trình duyệt. Tuy nhiên như ở trên chúng ta đã nói thì trình duyệt không hiểu được các tập tin jsx của ReactJS nên chúng ta cần một máy chủ có tích hợp việc chuyển đổi từ các mã nguồn mẫu sang html, css, javascript trong runtime sau đó trả về cho trình duyệt thì nó mới hiểu và hiện thị ra trang web được.
Ngoài ra ngay cả khi bạn build ra rồi và bạn muốn chạy ở dạng local file cũng không được, bạn sẽ gặp lỗi CORS như sau:

Nguyên nhân là do kiểu import javascript đang là module:

<script type="module" crossorigin src="/assets/index-DONsvf3q.js"></script>

Và kiểu này cần kiểm tra CORS để bảo mật, bạn có thể tham khảo thêm tại đây.

Tổng kết

Như vậy chúng ta đã cùng nhau tìm hiểu một chút về bản chất rằng các tập tin trong dự án ReactJS đều là các tập tin ở dạng template và cuối cùng sẽ được biên dịch sang HTML, CSS và Javascript.

Cám ơn bạn đã quan tâm đến bài viết|video này. Để nhận được thêm các kiến thức bổ ích bạn có thể:

  1. Đọc các bài viết của TechMaster trên facebook: https://www.facebook.com/techmastervn
  2. Xem các video của TechMaster qua Youtube: https://www.youtube.com/@TechMasterVietnam nếu bạn thấy video/bài viết hay bạn có thể theo dõi kênh của TechMaster để nhận được thông báo về các video mới nhất nhé.
  3. Chat với techmaster qua Discord: https://discord.gg/yQjRTFXb7a