Ch&agrave;o mừng bạn đến với Kh&oacute;a học ReactJS từ cơ bản đến n&acirc;ng cao tại TEK4VN!
Kh&oacute;a học n&agrave;y sẽ trang bị cho bạn mọi kiến thức cần biết để l&agrave;m việc với React.
C&aacute;c b&agrave;i học được thiết kế để cung cấp những th&ocirc;ng tin ngắn gọn m&agrave; bạn sẽ &aacute;p dụng trực tiếp trong c&aacute;c b&agrave;i tập.
Bạn sẽ học c&aacute;ch x&acirc;y dựng giao diện cho website thương mại điện tử sử dụng cổng thanh to&aacute;n Stripe.
Bạn sẽ học tất cả c&aacute;c kh&aacute;i niệm quan trọng. Ch&uacute;ng ta sẽ bắt đầu với một số b&agrave;i &ocirc;n tập nhanh về JavaScript, sau đ&oacute; l&agrave; những kh&aacute;i niệm cơ bản của React, tiếp theo sẽ đi s&acirc;u v&agrave;o c&aacute;c kh&aacute;i niệm React n&acirc;ng cao
Trước khi bắt đầu kh&oacute;a học, h&atilde;y đảm bảo bạn đ&atilde; nắm chắc kiến thức về:
<ul>
<li style="text-align: justify;" aria-level="1"><a href="https://tek4.vn/khoa-hoc/lap-trinh-giao-dien-voi-html-css" target="_blank" rel="noopener">HTML/CSS</a></li>
<li style="text-align: justify;" aria-level="1"><a href="https://tek4.vn/khoa-hoc/lap-trinh-javascript-co-ban-den-nang-cao" target="_blank" rel="noopener">JavaScript</a> (Kh&oacute;a JavaScript TEK4VN đang trong qu&aacute; tr&igrave;nh ho&agrave;n thiện...)</li>
</ul>

ReactJS từ cơ bản đến nâng cao

Giả sử bạn c&oacute; component <code>&lt;Admin /&gt;</code> được xuất từ file <code>Admin.js</code> cục bộ chỉ được hiển thị khi người đăng nhập l&agrave; quản trị vi&ecirc;n:
<pre class="language-js" data-content="import%20%7BcreateRoot%7D%20from%20%22react-dom%2Fclient%22%3B%0Aimport%20Admin%20from%20%22.%2FAdmin.js%22%3B%0A%0Afunction%20User(props)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20(%3C%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cp%3EUser%20details%20show%20up%20here%3C%2Fp%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7Bprops.isAdmin%20%26%26%20%3CAdmin%20%2F%3E%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2F%3E)%3B%0A%7D%0A%0A%2F%2F%20Sample%20usage%0A%2F%2F%20%3CUser%20isAdmin%3D%7Btrue%7D%20%2F%3E%20or%20%3CUser%20isAdmin%3D%7Bfalse%7D%20%2F%3E" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {createRoot} from "react-dom/client";
import Admin from "./Admin.js";

function User(props) {
 return (&lt;&gt;
 &lt;p&gt;User details show up here&lt;/p&gt;
 {props.isAdmin &amp;&amp; &lt;Admin /&gt;}
 &lt;/&gt;);
}

