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

Khi sử dụng hiệu ứng, trạng th&aacute;i v&agrave; sự kiện c&ugrave;ng l&uacute;c, ch&uacute;ng ta c&oacute; thể bị nhầm lẫn hoặc gặp kh&oacute; khăn trong việc quản l&yacute; c&aacute;c tương t&aacute;c giữa ch&uacute;ng. Ch&iacute;nh v&igrave; vậy, kh&oacute;a học n&agrave;y d&agrave;nh ri&ecirc;ng ra một chương để đề cập v&agrave; giải th&iacute;ch nguy&ecirc;n nh&acirc;n dẫn đến vấn đề đ&oacute;.
H&atilde;y xem x&eacute;t component <code>App</code> dưới đ&acirc;y:
<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%5Bcount%2C%20setCount%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%A0setCount(prevCount%20%3D%3E%20prevCount%20%2B%201)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(count)%3B%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%3Ch1%3E%7Bcount%7D%3C%2Fh1%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cbutton%20onClick%3D%7BhandleButtonClick%7D%3EAdd%201%3C%2Fbutton%3E%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 {useState} from "react";

function App() {
 const [count, setCount] = useState(0);

 function handleButtonClick() {
 setCount(prevCount =&gt; prevCount + 1);
 console.log(count);
 }

 return &lt;&gt;
 &lt;h1&gt;{count}&lt;/h1&gt;
 &lt;button onClick={handleButtonClick}&gt;Add 1&lt;/button&gt;
 &lt;/&gt;;
}</code></pre>
Component n&agrave;y hiển thị gi&aacute; trị hiện tại của biến <code>count</code>, bắt đầu từ <code>0</code>.
Khi bạn nhấp v&agrave;o n&uacute;t <code>Add 1</code>, React sẽ tăng gi&aacute; trị của count l&ecirc;n 1 v&agrave; sau đ&oacute; gọi <code>console.log(count)</code>.
Tuy nhi&ecirc;n, khi bạn gọi <code>console.log(count)</code> sau đ&oacute;, n&oacute; sẽ hiển thị gi&aacute; trị cũ của count. L&yacute; do l&agrave; v&igrave; c&aacute;ch cập nhật trạng th&aacute;i của React c&oacute; t&iacute;nh chất kh&ocirc;ng đồng bộ. Điều n&agrave;y c&oacute; nghĩa l&agrave; nhiều trạng th&aacute;i c&oacute; thể được gộp lại v&agrave; bạn kh&ocirc;ng thể dựa v&agrave;o gi&aacute; trị của trạng th&aacute;i để được cập nhật ngay sau khi gọi <code>setState</code>.
Điều đ&oacute; cũng li&ecirc;n quan đến thiết kế của Hook; bạn chỉ nhận được gi&aacute; trị mới của count khi h&agrave;m App được gọi lại, điều n&agrave;y sẽ gọi <code>const [count, setCount] = useState(0);</code> v&agrave; cung cấp gi&aacute; trị mới của <code>count</code> đ&atilde; được cập nhật.
Việc n&agrave;y nghe c&oacute; vẻ m&acirc;u thuẫn với logic th&ocirc;ng thường, nhưng c&aacute;ch thiết kế n&agrave;y gi&uacute;p cải thiện đ&aacute;ng kể hiệu suất của ứng dụng.
<h2 style="text-align: justify;">C&aacute;ch khắc phục</h2>
Nếu bạn cần ghi log hoặc sử dụng gi&aacute; trị được cập nhật, bạn chỉ cần sử dụng một hiệu ứng với phụ thuộc l&agrave; biến trạng th&aacute;i đ&oacute;.
Điều đ&oacute; sẽ l&agrave;m cho hiệu ứng chạy mỗi khi biến trạng th&aacute;i thay đổi. V&igrave; vậy, dưới đ&acirc;y l&agrave; c&aacute;ch ch&uacute;ng ta sửa đoạn code tr&ecirc;n:
<pre class="language-js" data-content="import%20%7BuseState%2C%20useEffect%7D%20from%20%22react%22%3B%0A%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%5Bcount%2C%20setCount%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%A0console.log(count)%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%20%5Bcount%5D)%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%A0setCount(prevCount%20%3D%3E%20prevCount%20%2B%201)%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%3Ch1%3E%7Bcount%7D%3C%2Fh1%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cbutton%20onClick%3D%7BhandleButtonClick%7D%3EClick%20me%3C%2Fbutton%3E%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 {useState, useEffect} from "react";

function App() {
 const [count, setCount] = useState(0);

 useEffect(() =&gt; {
 console.log(count)
 }, [count]);

 function handleButtonClick() {
 setCount(prevCount =&gt; prevCount + 1)
 }

 return &lt;&gt;
 &lt;h1&gt;{count}&lt;/h1&gt;
 &lt;button onClick={handleButtonClick}&gt;Click me&lt;/button&gt;
 &lt;/&gt;;
}</code></pre>
Hiệu ứng:
<pre class="language-js" data-content="useEffect(()%20%3D%3E%20%7B%0A%0A%7D%2C%20%5Bcount%5D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>useEffect(() =&gt; {

}, [count]);</code></pre>
sẽ cho ph&eacute;p bạn chạy một đoạn code (v&iacute; dụ: <code>console.log(count)</code>) mỗi khi trạng th&aacute;i <code>count</code> c&oacute; gi&aacute; trị mới!
<h2 style="text-align: justify;">Lưu &yacute; cuối c&ugrave;ng</h2>
Sự thay đổi tr&ecirc;n sẽ dẫn đến việc in ra <code>0</code> tr&ecirc;n console khi component được hiển thị lần đầu ti&ecirc;n. H&agrave;nh vi n&agrave;y kh&ocirc;ng xảy ra trong đoạn code trước đ&oacute;.
Nếu bạn kh&ocirc;ng muốn ghi log gi&aacute; trị khởi tạo khi component được hiển thị lần đầu ti&ecirc;n, bạn c&oacute; thể đ&oacute;ng g&oacute;i console.log trong một điều kiện if:
<pre class="language-js" data-content="useEffect(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0if%20(count%20%3E%200)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(count)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%7D%2C%20%5Bcount%5D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>useEffect(() =&gt; {
 if (count &gt; 0) {
 console.log(count);
 }
}, [count]);</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">Việc cập nhật trạng th&aacute;i của React được thực hiện kh&ocirc;ng đồng bộ.</li>
<li style="font-weight: 400;" aria-level="1">Nếu bạn cần gi&aacute; trị cập nhật mới nhất của một trạng th&aacute;i sau khi n&oacute; thay đổi trong một sự kiện, bạn cần di chuyển logic v&agrave;o hiệu ứng.</li>
</ul>
&nbsp;
Trong c&aacute;c chương tiếp theo, ch&uacute;ng ta sẽ t&igrave;m hiểu về hiệu suất của <code>useEffect</code> cũng như c&aacute;ch sử dụng <code>localStorage</code> để lưu trữ c&aacute;c sản phẩm do quản trị vi&ecirc;n tạo.

Effect, State & Events