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

Đ&acirc;y l&agrave; một chương t&ugrave;y chọn. Nếu bạn đ&atilde; học về <code>async/await</code> v&agrave; muốn sử dụng trong React, bạn c&oacute; thể giải quyết c&aacute;c b&agrave;i tập trong chương n&agrave;y bằng <code>async/await</code>.
Nếu bạn kh&ocirc;ng th&iacute;ch sử dụng <code>async/await</code>, bạn vẫn c&oacute; thể l&agrave;m c&aacute;c b&agrave;i tập bằng c&aacute;ch sử dụng promise truyền thống giống như trong c&aacute;c chương trước v&agrave; bạn vẫn c&oacute; thể vượt qua c&aacute;c testcase.
Nguy&ecirc;n nh&acirc;n l&agrave; do <code>async/await</code> chỉ l&agrave; c&uacute; ph&aacute;p r&uacute;t gọn cho promise, cho ph&eacute;p bạn biểu diễn logic của promise như một tập hợp c&aacute;c hoạt động chạy tuần tự theo từng d&ograve;ng. Nhưng đừng qu&ecirc;n rằng async/await vẫn chạy c&aacute;c promise thực tế v&agrave; gọi <code>.then()</code> cho bạn.
Nếu bạn chưa biết g&igrave; về <code>async/await</code>, <a href="https://tek4.vn/">Tek4</a> khuyến nghị bạn tiếp tục sử dụng promise giống như trong c&aacute;c chương trước.
H&atilde;y xem lại v&iacute; dụ từ đ&acirc;̀u chương:
<pre class="language-js" data-content="import%20%7BuseEffect%2C%20useState%7D%20from%20%22react%22%3B%0A%0Afunction%20App()%20%7B%0A%20%20%20%20const%20%5Busers%2C%20setUsers%5D%20%3D%20useState()%3B%0A%0A%20%20%20%20useEffect(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20fetch(%22https%3A%2F%2Fcourse-assets.tek4.vn%2Freactjs-assets%2Fusers.json%22)%0A%20%20%20%20%20%20%20%20.then(response%20%3D%3E%20response.json())%0A%20%20%20%20%20%20%20%20.then(data%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20setUsers(data)%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%2C%20%5B%5D)%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {useEffect, useState} from "react";

function App() {
 const [users, setUsers] = useState();

 useEffect(() =&gt; {
 fetch("https://course-assets.tek4.vn/reactjs-assets/users.json")
 .then(response =&gt; response.json())
 .then(data =&gt; {
 setUsers(data);
 });
 }, []);
}</code></pre>
Để sử dụng <code>async/await</code>, ch&uacute;ng ta cần đặt tiền tố <code>async</code> trước khai b&aacute;o h&agrave;m để c&oacute; thể sử dụng từ kh&oacute;a <code>await</code>. Tuy nhi&ecirc;n, h&agrave;m <code>async</code> l&agrave; một h&agrave;m trả về Promise.
Điều n&agrave;y kh&ocirc;ng ph&ugrave; hợp với c&aacute;ch React xử l&yacute; <code>useEffect</code>. React chỉ muốn bạn trả về một h&agrave;m cleanup (dọn dẹp).
V&igrave; vậy, đoạn code dưới đ&acirc;y KH&Ocirc;NG hoạt động:
<pre class="language-js" data-content="useEffect(async%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20this%20will%20break%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>useEffect(async () =&gt; {
 // this will break
});</code></pre>
Thay v&agrave;o đ&oacute;, ch&uacute;ng ta cần giữ <code>useEffect</code> như một h&agrave;m th&ocirc;ng thường v&agrave; tạo một h&agrave;m kh&aacute;c b&ecirc;n trong n&oacute; c&oacute; thể được gọi ngay lập tức (c&ograve;n gọi l&agrave; Immediately Invoked Function Expression):
<pre class="language-js" data-content="useEffect(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20this%20is%20a%20function%20that%20will%20execute%20immediately%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; {
 (() =&gt; {
 // this is a function that will execute immediately
 })();
});</code></pre>
H&atilde;y ph&acirc;n t&iacute;ch h&agrave;m:
<pre class="language-js" data-content="%2F%2F%201)%20function%20definition%3A%0A()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%0A%7D%0A%0A%2F%2F%202)%20wrap%20it%20with%20parentheses%0A(()%20%3D%3E%20%7B%0A%0A%7D)%0A%0A%2F%2F%203)%20call%20this%20function%20with%20()%0A(()%20%3D%3E%20%7B%0A%0A%7D)()%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>// 1) function definition:
() =&gt; {
 
}

