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

Trở lại v&iacute; dụ trước:
<pre class="language-js" data-content="import%20%7BuseEffect%7D%20from%20%22react%22%3B%0A%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0useEffect(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0setTimeout(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22This%20will%20run%20in%201%20second%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%201_000)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Ch1%3EApp%3C%2Fh1%3E%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {useEffect} from "react";

function App() {
 useEffect(() =&gt; {
 setTimeout(() =&gt; {
 console.log("This will run in 1 second");
 }, 1_000);
 });

 return &lt;h1&gt;App&lt;/h1&gt;;
}</code></pre>
Ch&uacute;ng ta cần một c&aacute;ch để dọn dẹp bộ đếm thời gian. JavaScript cung cấp h&agrave;m <code>clearTimeout(timerId)</code> để l&agrave;m điều n&agrave;y, trong đ&oacute; <code>timerId</code> l&agrave; tham số.
<code>timerId</code> c&oacute; thể được lưu trữ bằng c&aacute;ch g&aacute;n gi&aacute; trị trả về của h&agrave;m <code>setTimeout</code> cho một biến.
Trong JavaScript th&ocirc;ng thường, để tạo một bộ đếm thời gian v&agrave; sau đ&oacute; hủy bỏ n&oacute; ngay lập tức, bạn l&agrave;m như sau:
<pre class="language-js" data-content="const%20timerId%20%3D%20setTimeout(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22this%20is%20supposed%20to%20run%20in%201%20second%22)%3B%0A%7D%2C%201_000)%3B%0A%0AclearTimeout(timerId)%3B%20%2F%2F%20this%20cancels%20the%20timer" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const timerId = setTimeout(() =&gt; {
 console.log("this is supposed to run in 1 second");
}, 1_000);

clearTimeout(timerId); // this cancels the timer</code></pre>
Đoạn code n&agrave;y sẽ hủy bỏ bộ đếm thời gian v&agrave; ch&uacute;ng ta sẽ kh&ocirc;ng nh&igrave;n thấy bất cứ thứ g&igrave; tr&ecirc;n console.
B&acirc;y giờ ch&uacute;ng ta đ&atilde; biết rằng nếu ch&uacute;ng ta cần React hủy bỏ bộ đếm thời gian khi component đang được hiển thị lại, ch&uacute;ng ta phải trả về một h&agrave;m từ <code>useEffect</code>. H&atilde;y thử triển khai:
<pre class="language-js" data-content="import%20%7BuseEffect%7D%20from%20%22react%22%3B%0A%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0useEffect(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0const%20timerId%20%3D%20setTimeout(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22This%20will%20run%20in%201%20second%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%201_000)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20when%20component%20gets%20unmounted%2C%20clear%20the%20timer%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0clearTimeout(timerId)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Ch1%3EApp%3C%2Fh1%3E%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {useEffect} from "react";