// Sample usage
// &lt;User isAdmin={true} /&gt; or &lt;User isAdmin={false} /&gt;</code></pre>
Để &yacute; rằng <code>&lt;p&gt;User details show up here&lt;/p&gt;</code> lu&ocirc;n được hiển thị. Tuy nhi&ecirc;n, chỉ khi <code>props.isAdmin</code> c&oacute; gi&aacute; trị <code>true</code> th&igrave; component <code>&lt;Admin /&gt;</code> mới được hiển thị.
Giả sử component <code>&lt;Admin /&gt;</code> l&agrave; một component rất lớn (tải nhiều thư viện) v&agrave; chỉ được sử dụng bởi một v&agrave;i người d&ugrave;ng, việc lazy load component n&agrave;y (chỉ tải khi cần) l&agrave; điều cần thiết.
Điều n&agrave;y sẽ gi&uacute;p cải thiện hiệu suất ứng dụng v&igrave; hầu hết người d&ugrave;ng kh&ocirc;ng cần tải xuống to&agrave;n bộ code JavaScript của component <code>&lt;Admin /&gt;</code> (v&agrave; c&aacute;c phụ thuộc của n&oacute;).
Việc n&agrave;y c&oacute; thể được thực hiện trong 3 bước:
<h3 style="text-align: justify;">Bước 1: Chuyển đổi th&ecirc;m v&agrave;o tĩnh th&agrave;nh th&ecirc;m v&agrave;o động với React.lazy</h3>
Khi bạn sử dụng th&ecirc;m v&agrave;o tĩnh cho component <code>&lt;Admin /&gt;</code>, code của component đ&oacute; sẽ nằm trong trong g&oacute;i ch&iacute;nh của ứng dụng, như đ&atilde; được giải th&iacute;ch trong b&agrave;i học trước đ&oacute;. V&igrave; vậy, ch&uacute;ng ta cần thay đổi lệnh import sau:
<pre class="language-js" data-content="import%20Admin%20from%20%22.%2FAdmin.js%22%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import Admin from "./Admin.js";</code></pre>
th&agrave;nh:
<pre class="language-js" data-content="const%20Admin%20%3D%20React.lazy(function()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20import(%22.%2FAdmin.js%22)%3B%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const Admin = React.lazy(function() {
 return import("./Admin.js");
});</code></pre>
Th&ecirc;m v&agrave;o tĩnh b&acirc;y giờ trở th&agrave;nh th&ecirc;m v&agrave;o động: <code>import("./Admin.js")</code>.
Th&ecirc;m v&agrave;o động trả về một promise. <code>React.lazy</code> l&agrave; một h&agrave;m do React cung cấp (đừng qu&ecirc;n th&ecirc;m <code>React</code> v&agrave;o file JavaScript, th&ocirc;ng thường n&oacute; đ&atilde; được th&ecirc;m sẵn v&agrave;o dự &aacute;n). H&agrave;m n&agrave;y kiểm so&aacute;t khi n&agrave;o cần th&ecirc;m component. V&igrave; vậy, mặc d&ugrave; bạn thấy th&ecirc;m v&agrave;o động, React sẽ kh&ocirc;ng th&ecirc;m component ngay lập tức.
V&agrave; cuối c&ugrave;ng, ch&uacute;ng ta g&aacute;n kết quả của <code>React.lazy</code> cho một biến được gọi l&agrave; <code>Admin</code>.
Khi sử dụng <code>React.lazy</code>, bạn cần truyền một định nghĩa h&agrave;m, khi được gọi, h&agrave;m sẽ trả về promise của <code>import()</code>. V&igrave; vậy, đừng qu&ecirc;n từ kh&oacute;a <code>return</code>. Điều n&agrave;y rất quan trọng.
Hoặc bạn c&oacute; thể viết code sử dụng h&agrave;m mũi t&ecirc;n với trả về ngầm định. Sau đ&oacute;, bạn c&oacute; thể loại bỏ từ kh&oacute;a <code>return</code> v&igrave; JavaScript sẽ ngầm định trả về gi&aacute; trị được t&iacute;nh to&aacute;n từ th&acirc;n h&agrave;m:
<pre class="language-js" data-content="const%20Admin%20%3D%20React.lazy(()%20%3D%3E%20import(%22.%2FAdmin.js%22))%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const Admin = React.lazy(() =&gt; import("./Admin.js"));</code></pre>
<h3 style="text-align: justify;">Bước 2: Đ&oacute;ng g&oacute;i bằng Suspense</h3>
Sau khi đ&atilde; chuyển đổi lệnh import th&agrave;nh cuộc gọi <code>React.lazy</code> với th&ecirc;m v&agrave;o động, ch&uacute;ng ta phải đ&oacute;ng g&oacute;i component <code>&lt;Admin /&gt;</code> với component <code>&lt;Suspense /&gt;</code> của React.
Component <code>&lt;Suspense /&gt;</code> đ&oacute;ng g&oacute;i c&aacute;c component được lazy load v&agrave; cho ph&eacute;p bạn hiển thị nội dung trung gian (nội dung đang tải) cho đến khi component được tải.
H&atilde;y bắt đầu bằng c&aacute;ch th&ecirc;m component <code>Suspense</code>:
<pre class="language-js" data-content="import%20React%2C%20%7BSuspense%7D%20from%20%22react%22%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import React, {Suspense} from "react";</code></pre>
Hoặc bạn c&oacute; thể bỏ qua named import cho <code>{Suspense}</code> v&agrave; sử dụng component <code>&lt;React.Suspense /&gt;</code>.
Sau đ&oacute;, ch&uacute;ng ta sẽ cập nhật code để đ&oacute;ng g&oacute;i <code>&lt;Admin /&gt;</code> bằng <code>&lt;Suspense /&gt;</code>:
<pre class="language-js" data-content="import%20React%2C%20%7BSuspense%7D%20from%20%22react%22%3B%0Aimport%20%7BcreateRoot%7D%20from%20%22react-dom%2Fclient%22%3B%0Aconst%20Admin%20%3D%20React.lazy(()%20%3D%3E%20import(%22.%2FAdmin.js%22))%3B%0A%0Afunction%20User(props)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20(%3C%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cp%3EUser%20details%20show%20up%20here%3C%2Fp%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7Bprops.isAdmin%20%26%26%20%3CSuspense%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3CAdmin%20%2F%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3C%2FSuspense%3E%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2F%3E)%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import React, {Suspense} from "react";
import {createRoot} from "react-dom/client";
const Admin = React.lazy(() =&gt; import("./Admin.js"));

