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

Quay lại v&iacute; dụ trước:
<pre class="language-js" data-content="import%20%7BuseState%2C%20useEffect%7D%20from%20%22react%22%3B%0A%0Afunction%20Counter()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%5Bcounter%2C%20setCounter%5D%20%3D%20useState(0)%3B%0A%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%A0document.title%20%3D%20%60Counter%20is%20%24%7Bcounter%7D%60%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cbutton%20onClick%3D%7B()%20%3D%3E%20setCounter(prevCounter%20%3D%3E%20prevCounter%20%2B%201)%7D%3EClick%20me%20%7Bcounter%7D%3C%2Fbutton%3E%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {useState, useEffect} from "react";

function Counter() {
 const [counter, setCounter] = useState(0);

 useEffect(() =&gt; {
 document.title = `Counter is ${counter}`;
 });
 
 return &lt;button onClick={() =&gt; setCounter(prevCounter =&gt; prevCounter + 1)}&gt;Click me {counter}&lt;/button&gt;
}</code></pre>
Ch&uacute;ng ta sẽ ph&acirc;n t&iacute;ch đoạn code để hiểu r&otilde; hơn c&aacute;ch <code>useEffect</code> hoạt động.
Khi bạn gọi <code>useEffect</code>, bạn đang th&ocirc;ng b&aacute;o cho React rằng component cần thực hiện một số c&ocirc;ng việc sau mỗi lần hiển thị.
React sẽ lưu trữ h&agrave;m được truyền v&agrave;o, trong v&iacute; dụ n&agrave;y l&agrave; h&agrave;m cập nhật <code>document.title</code> v&agrave; sau đ&oacute; gọi n&oacute; sau khi ho&agrave;n tất việc cập nhật DOM của component n&agrave;y.
<h2 style="text-align: justify;">&Ocirc;n lại closures</h2>
<code>useEffect</code> được đặt b&ecirc;n trong component c&oacute; chủ &yacute; để bạn c&oacute; thể dễ d&agrave;ng sử dụng c&aacute;c biến hiện c&oacute; trong đ&oacute; (đặc biệt l&agrave; c&aacute;c biến trạng th&aacute;i).
Lưu &yacute; rằng v&igrave; <code>useEffect</code> được gọi b&ecirc;n trong h&agrave;m <code>Counter</code>, bạn c&oacute; thể truy cập tất cả c&aacute;c biến trong h&agrave;m cha (<code>Counter</code>) th&ocirc;ng qua việc sử dụng closures. Trong v&iacute; dụ n&agrave;y, ch&uacute;ng ta c&oacute; thể truy cập biến <code>counter</code>.
V&agrave; mỗi khi <code>useEffect</code> được gọi, ch&uacute;ng ta c&oacute; thể đảm bảo rằng ch&uacute;ng ta c&oacute; gi&aacute; trị mới nhất của trạng th&aacute;i đ&oacute;. Trong v&iacute; dụ n&agrave;y l&agrave; <code>counter</code>.
<h3 style="text-align: justify;">C&aacute;c nguy&ecirc;n tắc khi l&agrave;m việc với Hook</h3>
H&atilde;y lu&ocirc;n ghi nhớ C&aacute;c nguy&ecirc;n tắc khi l&agrave;m việc với hook.
Quy tắc #1: Chỉ gọi Hook từ c&aacute;c h&agrave;m React
Bạn chỉ c&oacute; thể sử dụng <code>useEffect</code> b&ecirc;n trong một h&agrave;m React.
Quy tắc #2: Chỉ gọi Hook ở Cấp độ tr&ecirc;n c&ugrave;ng&nbsp;
v&agrave; kh&ocirc;ng bao giờ gọi hook b&ecirc;n trong v&ograve;ng lặp, điều kiện hoặc c&aacute;c h&agrave;m lồng nhau.
Đ&acirc;y l&agrave; quy tắc quan trọng nhất v&agrave; việc vi phạm quy tắc n&agrave;y c&oacute; thể g&acirc;y ra c&aacute;c lỗi kh&ocirc;ng mong muốn.
Tương tự như việc kh&ocirc;ng được ph&eacute;p đ&oacute;ng g&oacute;i <code>useState</code> bằng điều kiện <code>if</code>, bạn cũng kh&ocirc;ng n&ecirc;n đ&oacute;ng g&oacute;i <code>useEffect</code> bằng điều kiện <code>if</code>.
Tuy nhi&ecirc;n, việc c&oacute; một điều kiện <code>if</code> b&ecirc;n trong h&agrave;m <code>useEffect</code> l&agrave; ho&agrave;n to&agrave;n hợp lệ.
V&igrave; vậy, đoạn code sau l&agrave; kh&ocirc;ng ch&iacute;nh x&aacute;c:
<pre class="language-js" data-content="%2F%2F%20pseudo-code%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0if%20(someState%20%3E%3D%200)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%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%A0%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20THIS%20IS%20INCORRECT%20%F0%9F%91%8E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D)%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>// pseudo-code
function App() {
 if (someState &gt;= 0) {
 useEffect(() =&gt; {
 // THIS IS INCORRECT 👎
 })
 }
}</code></pre>
Thay v&agrave;o đ&oacute;, điều kiện <code>if</code> n&ecirc;n được đặt b&ecirc;n trong cuộc gọi <code>useEffect</code>:
<pre class="language-js" data-content="%2F%2F%20pseudo-code%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%A0if%20(someState%20%3E%3D%200)%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%A0%2F%2F%20this%20is%20okay%20%F0%9F%91%8D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D)%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>// pseudo-code
function App() {
 useEffect(() =&gt; {
 if (someState &gt;= 0) {
 // this is okay 👍
 }
 });
}</code></pre>
H&atilde;y đảm bảo đặt tất cả c&aacute;c cuộc gọi hook ở đầu h&agrave;m để tr&aacute;nh gặp lỗi kh&ocirc;ng mong đợi.
<h2 style="text-align: justify;">V&ograve;ng lặp v&ocirc; hạn</h2>
Ch&uacute;ng ta rất dễ tạo ra v&ograve;ng lặp v&ocirc; hạn khi sử dụng hook hiệu ứng, tuy nhi&ecirc;n, bạn đừng lo lắng v&igrave; t&iacute;nh năng được t&iacute;ch hợp v&agrave;o kh&oacute;a học n&agrave;y sẽ ph&aacute;t hiện hầu hết c&aacute;c v&ograve;ng lặp v&ocirc; hạn v&agrave; dừng ch&uacute;ng ngay lập tức.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">H&atilde;y lu&ocirc;n ghi nhớ C&aacute;c nguy&ecirc;n tắc khi l&agrave;m việc với hook.</li>
<li style="font-weight: 400;" aria-level="1">Quy tắc #1: Chỉ gọi Hook từ c&aacute;c h&agrave;m React</li>
<li style="font-weight: 400;" aria-level="1">Quy tắc #2: Chỉ gọi Hook ở Cấp độ tr&ecirc;n c&ugrave;ng v&agrave; kh&ocirc;ng bao giờ gọi hook b&ecirc;n trong v&ograve;ng lặp, điều kiện hoặc c&aacute;c h&agrave;m lồng nhau.</li>
</ul>
[___NOTE_
Bạn c&oacute; thể đang tự hỏi, tại sao ch&uacute;ng ta cần sử dụng hook <code>useEffect</code>? Tại sao ch&uacute;ng ta kh&ocirc;ng gọi <code>document.title = "..."</code> ở bất kỳ chỗ n&agrave;o trong c&acirc;u lệnh component trước c&acirc;u lệnh <code>return</code>?
Mặc d&ugrave; điều đ&oacute; l&agrave; khả thi nhưng bạn kh&ocirc;ng được khuyến kh&iacute;ch thực hiện v&igrave; nhiều l&yacute; do.
Một trong những l&yacute; do ch&iacute;nh l&agrave; hiệu suất. C&aacute;c component n&ecirc;n được hiển thị rất nhanh, cho ph&eacute;p ứng dụng tiếp tục hiển thị rất nhanh. Ngo&agrave;i ra, code trước c&acirc;u lệnh <code>return</code> chạy trước khi JSX được tạo ra từ component. Mặt kh&aacute;c, code trong hook <code>useEffect</code> chỉ chạy sau khi component đ&atilde; được hiển thị v&agrave;o DOM.
C&ograve;n một l&yacute; do quan trọng kh&aacute;c li&ecirc;n quan đến c&aacute;c hiệu ứng y&ecirc;u cầu dọn dẹp. Đ&oacute; ch&iacute;nh l&agrave; nội dung m&agrave; ch&uacute;ng ta sẽ thảo luận trong chương tiếp theo.
_NOTE___]

Tìm hiểu chi tiết hơn về useEffect