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 tải dữ liệu từ mạng bằng Fetch API, việc hiển thị tr&igrave;nh tải (loader) l&agrave; một phần quan trọng trong giao diện người d&ugrave;ng, đ&oacute; l&agrave; một chỉ b&aacute;o h&igrave;nh ảnh cho người d&ugrave;ng biết rằng dữ liệu đang được t&igrave;m nạp từ mạng v&agrave; họ n&ecirc;n đợi một ch&uacute;t.
Kh&ocirc;ng phải tất cả c&aacute;c trường hợp đều cần sử dụng tr&igrave;nh tải. Tuy nhi&ecirc;n, một quy tắc chung l&agrave; khi nội dung ch&iacute;nh m&agrave; người d&ugrave;ng muốn xem đang được tải th&igrave; ta n&ecirc;n sử dụng tr&igrave;nh tải. Dưới đ&acirc;y l&agrave; một v&iacute; dụ:
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/8bf3f7f2-4401-4782-87f6-5c9e75b8798a" alt="twitter-loader" />
H&atilde;y nhớ rằng khi ph&aacute;t triển ứng dụng tr&ecirc;n m&aacute;y t&iacute;nh của bạn, bạn c&oacute; thể c&oacute; kết nối nhanh. Tuy nhi&ecirc;n, người d&ugrave;ng c&oacute; thể c&oacute; kết nối chậm hơn hoặc duyệt ứng dụng tr&ecirc;n điện thoại. Kết nối di động thường chậm hơn so với Wi-Fi ở nh&agrave; hoặc nơi l&agrave;m việc.
<h2 style="text-align: justify;">L&agrave;m thế n&agrave;o để hiển thị tr&igrave;nh tải?</h2>
Ch&uacute;ng ta cần biết khi n&agrave;o y&ecirc;u cầu fetch bắt đầu v&agrave; kết th&uacute;c để hiển thị tr&igrave;nh tải. Ch&uacute;ng ta cần một biến trạng th&aacute;i để theo d&otilde;i điều n&agrave;y.
V&igrave; vậy, ch&uacute;ng ta bắt đầu bằng c&aacute;ch định nghĩa một biến trạng th&aacute;i cho biết y&ecirc;u cầu fetch c&oacute; đang tải hay kh&ocirc;ng; ch&uacute;ng ta sẽ gọi biến l&agrave; <code>isLoading</code> v&agrave; đặt gi&aacute; trị mặc định l&agrave; <code>false</code>:
<pre class="language-js" data-content="%2F%2F%20inside%20a%20React%20component%0Aconst%20%5BisLoading%2C%20setIsLoading%5D%20%3D%20useState(false)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>// inside a React component
const [isLoading, setIsLoading] = useState(false);</code></pre>
<h3 style="text-align: justify;">Bắt đầu tải</h3>
Ch&uacute;ng ta cần gọi <code>setIsLoading(true)</code> ngay khi y&ecirc;u cầu fetch&nbsp;bắt đầu, v&iacute; dụ:
<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%5BisLoading%2C%20setIsLoading%5D%20%3D%20useState(false)%3B%0A%0A%20%20%20%20useEffect(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20setIsLoading(true)%3B%20%2F%2F%20start%20the%20loader%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%20console.log(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 [isLoading, setIsLoading] = useState(false);

 useEffect(() =&gt; {
 setIsLoading(true); // start the loader
 fetch("https://course-assets.tek4.vn/reactjs-assets/users.json")
 .then(response =&gt; response.json())
 .then(data =&gt; {
 console.log(data);
 });
 }, []);
}</code></pre>
Trong trường hợp n&agrave;y, v&igrave; component sẽ thực hiện y&ecirc;u cầu fetch c&agrave;ng sớm c&agrave;ng tốt, bạn c&oacute; thể thay đổi <code>useState(false)</code> th&agrave;nh <code>useState(true)</code>, khi đ&oacute; bạn kh&ocirc;ng cần bắt đầu tr&igrave;nh tải trước cuộc gọi <code>fetch</code>. Dưới đ&acirc;y l&agrave; c&aacute;ch triển khai:
<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%5BisLoading%2C%20setIsLoading%5D%20%3D%20useState(true)%3B%20%2F%2F%20create%20and%20start%20the%20loader%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%20console.log(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 [isLoading, setIsLoading] = useState(true); // create and start the loader

 useEffect(() =&gt; {
 fetch("https://course-assets.tek4.vn/reactjs-assets/users.json")
 .then(response =&gt; response.json())
 .then(data =&gt; {
 console.log(data);
 });
 }, []);
}</code></pre>
<h3 style="text-align: justify;">Dừng tải</h3>
Đoạn code tr&ecirc;n sẽ thiết lập <code>isLoading</code> th&agrave;nh <code>true</code> v&agrave; kh&ocirc;ng bao giờ dừng tr&igrave;nh tải. Đ&acirc;y l&agrave; l&yacute; do tại sao ch&uacute;ng ta cần dừng tr&igrave;nh tải khi nhận được phản hồi.
Tuy nhi&ecirc;n, ch&uacute;ng ta cũng n&ecirc;n dừng tr&igrave;nh tải trong trường hợp y&ecirc;u cầu fetch bị lỗi, v&igrave; vậy ch&uacute;ng ta cần gọi <code>setIsLoading(false)</code> trong <code>.then()</code> v&agrave; <code>.catch()</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%5BisLoading%2C%20setIsLoading%5D%20%3D%20useState(true)%3B%20%2F%2F%20create%20and%20start%20the%20loader%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%20setIsLoading(false)%3B%20%2F%2F%20stop%20the%20loader%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log(data)%3B%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%20%20%20%20.catch(error%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20setIsLoading(false)%3B%20%2F%2F%20stop%20the%20loader%0A%20%20%20%20%20%20%20%20%20%20%20%20console.error(error)%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 [isLoading, setIsLoading] = useState(true); // create and start the loader

 useEffect(() =&gt; {
 fetch("https://course-assets.tek4.vn/reactjs-assets/users.json")
 .then(response =&gt; response.json())
 .then(data =&gt; {
 setIsLoading(false); // stop the loader
 console.log(data);
 })
 .catch(error =&gt; {
 setIsLoading(false); // stop the loader
 console.error(error);
 });
 }, []);
}</code></pre>
T&oacute;m lại, đ&acirc;y l&agrave; c&aacute;ch xử l&yacute; tải fetch. Tuy nhi&ecirc;n, ch&uacute;ng ta sẽ t&igrave;m hiểu một c&aacute;ch hiệu quả hơn ch&uacute;t trong b&agrave;i học tiếp theo.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Một quy tắc chung l&agrave; khi nội dung ch&iacute;nh m&agrave; người d&ugrave;ng muốn xem đang được tải th&igrave; ta n&ecirc;n sử dụng tr&igrave;nh tải.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Tr&igrave;nh tải l&agrave; một th&agrave;nh phần quan trọng đối với người d&ugrave;ng c&oacute; kết nối chậm v&agrave; sử dụng kết nối di động.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Để hiển thị tr&igrave;nh tải, ch&uacute;ng ta cần c&oacute; một biến trạng th&aacute;i để theo d&otilde;i xem y&ecirc;u cầu c&oacute; đang tải hay kh&ocirc;ng. V&iacute; dụ: một biến trạng th&aacute;i t&ecirc;n l&agrave; <code>isLoading</code>.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Để bắt đầu tr&igrave;nh tải, ch&uacute;ng ta cần gọi <code>setIsLoading(true)</code> khi y&ecirc;u cầu fetch bắt đầu.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Để dừng tr&igrave;nh tải, ch&uacute;ng ta cần gọi <code>setIsLoading(false)</code> khi y&ecirc;u cầu fetch ho&agrave;n th&agrave;nh th&agrave;nh c&ocirc;ng hoặc gặp lỗi.</li>
</ul>

Xử lý tải dữ liệu bằng fetch