function User(props) {
 return (&lt;&gt;
 &lt;p&gt;User details show up here&lt;/p&gt;
 {props.isAdmin &amp;&amp; &lt;Suspense&gt;
 &lt;Admin /&gt;
 &lt;/Suspense&gt;}
 &lt;/&gt;);
}</code></pre>
Ch&uacute; &yacute; rằng component <code>&lt;Admin /&gt;</code> được đ&oacute;ng g&oacute;i bởi component <code>&lt;Suspense /&gt;</code>.
<h3 style="text-align: justify;">Bước 3: Cung cấp nội dung trung gian/phụ thuộc</h3>
Bước cuối c&ugrave;ng l&agrave; x&aacute;c định nội dung m&agrave; React sẽ hiển thị trong qu&aacute; tr&igrave;nh tải component (khi cuộc gọi <code>import()</code> đang truy cập mạng v&agrave; t&igrave;m nạp file).
Điều n&agrave;y được thực hiện bằng c&aacute;ch cung cấp prop <code>fallback</code> cho component <code>&lt;Suspense /&gt;</code>. Prop <code>fallback</code> c&oacute; thể nhận bất kỳ JSX hoặc component n&agrave;o. V&igrave; vậy, bạn thay đổi <code>&lt;Suspense&gt;&lt;Admin /&gt;&lt;/Suspense&gt;</code> th&agrave;nh:
<pre class="language-js" data-content="%3CSuspense%20fallback%3D%7B%3Cdiv%3ELoading%20admin...%3C%2Fdiv%3E%7D%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3CAdmin%20%2F%3E%0A%3C%2FSuspense%3E" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>&lt;Suspense fallback={&lt;div&gt;Loading admin...&lt;/div&gt;}&gt;
 &lt;Admin /&gt;
&lt;/Suspense&gt;</code></pre>
Nếu bạn c&oacute; component <code>&lt;CircleSpinner /&gt;</code> (v&iacute; dụ về tr&igrave;nh tải), bạn cũng c&oacute; thể sử dụng n&oacute; l&agrave;m nội dung trung gian như sau:
<pre class="language-js" data-content="%3CSuspense%20fallback%3D%7B%3CCircleSpinner%20%2F%3E%7D%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3CAdmin%20%2F%3E%0A%3C%2FSuspense%3E" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>&lt;Suspense fallback={&lt;CircleSpinner /&gt;}&gt;
 &lt;Admin /&gt;
