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

Một trường hợp sử dụng phổ biến kh&aacute;c l&agrave; chạy hiệu ứng khi một biến cụ thể được bật hoặc tắt. Để l&agrave;m điều đ&oacute;, ch&uacute;ng ta tạo một biến trạng th&aacute;i boolean v&agrave; sử dụng n&oacute; như điều kiện if b&ecirc;n trong hiệu ứng.
H&atilde;y tưởng tượng n&oacute; l&agrave; n&uacute;t bắt đầu v&agrave; tạm dừng, n&uacute;t đ&oacute; bắt đầu v&agrave; tạm dừng hiệu ứng.
H&atilde;y xem v&iacute; dụ về <code>Stopwatch</code>:
<pre class="language-js" data-content="function%20Stopwatch()%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%A0let%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%A0setCounter(prevCounter%20%3D%3E%20prevCounter%20%2B%201)%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%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%C2%A0clearTimeout(timerId)%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%0A%C2%A0%C2%A0%C2%A0%C2%A0function%20handleButtonClick()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20TODO%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%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%3Ch2%3E%7Bcounter%7D%3C%2Fh2%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cbutton%20onClick%3D%7BhandleButtonClick%7D%3EStart%20%2F%20Pause%3C%2Fbutton%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2F%3E%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function Stopwatch() {
 const [counter, setCounter] = useState(0);

 useEffect(() =&gt; {
 let timerId = setTimeout(() =&gt; {
 setCounter(prevCounter =&gt; prevCounter + 1);
 }, 1_000);
 return () =&gt; {
 clearTimeout(timerId)
 }
 });

 function handleButtonClick() {
 // TODO
 }

 return &lt;&gt;
 &lt;h2&gt;{counter}&lt;/h2&gt;
 &lt;button onClick={handleButtonClick}&gt;Start / Pause&lt;/button&gt;
 &lt;/&gt;
}</code></pre>
Ch&uacute;ng ta c&ugrave;ng ph&acirc;n t&iacute;ch đoạn code:
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Component <code>Stopwatch</code> bắt đầu từ 0 (gi&aacute; trị khởi tạo của <code>useState()</code>).</li>
<li style="font-weight: 400;" aria-level="1">Component hiển thị gi&aacute; trị của bộ đếm, ban đầu l&agrave; <code>0</code>, v&agrave; n&uacute;t <code>Start / Pause</code>.</li>
<li style="font-weight: 400;" aria-level="1"><code>useEffect()</code> được gọi, tạo một bộ hẹn giờ được l&ecirc;n lịch chạy sau 1 gi&acirc;y.</li>
<li style="font-weight: 400;" aria-level="1">Sau khi 1 gi&acirc;y đ&atilde; tr&ocirc;i qua, ta gọi <code>setCounter(prevCounter =&gt; prevCounter + 1)</code>&nbsp;để tăng gi&aacute; trị của bộ đếm l&ecirc;n 1.</li>
<li style="font-weight: 400;" aria-level="1">Điều n&agrave;y dẫn đến việc hiển thị lại component, hiển thị 1 v&agrave; <code>useEffect</code> chạy lại.</li>
<li style="font-weight: 400;" aria-level="1">V&agrave; cứ tiếp tục như vậy.</li>
</ol>
L&agrave;m thế n&agrave;o để l&agrave;m cho n&uacute;t <code>Start/Pause</code> hoạt động?
<h2 style="text-align: justify;">N&uacute;t Bắt đầu/Tạm dừng</h2>
Để l&agrave;m điều đ&oacute;, ch&uacute;ng ta cần một biến state c&oacute; kiểu dữ liệu boolean:
<pre class="language-js" data-content="const%20%5Brunning%2C%20setRunning%5D%20%3D%20useState(false)" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const [running, setRunning] = useState(false)</code></pre>
Ch&uacute;ng ta sẽ sử dụng gi&aacute; trị của <code>running</code> để quyết định xem <code>useEffect</code> c&oacute; chạy hay kh&ocirc;ng.
Nhưng nhớ lại rằng theo quy tắc sử dụng hook, ch&uacute;ng ta KH&Ocirc;NG được ph&eacute;p đ&oacute;ng g&oacute;i <code>useEffect</code> bằng điều kiện <code>if</code>.
V&igrave; vậy, ch&uacute;ng ta n&ecirc;n đ&oacute;ng g&oacute;i code b&ecirc;n trong <code>useEffect</code>:
<pre class="language-js" data-content="useEffect(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20the%20effect%20still%20runs%20every%20time%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20but%20the%20code%20inside%20of%20it%20only%20runs%20when%20'running'%20is%20true%0A%C2%A0%C2%A0%C2%A0%C2%A0if%20(running)%20%7B%C2%A0%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0let%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%A0setCounter(prevCounter%20%3D%3E%20prevCounter%20%2B%201)%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%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%C2%A0clearTimeout(timerId)%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)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>useEffect(() =&gt; {
 // the effect still runs every time
 // but the code inside of it only runs when 'running' is true
 if (running) { 
 let timerId = setTimeout(() =&gt; {
 setCounter(prevCounter =&gt; prevCounter + 1);
 }, 1_000);
 return () =&gt; {
 clearTimeout(timerId)
 }
 }
});</code></pre>
V&agrave; cuối c&ugrave;ng, bạn sẽ cần l&agrave;m cho n&uacute;t đảo ngược gi&aacute; trị của boolean. Để l&agrave;m điều đ&oacute;, ch&uacute;ng ta sử dụng to&aacute;n tử Logic Not (được giải th&iacute;ch trong b&agrave;i về đảo ngược gi&aacute; trị boolean).
V&igrave; vậy, h&agrave;m <code>handleButtonClick</code> trở th&agrave;nh:
<pre class="language-js" data-content="function%20handleButtonClick()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0setRunning(prevValue%20%3D%3E%20!prevValue)%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function handleButtonClick() {
 setRunning(prevValue =&gt; !prevValue);
}</code></pre>
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Bạn c&oacute; thể tạo một biến trạng th&aacute;i kiểu boolean để quyết định khi n&agrave;o chạy một hiệu ứng.</li>
<li style="font-weight: 400;" aria-level="1">Bạn KH&Ocirc;NG n&ecirc;n đ&oacute;ng g&oacute;i useEffect bằng điều kiện if m&agrave; h&atilde;y đặt điều kiện if b&ecirc;n trong useEffect. Điều n&agrave;y được &aacute;p dụng theo quy tắc sử dụng hook.</li>
</ul>
&nbsp;
H&atilde;y xem x&eacute;t component <code>&lt;Stopwatch /&gt;</code> trong React:
<pre class="language-js" data-content="import%20%7BuseState%2C%20useEffect%7D%20from%20%22react%22%3B%0A%0Afunction%20Stopwatch()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%5Bcounter%2C%20setCounter%5D%20%3D%20useState(0)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%5Brunning%2C%20setRunning%5D%20%3D%20useState(false)%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%A0if%20(running)%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%A0let%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%A0%C2%A0%C2%A0%C2%A0%C2%A0setCounter(prevCounter%20%3D%3E%20prevCounter%20%2B%201)%3B%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%7D%2C%201_000)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%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%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0clearTimeout(timerId)%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%7D%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%C2%A0%C2%A0%C2%A0%C2%A0%0A%C2%A0%C2%A0%C2%A0%C2%A0function%20handleStopClick()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0setCounter(0)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0setRunning(false)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%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%3Ch2%3E%7Bcounter%7D%3C%2Fh2%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cbutton%20onClick%3D%7B()%20%3D%3E%20setRunning(prevRunning%20%3D%3E%20!prevRunning)%7D%3EStart%20%2F%20Pause%3C%2Fbutton%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cbutton%20onClick%3D%7BhandleStopClick%7D%3EStop%3C%2Fbutton%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2F%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 Stopwatch() {
 const [counter, setCounter] = useState(0);
 const [running, setRunning] = useState(false);

 useEffect(() =&gt; {
 if (running) {
 let timerId = setTimeout(() =&gt; {
 setCounter(prevCounter =&gt; prevCounter + 1);
 }, 1_000);
 return () =&gt; {
 clearTimeout(timerId)
 }
 }
 });
 
 function handleStopClick() {
 setCounter(0);
 setRunning(false);
 }
 
 return &lt;&gt;
 &lt;h2&gt;{counter}&lt;/h2&gt;
 &lt;button onClick={() =&gt; setRunning(prevRunning =&gt; !prevRunning)}&gt;Start / Pause&lt;/button&gt;
 &lt;button onClick={handleStopClick}&gt;Stop&lt;/button&gt;
 &lt;/&gt;
}</code></pre>
v&agrave; so s&aacute;nh với phi&ecirc;n bản code JavaScript thuần t&uacute;y (m&agrave; kh&ocirc;ng c&oacute; code HTML cần thiết):
<pre class="language-js" data-content="let%20counter%20%3D%200%3B%0Alet%20running%20%3D%20false%3B%0A%0Afunction%20tick()%20%7B%0A%C2%A0%C2%A0counter%20%2B%3D%201%3B%0A%C2%A0%C2%A0document.querySelector(%22%23counter%22).textContent%20%3D%20counter%3B%0A%7D%0A%0Alet%20intervalId%20%3D%20setInterval(tick%2C%201_000)%3B%0A%0Adocument.querySelector(%22%23start-pause%22).addEventListener(%22click%22%2C%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0running%20%3D%20!running%3B%0A%C2%A0%C2%A0if%20(running)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0intervalId%20%3D%20setInterval(tick%2C%201_000)%3B%0A%C2%A0%C2%A0%7D%20else%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0clearInterval(intervalId)%3B%0A%C2%A0%C2%A0%7D%0A%7D)%3B%0A%0Adocument.querySelector(%22%23stop%22).addEventListener(%22click%22%2C%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0clearInterval(intervalId)%3B%0A%C2%A0%C2%A0counter%20%3D%200%3B%0A%C2%A0%C2%A0running%20%3D%20false%3B%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>let counter = 0;
let running = false;