function App() {
 useEffect(() =&gt; {
 const timerId = setTimeout(() =&gt; {
 console.log("This will run in 1 second");
 }, 1_000);

 return () =&gt; {
 // when component gets unmounted, clear the timer
 clearTimeout(timerId);
 };
 });

 return &lt;h1&gt;App&lt;/h1&gt;;
}</code></pre>
Mỗi khi component bị hủy gắn kết (hoặc hiển thị lại), React sẽ gọi h&agrave;m m&agrave; ch&uacute;ng ta trả về từ useEffect.
[___WARNING_Bạn kh&ocirc;ng n&ecirc;n đặt <code>return () =&gt; {...}</code> b&ecirc;n trong <code>setTimeout</code>. Mục ti&ecirc;u kh&ocirc;ng phải l&agrave; trả về từ <code>setTimeout</code> m&agrave; l&agrave; từ <code>useEffect</code>._WARNING___]
C&aacute;ch l&agrave;m n&agrave;y nghe c&oacute; vẻ kh&ocirc;ng hiệu quả...
Bạn c&oacute; thể tự hỏi tại sao React dọn dẹp hiệu ứng sau mỗi lần hiển thị lại. Kỹ thuật n&agrave;y nghe c&oacute; vẻ kh&ocirc;ng hiệu quả nhưng n&oacute; gi&uacute;p bạn tr&aacute;nh r&ograve; rỉ bộ nhớ v&agrave; những lỗi nhỏ kh&oacute; ph&aacute;t hiện.
Việc dọn dẹp n&agrave;y cũng xảy ra khi component bị x&oacute;a khỏi DOM. Ch&uacute;ng ta sẽ thảo luận về điều đ&oacute; trong chương tiếp theo.
<h3 style="text-align: justify;">T&ugrave;y chọn: đặt t&ecirc;n cho h&agrave;m dọn dẹp</h3>
Bạn cũng c&oacute; thể đặt t&ecirc;n cho h&agrave;m dọn dẹp. Điều n&agrave;y ho&agrave;n to&agrave;n t&ugrave;y chọn. Việc đặt t&ecirc;n sẽ nhắc nhở cho bạn rằng h&agrave;m n&agrave;y chỉ được gọi khi dọn dẹp. T&ecirc;n đ&oacute; cũng sẽ xuất hiện trong ngăn xếp cuộc gọi khi xảy ra lỗi - rất hữu &iacute;ch cho việc gỡ lỗi. Bạn cũng c&oacute; thể đặt t&ecirc;n m&ocirc; tả chức năng, chẳng hạn như <code>cleanupTimer</code>, để biết h&agrave;m n&agrave;y sẽ dọn dẹp bộ đếm thời gian. V&iacute; dụ:
<pre class="language-js" data-content="useEffect(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20timerId%20%3D%20setTimeout(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22This%20will%20run%20in%201%20second%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%201_000)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20function%20cleanupTimer()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0clearTimeout(timerId)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%3B%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>useEffect(() =&gt; {
 const timerId = setTimeout(() =&gt; {
 console.log("This will run in 1 second");
 }, 1_000);
 return function cleanupTimer() {
 clearTimeout(timerId);
 };
});</code></pre>
Điều n&agrave;y ho&agrave;n to&agrave;n t&ugrave;y chọn v&agrave; bạn c&oacute; thể quyết định việc c&oacute; đặt t&ecirc;n cho c&aacute;c h&agrave;m hay kh&ocirc;ng.
<h2 style="text-align: justify;">Dọn dẹp so với kh&ocirc;ng dọn dẹp</h2>
Sự kh&aacute;c biệt giữa hiệu ứng được dọn dẹp v&agrave; hiệu ứng kh&ocirc;ng được dọn dẹp chỉ l&agrave; bạn c&oacute; trả về một h&agrave;m dọn dẹp hay kh&ocirc;ng.
V&igrave; vậy, c&aacute;c hiệu ứng kh&ocirc;ng trả về h&agrave;m l&agrave; những hiệu ứng m&agrave; React sẽ kh&ocirc;ng dọn dẹp.
Trong khi c&aacute;c hiệu ứng trả về h&agrave;m l&agrave; những hiệu ứng m&agrave; React sẽ dọn dẹp khi hiển thị lại.
<h2 style="text-align: justify;">C&aacute;ch thức hoạt động</h2>
React sẽ lưu trữ định nghĩa h&agrave;m m&agrave; bạn trả về từ <code>useEffect</code> khi n&oacute; hiển thị component. Trong v&iacute; dụ tr&ecirc;n, đ&oacute; l&agrave;:
<pre class="language-js" data-content="()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0clearTimeout(timerId)%3B%0A%7D%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>() =&gt; {
 clearTimeout(timerId);
};</code></pre>
Trong chương closures, ta đ&atilde; học rằng gi&aacute; trị của <code>timerId</code> c&oacute; thể được truy cập b&ecirc;n trong h&agrave;m n&agrave;y v&igrave; n&oacute; l&agrave; một closure b&ecirc;n trong h&agrave;m cha của n&oacute;.
V&igrave; vậy, React lưu trữ định nghĩa h&agrave;m n&agrave;y nhưng kh&ocirc;ng gọi n&oacute; ngay lập tức.
N&oacute; chỉ gọi h&agrave;m n&agrave;y khi sắp diễn ra việc hiển thị lại (hoặc gỡ bỏ phần tử khỏi DOM).
<h2 style="text-align: justify;">Qu&aacute; tr&igrave;nh dọn dẹp chạy sau mỗi lần hiển thị lại</h2>
L&yacute; do tại sao h&agrave;m dọn dẹp được gọi sau mỗi lần hiển thị lại l&agrave; để tr&aacute;nh c&aacute;c lỗi.
Đ&acirc;y l&agrave; thiết kế của React nhằm giảm số lượng lỗi v&agrave; t&igrave;nh trạng r&ograve; rỉ bộ nhớ.
Tuy nhi&ecirc;n, trong một số t&igrave;nh huống, bạn c&oacute; thể cần chạy <code>effect</code> v&agrave; h&agrave;m dọn dẹp trong những trường hợp cụ thể. Điều n&agrave;y sẽ được thảo luận trong chương tiếp theo.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><code>const timerId = setTimeout(() =&gt; {}, 1_000)</code> sẽ lưu trữ <code>timerId</code> cho ph&eacute;p bạn dọn dẹp sau n&agrave;y.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><code>clearTimeout(timerId)</code> hủy bỏ bộ đếm thời gian được khởi tạo bởi <code>setTimeout</code>.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Bạn c&oacute; thể đặt t&ecirc;n t&ugrave;y chọn cho h&agrave;m dọn dẹp.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">C&aacute;c hiệu ứng KH&Ocirc;NG trả về h&agrave;m l&agrave; những hiệu ứng m&agrave; React sẽ kh&ocirc;ng dọn dẹp.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">C&aacute;c hiệu ứng trả về h&agrave;m l&agrave; những hiệu ứng m&agrave; React sẽ dọn dẹp sau mỗi lần hiển thị lại.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">H&agrave;m dọn dẹp chạy sau mỗi lần hiển thị lại. Bạn sẽ c&oacute; thể ngăn n&oacute; chạy sau mỗi lần hiển thị lại. Ch&uacute;ng ta sẽ thấy điều đ&oacute; trong chương tiếp theo.</li>
</ul>

Dọn dẹp bộ đếm thời gian