&lt;/Suspense&gt;</code></pre>
<h3 style="text-align: justify;">Kết quả cuối c&ugrave;ng &amp; so s&aacute;nh</h3>
Dưới đ&acirc;y l&agrave; code trước khi lazy load:
<pre class="language-js" data-content="%3CSuspense%20fallback%3D%7B%3CCircleSpinner%20%2F%3E%7D%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3CAdmin%20%2F%3E%0A%3C%2FSuspense%3E" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>&lt;Suspense fallback={&lt;CircleSpinner /&gt;}&gt;
 &lt;Admin /&gt;
&lt;/Suspense&gt;</code></pre>
V&agrave; sau khi lazy load bằng <code>React.lazy</code> v&agrave; <code>Suspense</code>:
<pre class="language-js" data-content="import%20React%2C%20%7BSuspense%7D%20from%20%22react%22%3B%0Aimport%20%7BcreateRoot%7D%20from%20%22react-dom%2Fclient%22%3B%0Aconst%20Admin%20%3D%20React.lazy(()%20%3D%3E%20import(%22.%2FAdmin.js%22))%3B%0A%0Afunction%20User(props)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20(%3C%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cp%3EUser%20details%20show%20up%20here%3C%2Fp%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7Bprops.isAdmin%20%26%26%20%3CSuspense%20fallback%3D%7B%3Cdiv%3ELoading%20admin...%3C%2Fdiv%3E%7D%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3CAdmin%20%2F%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3C%2FSuspense%3E%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2F%3E)%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import React, {Suspense} from "react";
import {createRoot} from "react-dom/client";
const Admin = React.lazy(() =&gt; import("./Admin.js"));

function User(props) {
 return (&lt;&gt;
 &lt;p&gt;User details show up here&lt;/p&gt;
 {props.isAdmin &amp;&amp; &lt;Suspense fallback={&lt;div&gt;Loading admin...&lt;/div&gt;}&gt;
 &lt;Admin /&gt;
 &lt;/Suspense&gt;}
 &lt;/&gt;);
}</code></pre>
<h2 style="text-align: justify;">Khi n&agrave;o n&ecirc;n lazy load?</h2>
Bạn kh&ocirc;ng n&ecirc;n lazy load mọi component. Điều n&agrave;y sẽ l&agrave;m ứng dụng chạy chậm hơn. N&oacute;i chung, bạn chỉ n&ecirc;n lazy load c&aacute;c component rất lớn v&agrave; component kh&ocirc;ng hiển thị ngay tr&ecirc;n phần tr&ecirc;n c&ugrave;ng của trang.
Ngo&agrave;i ra, bạn cũng n&ecirc;n so s&aacute;nh hiệu suất trước v&agrave; sau khi lazy load v&agrave; xem n&oacute; ảnh hưởng như thế n&agrave;o đến trải nghiệm tải. trang
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Để sử dụng <code>React.lazy</code> v&agrave; <code>Suspense</code>, ch&uacute;ng ta l&agrave;m theo ba bước sau:</li>
<ul>
<li style="font-weight: 400;" aria-level="2">Bước 1: Chuyển đổi th&ecirc;m v&agrave;o tĩnh th&agrave;nh th&ecirc;m v&agrave;o động với <code>React.lazy</code></li>
<li style="font-weight: 400;" aria-level="2">Bước 2: Đ&oacute;ng g&oacute;i bằng <code>Suspense</code></li>
<li style="font-weight: 400;" aria-level="2">Bước 3: Cung cấp nội dung trung gian</li>
</ul>
<li style="font-weight: 400;" aria-level="1">Bạn kh&ocirc;ng n&ecirc;n lazy load mọi component. Điều n&agrave;y sẽ l&agrave;m ứng dụng chạy chậm hơn.</li>
<li style="font-weight: 400;" aria-level="1">Bạn chỉ n&ecirc;n lazy load c&aacute;c component rất lớn v&agrave; component kh&ocirc;ng hiển thị ngay tr&ecirc;n phần tr&ecirc;n c&ugrave;ng của trang.</li>
</ul>
Nếu bạn mới bắt đầu học React, đừng lo lắng qu&aacute; nhiều về lazy load. Tuy nhi&ecirc;n, h&atilde;y nhớ sử dụng n&oacute; khi ứng dụng ng&agrave;y c&agrave;ng ph&aacute;t triển!

React.lazy & Suspense