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

B&agrave;i học trước đ&atilde; giới thiệu việc sử dụng <code>fetch</code> b&ecirc;n trong React.
Mặc d&ugrave; c&oacute; vẻ như đ&oacute; l&agrave; một giải ph&aacute;p ho&agrave;n chỉnh nhưng vẫn c&oacute; một số điểm cần lưu &yacute;, c&aacute;c t&igrave;nh huống đặc biệt v&agrave; những vấn đề kh&aacute;c bạn cần xem x&eacute;t. Ch&uacute;ng ta sẽ b&agrave;n về những nội dung n&agrave;y trong c&aacute;c chương sau.
Trong b&agrave;i học n&agrave;y, ch&uacute;ng ta sẽ tập trung v&agrave;o một trong những lưu &yacute; chung: c&aacute;ch tr&aacute;nh tạo ra v&ograve;ng lặp v&ocirc; hạn khi sử dụng fetch API.
V&iacute; dụ dưới đ&acirc;y KH&Ocirc;NG n&ecirc;n được sử dụng:
<pre class="language-js" data-content="import%20%7BuseState%2C%20useEffect%7D%20from%20%22react%22%3B%0A%0Afunction%20App()%20%7B%0A%20%20const%20%5Bstate%2C%20setState%5D%20%3D%20useState(Math.random())%3B%0A%20%20%0A%20%20useEffect(()%20%3D%3E%20%7B%0A%20%20%20%20fetch(%22https%3A%2F%2Fcourse-assets.tek4.vn%2Freactjs-assets%2Fusers.json%22)%0A%20%20%20%20.then(response%20%3D%3E%20response.json())%0A%20%20%20%20.then(data%20%3D%3E%20%7B%0A%20%20%20%20%20%20console.log(data)%3B%0A%20%20%20%20%20%20setState(data)%3B%20%2F%2F%20!!!%20%E2%9D%8C%20this%20creates%20an%20infinite%20loop%20in%20this%20example%20!!!%0A%20%20%20%20%7D)%3B%0A%20%20%7D)%3B%20%2F%2F%20!!!%20because%20the%20effect%20runs%20on%20every%20re-render%20!!!%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 [state, setState] = useState(Math.random());
 
 useEffect(() =&gt; {
 fetch("https://course-assets.tek4.vn/reactjs-assets/users.json")
 .then(response =&gt; response.json())
 .then(data =&gt; {
 console.log(data);
 setState(data); // !!! ❌ this creates an infinite loop in this example !!!
 });
 }); // !!! because the effect runs on every re-render !!!
}</code></pre>
V&iacute; dụ tr&ecirc;n tạo ra một v&ograve;ng lặp v&ocirc; hạn; dưới đ&acirc;y l&agrave; l&yacute; do:
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Component được hiển thị</li>
<li style="font-weight: 400;" aria-level="1"><code>useEffect</code> chạy. Gọi fetch API tới <code>users.json</code>.</li>
<li style="font-weight: 400;" aria-level="1">Phản hồi từ m&aacute;y chủ đến v&agrave; được chuyển đổi th&agrave;nh JSON. Ch&uacute;ng ta gọi <code>setState(data)</code>.</li>
<li style="font-weight: 400;" aria-level="1"><code>setState</code> sẽ k&iacute;ch hoạt việc hiển thị lại component <code>&lt;App /&gt;</code>. React chạy lại h&agrave;m.</li>
<li style="font-weight: 400;" aria-level="1">C&ugrave;ng <code>useEffect</code> sẽ chạy lại. Gọi fetch API tới <code>users.json</code>. V&agrave; cứ tiếp tục như vậy.</li>
</ol>
Code sẽ tiếp tục chạy <code>effect</code>, gọi <code>setState</code>, dẫn đến việc gọi lại <code>effect</code>.
Vấn đề n&agrave;y c&oacute; thể được giải quyết bằng c&aacute;ch chỉ định <code>[]</code> l&agrave;m phụ thuộc của <code>useEffect</code>.
Trong những b&agrave;i học tiếp theo, ch&uacute;ng ta sẽ xem x&eacute;t những v&iacute; dụ kh&aacute;c cần chỉ định một phụ thuộc cho <code>useEffect</code>.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Nếu bạn qu&ecirc;n chỉ định phụ thuộc của effect v&agrave; c&oacute; một cuộc gọi <code>setState</code> b&ecirc;n trong effect, bạn sẽ gặp phải v&ograve;ng lặp v&ocirc; hạn.</li>
</ul>
&nbsp;
C&aacute;c b&agrave;i tập trở n&ecirc;n th&uacute; vị hơn khi ch&uacute;ng ta sử dụng fetch API.
<h2 style="text-align: justify;">Bỏ qua y&ecirc;u cầu fetch trong chế độ ph&aacute;t triển</h2>
T&agrave;i liệu Beta của React đề xuất tạo một biến boolean <code>ignore</code> để bỏ qua y&ecirc;u cầu fetch tr&ugrave;ng lặp. Tuy nhi&ecirc;n, <a href="https://tek4.vn/">Tek4</a> khuy&ecirc;n bạn n&ecirc;n sử dụng <code>useSWR</code> (hoặc đợi hook <code>use</code> mới) thay v&igrave; đ&oacute;ng g&oacute;i tất cả c&aacute;c cuộc gọi fetch bằng logic n&agrave;y, v&igrave; code sẽ nhanh ch&oacute;ng trở n&ecirc;n phức tạp.
Bạn c&oacute; thể tham khảo c&aacute;ch bỏ qua y&ecirc;u cầu fetch tr&ugrave;ng lặp tr&ecirc;n t&agrave;i liệu beta của React.
Trong chương tiếp theo, ch&uacute;ng ta sẽ học c&aacute;ch hiển thị một tr&igrave;nh tải/th&ocirc;ng b&aacute;o tải khi cuộc gọi fetch đang tải v&agrave; thảo luận về một lưu &yacute; chung kh&aacute;c khi sử dụng fetch trong React.

Tránh vòng lặp vô hạn