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

V&igrave; cập nhật trạng th&aacute;i l&agrave; h&agrave;nh vi bất đồng bộ, c&oacute; một điều m&agrave; ch&uacute;ng ta cần phải để &yacute;.
Để cho đơn giản, ch&uacute;ng ta sẽ xem x&eacute;t component sau:
<pre class="language-js" data-content="import%20%7BuseState%7D%20from%20%22react%22%3B%0A%0Afunction%20App()%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%A0function%20handleButtonClick()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0setCounter(counter%20%2B%201)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0setCounter(counter%20%2B%201)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cbutton%20onClick%3D%7BhandleButtonClick%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} from "react";

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

 function handleButtonClick() {
 setCounter(counter + 1);
 setCounter(counter + 1);
 }

 return &lt;button onClick={handleButtonClick}&gt;Click me {counter}&lt;/button&gt;
}</code></pre>
Đ&acirc;y chỉ l&agrave; code minh họa; tuy nhi&ecirc;n, code c&oacute; hai lệnh gọi <code>setCounter</code> li&ecirc;n tiếp nhau.
Với đoạn code tr&ecirc;n, bạn dự đo&aacute;n gi&aacute; trị của counter sẽ l&agrave; bao nhi&ecirc;u sau khi nhấp v&agrave;o n&uacute;t?
Gi&aacute; trị sẽ l&agrave; 1, kh&ocirc;ng phải 2, l&yacute; do l&agrave;:
<pre class="language-js" data-content="%2F%2Fassuming%3A%20counter%20is%200%0AsetCounter(counter%20%2B%201)%3B%0AsetCounter(counter%20%2B%201)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>//assuming: counter is 0
setCounter(counter + 1);
setCounter(counter + 1);</code></pre>
Hai lần cập nhật trạng th&aacute;i n&agrave;y sẽ được gộp chung v&agrave; khi <code>counter = 0</code>, cuộc gọi <code>setCounter()</code> đầu ti&ecirc;n sẽ đặt gi&aacute; trị của counter l&agrave; 0 + 1 = 1, nhưng việc cập nhật n&agrave;y kh&ocirc;ng xảy ra ngay lập tức v&igrave; n&oacute; l&agrave; h&agrave;nh vi bất đồng bộ.
Khi gọi lần thứ hai <code>setCounter(counter + 1)</code>, gi&aacute; trị của <code>counter</code> vẫn l&agrave; 0 v&igrave; component chưa được hiển thị lại. V&igrave; vậy, lần gọi thứ hai cũng sẽ cập nhật trạng th&aacute;i th&agrave;nh 1.
Lưu &yacute; rằng điều n&agrave;y xảy ra do c&aacute;c lần cập nhật trạng th&aacute;i được gộp chung.
<h2 style="text-align: justify;">Cập nhật trạng th&aacute;i bằng h&agrave;m</h2>
Để giải quyết vấn đề n&agrave;y, React cung cấp kh&aacute;i niệm cập nhật trạng th&aacute;i bằng h&agrave;m (functional state updates), đ&oacute; l&agrave; truyền một h&agrave;m v&agrave;o h&agrave;m cập nhật trạng th&aacute;i, dưới đ&acirc;y l&agrave; một v&iacute; dụ:
<pre class="language-c" data-content="setCounter((previousCounter)%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20previousCounter%20%2B%201%3B%0A%7D)%3B" data-language="c" data-ace-language="c_cpp" data-name-language="C" data-main-file="main.c"><code>setCounter((previousCounter) =&gt; {
 return previousCounter + 1;
});</code></pre>
Phi&ecirc;n bản ngắn gọn hơn:
<pre class="language-js" data-content="setCounter(previousCounter%20%3D%3E%20previousCounter%20%2B%201)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>setCounter(previousCounter =&gt; previousCounter + 1);</code></pre>
Ch&uacute;ng ta định nghĩa một h&agrave;m nhận gi&aacute; trị trạng th&aacute;i trước đ&oacute; v&agrave; trả về gi&aacute; trị trạng th&aacute;i mới. Trong v&iacute; dụ n&agrave;y, gi&aacute; trị trạng th&aacute;i mới l&agrave; gi&aacute; trị trạng th&aacute;i trước đ&oacute; + 1.
Dưới đ&acirc;y l&agrave; c&aacute;ch bạn c&oacute; thể sửa v&iacute; dụ tr&ecirc;n để cộng v&agrave;o trạng th&aacute;i hai lần:
<pre class="language-js" data-content="import%20%7BuseState%7D%20from%20%22react%22%3B%0A%0Afunction%20App()%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%A0function%20handleButtonClick()%20%7B%0A%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%A0setCounter(prevCounter%20%3D%3E%20prevCounter%20%2B%201)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cbutton%20onClick%3D%7BhandleButtonClick%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} from "react";

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

 function handleButtonClick() {
 setCounter(prevCounter =&gt; prevCounter + 1);
 setCounter(prevCounter =&gt; prevCounter + 1);
 }

 return &lt;button onClick={handleButtonClick}&gt;Click me {counter}&lt;/button&gt;
}</code></pre>
Gi&aacute; trị trạng th&aacute;i counter sẽ tăng th&ecirc;m 2 mỗi lần bạn nhấp v&agrave;o n&uacute;t.
Bạn c&oacute; thể chưa hiểu r&otilde; nguồn gốc của <code>prevCounter</code>. H&atilde;y nhớ rằng <code>prevCounter =&gt; prevCounter + 1</code> l&agrave; một định nghĩa h&agrave;m. React sẽ gọi h&agrave;m n&agrave;y v&agrave; truyền gi&aacute; trị trạng th&aacute;i trước đ&oacute; v&agrave;o l&agrave;m đối số đầu ti&ecirc;n.
Điều n&agrave;y c&oacute; nghĩa l&agrave; bạn c&oacute; thể đặt t&ecirc;n đối số đ&oacute; th&agrave;nh bất cứ điều g&igrave; bạn muốn. Trong v&iacute; dụ n&agrave;y, ta sử dụng <code>prevCounter</code>.
Để &yacute; đoạn code đ&atilde; tạo ra một v&agrave;i bộ đếm. Ch&uacute;ng ta kh&ocirc;ng gặp vấn đề với c&aacute;c component bộ đếm v&igrave; ứng dụng v&agrave; component rất đơn giản v&agrave; chỉ c&oacute; một cập nhật trạng th&aacute;i. Tuy nhi&ecirc;n, một khuyến nghị l&agrave;:
Khi trạng th&aacute;i mới được t&iacute;nh to&aacute;n bằng c&aacute;ch sử dụng trạng th&aacute;i trước đ&oacute;, bạn n&ecirc;n sử dụng cập nhật trạng th&aacute;i bằng h&agrave;m để đảm bảo t&iacute;nh nhất qu&aacute;n v&agrave; ngăn ngừa lỗi kh&ocirc;ng mong muốn.
V&igrave; vậy, khi bạn cần tăng gi&aacute; trị của bộ đếm th&igrave; n&ecirc;n sử dụng cập nhật trạng th&aacute;i bằng h&agrave;m. C&ograve;n khi bạn muốn đặt lại bộ đếm về 0 th&igrave; kh&ocirc;ng nhất thiết phải sử dụng cập nhật trạng th&aacute;i bằng h&agrave;m (v&igrave; gi&aacute; trị mới kh&ocirc;ng được t&iacute;nh to&aacute;n bằng c&aacute;ch sử dụng trạng th&aacute;i trước đ&oacute;).
<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&agrave;m <code>setState</code> từ <code>useState</code> c&oacute; thể nhận một h&agrave;m cho ph&eacute;p bạn thực hiện cập nhật trạng th&aacute;i bằng h&agrave;m.</li>
<li style="font-weight: 400;" aria-level="1">H&agrave;m được truyền cho <code>setState</code> nhận trạng th&aacute;i trước đ&oacute; l&agrave;m đối số để t&iacute;nh to&aacute;n trạng th&aacute;i tiếp theo.</li>
<li style="font-weight: 400;" aria-level="1">Khi trạng th&aacute;i mới được t&iacute;nh to&aacute;n bằng c&aacute;ch sử dụng trạng th&aacute;i trước đ&oacute;, bạn n&ecirc;n sử dụng cập nhật trạng th&aacute;i bằng h&agrave;m để đảm bảo t&iacute;nh nhất qu&aacute;n v&agrave; ngăn ngừa lỗi kh&ocirc;ng mong muốn.</li>
</ul>
H&atilde;y nhớ sử dụng cập nhật trạng th&aacute;i bằng h&agrave;m mỗi khi trạng th&aacute;i mới được t&iacute;nh to&aacute;n dựa tr&ecirc;n trạng th&aacute;i hoặc props trước đ&oacute;. Điều n&agrave;y gi&uacute;p tr&aacute;nh c&aacute;c lỗi kh&ocirc;ng mong muốn trong ứng dụng.