// 2) wrap it with parentheses
(() =&gt; {

})

// 3) call this function with ()
(() =&gt; {

})();</code></pre>
L&yacute; do ta thực hiện tất cả c&aacute;c bước tr&ecirc;n l&agrave; v&igrave; ta muốn biến h&agrave;m mới th&agrave;nh h&agrave;m <code>async</code> trả về một promise, m&agrave; kh&ocirc;ng cần trả về bất cứ thứ g&igrave; từ h&agrave;m được truyền v&agrave;o <code>useEffect</code>.
B&acirc;y giờ ch&uacute;ng ta cần l&agrave;m cho h&agrave;m mới trở th&agrave;nh h&agrave;m <code>async</code> bằng c&aacute;ch th&ecirc;m từ kh&oacute;a <code>async</code> v&agrave;o đầu h&agrave;m:
<pre class="language-js" data-content="useEffect(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0(async%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20we%20can%20use%20await%20here%20%E2%9C%85%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; {
 (async () =&gt; {
 // we can use await here ✅
 })();
});</code></pre>
V&agrave; cuối c&ugrave;ng, với mọi h&agrave;m trả về promise (v&iacute; dụ: <code>fetch</code> v&agrave; <code>response.json()</code>), ch&uacute;ng ta c&oacute; thể th&ecirc;m từ kh&oacute;a <code>await</code> v&agrave;o trước v&agrave; loại bỏ <code>.then()</code>.
<pre class="language-js" data-content="import%20%7BuseEffect%2C%20useState%7D%20from%20%22react%22%3B%0A%0Afunction%20App()%20%7B%0A%20%20%20%20const%20%5Busers%2C%20setUsers%5D%20%3D%20useState()%3B%0A%0A%20%20%20%20useEffect(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20(async%20()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20response%20%3D%20await%20fetch(%22https%3A%2F%2Fcourse-assets.tek4.vn%2Freactjs-assets%2Fusers.json%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20data%20%3D%20await%20response.json()%0A%20%20%20%20%20%20%20%20%20%20%20%20setUsers(data)%3B%0A%20%20%20%20%20%20%20%20%7D)()%3B%0A%20%20%20%20%7D%2C%20%5B%5D)%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {useEffect, useState} from "react";

function App() {
 const [users, setUsers] = useState();

 useEffect(() =&gt; {
 (async () =&gt; {
 const response = await fetch("https://course-assets.tek4.vn/reactjs-assets/users.json")
 const data = await response.json()
 setUsers(data);
 })();
 }, []);
}</code></pre>
B&acirc;y giờ ch&uacute;ng ta c&oacute; thể đọc code từng d&ograve;ng.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Để sử dụng <code>await</code>, ch&uacute;ng ta cần đặt n&oacute; b&ecirc;n trong h&agrave;m <code>async</code>.</li>
<li style="font-weight: 400;" aria-level="1">Bạn kh&ocirc;ng thể biến một h&agrave;m được truyền v&agrave;o <code>useEffect</code> th&agrave;nh h&agrave;m <code>async</code> v&igrave; điều đ&oacute; sẽ khiến n&oacute; sẽ trả về một Promise, trong khi React mong đợi gi&aacute; trị trả về l&agrave; <code>undefined</code> hoặc một h&agrave;m dọn dẹp.</li>
<li style="font-weight: 400;" aria-level="1">Thay v&agrave;o đ&oacute;, ch&uacute;ng ta n&ecirc;n th&ecirc;m một biểu thức h&agrave;m async được gọi ngay lập tức b&ecirc;n trong <code>useEffect</code>.</li>
</ul>

Fetch với async/await