function tick() {
 counter += 1;
 document.querySelector("#counter").textContent = counter;
}

let intervalId = setInterval(tick, 1_000);

document.querySelector("#start-pause").addEventListener("click", () =&gt; {
 running = !running;
 if (running) {
 intervalId = setInterval(tick, 1_000);
 } else {
 clearInterval(intervalId);
 }
});

document.querySelector("#stop").addEventListener("click", () =&gt; {
 clearInterval(intervalId);
 counter = 0;
 running = false;
});</code></pre>
Mặc d&ugrave; cả hai đều hoạt động nhưng phi&ecirc;n bản React ngắn gọn hơn một ch&uacute;t v&agrave; dễ đọc hơn.
Nếu bạn thấy code c&ograve;n kh&oacute; hiểu, điều đ&oacute; l&agrave; do bạn vừa học về những kh&aacute;i niệm n&agrave;y. Tuy nhi&ecirc;n, sau khi bạn đ&atilde; l&agrave;m quen dần, bạn sẽ thấy dễ hiểu hơn.
Lưu &yacute; rằng số d&ograve;ng code kh&ocirc;ng quan trọng, mục ti&ecirc;u của ch&uacute;ng ta kh&ocirc;ng phải l&agrave; giải quyết b&agrave;i tập bằng &iacute;t d&ograve;ng code nhất m&agrave; l&agrave; viết code c&oacute; thể t&aacute;i sử dụng v&agrave; dễ bảo tr&igrave;.
V&agrave; React đ&atilde; thực hiện c&ocirc;ng việc n&agrave;y rất tốt. Một lưu &yacute; nhỏ l&agrave; React kh&ocirc;ng phải l&agrave; c&ocirc;ng cụ duy nhất c&oacute; thể l&agrave;m được điều đ&oacute;.

Sử dụng cờ (Flag) để kiểm soát việc chạy hiệu ứng