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

<code>fetch</code> API l&agrave; một API của tr&igrave;nh duyệt (tức l&agrave; một chức năng c&oacute; sẵn trong tr&igrave;nh duyệt) cho ph&eacute;p bạn thực hiện y&ecirc;u cầu mạng đến m&aacute;y chủ kh&aacute;c.
Ứng dụng phổ biến nhất của <code>fetch</code> API khi x&acirc;y dựng ứng dụng (web) l&agrave; gửi v&agrave; nhận dữ liệu từ backend/API.
<code>fetch</code> API trả về một promise, v&igrave; vậy ch&uacute;ng ta phải xử l&yacute; n&oacute;.
Dưới đ&acirc;y l&agrave; một v&iacute; dụ sử dụng API fetch để GET dữ liệu từ backend/API: <a href="https://course-assets.tek4.vn/reactjs-assets/users.json">https://course-assets.tek4.vn/reactjs-assets/users.json</a>
<pre class="language-js" data-content="fetch(%22https%3A%2F%2Fcourse-assets.tek4.vn%2Freactjs-assets%2Fusers.json%22)%0A.then(response%20%3D%3E%20response.json())%0A.then(data%20%3D%3E%20%7B%0A%20%20%20%20console.log(data)%3B%0A%7D)%3B%0A" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>fetch("https://course-assets.tek4.vn/reactjs-assets/users.json")
.then(response =&gt; response.json())
.then(data =&gt; {
 console.log(data);
});
</code></pre>
C&oacute; bốn điều cần lưu &yacute; ở đ&acirc;y:
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Cuộc gọi <code>fetch()</code> trả về một promise, v&igrave; vậy ta xử l&yacute; n&oacute; bằng <code>.then()</code>.</li>
<li style="font-weight: 400;" aria-level="1"><code>response</code> m&agrave; ta nhận được từ <code>fetch</code> l&agrave; một phản hồi chung, v&igrave; vậy ta cần chuyển đổi n&oacute; th&agrave;nh đối tượng JSON bằng c&aacute;ch gọi <code>response.json()</code>.</li>
<li style="font-weight: 400;" aria-level="1"><code>response.json()</code> cũng trả về một promise, v&igrave; vậy ta cần xử l&yacute; n&oacute; một lần nữa bằng <code>.then()</code>.</li>
<li style="font-weight: 400;" aria-level="1">Lu&ocirc;n lu&ocirc;n bắt đầu bằng <code>console.log(data)</code> v&igrave; mỗi backend/API sẽ trả về dữ liệu kh&aacute;c nhau dựa tr&ecirc;n mục đ&iacute;ch của API đ&oacute;.</li>
</ol>
Cấu tr&uacute;c cơ bản của <code>fetch</code> như sau:
<pre class="language-js" data-content="fetch(URL)%0A.then(response%20%3D%3E%20response.json())%0A.then(data%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(data)%3B%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>fetch(URL)
.then(response =&gt; response.json())
.then(data =&gt; {
 console.log(data);
});</code></pre>
Bạn c&oacute; thể th&ecirc;m đoạn code tr&ecirc;n v&agrave;o phần đ&aacute;nh dấu để sử dụng khi cần thiết.
<h2 style="text-align: justify;">Ch&uacute;ng ta c&oacute; cần Axios kh&ocirc;ng?</h2>
Nhiều kh&oacute;a học trực tuyến khuyến nghị bạn tải xuống g&oacute;i axios để sử dụng <code>fetch</code> API. Tuy nhi&ecirc;n, điều n&agrave;y ho&agrave;n to&agrave;n kh&ocirc;ng cần thiết.
Việc sử dụng <code>axios</code> chỉ r&uacute;t bớt 1 d&ograve;ng code cho đoạn code tr&ecirc;n, tuy nhi&ecirc;n, trong suốt kh&oacute;a học n&agrave;y, <a href="https://tek4.vn/">Tek4</a> sẽ hướng dẫn bạn c&aacute;ch viết hook của ri&ecirc;ng m&igrave;nh, được gọi l&agrave; <code>useFetch</code>, đ&oacute; cũng l&agrave; l&yacute; do tại sao bạn KH&Ocirc;NG cần phải sử dụng <code>axios</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"><code>fetch(url)</code> trả về một promise xử l&yacute; response.</li>
<li style="font-weight: 400;" aria-level="1">response l&agrave; một phản hồi chung cần được chuyển đổi th&agrave;nh JSON bằng <code>response.json()</code>.</li>
<li style="font-weight: 400;" aria-level="1"><code>response.json()</code> cũng trả về một promise cần được xử l&yacute;.</li>
<li style="font-weight: 400;" aria-level="1">Lu&ocirc;n lu&ocirc;n bắt đầu bằng <code>console.log(data)</code> v&igrave; mỗi backend/API trả về dữ liệu kh&aacute;c nhau.</li>
<li style="font-weight: 400;" aria-level="1">Bạn KH&Ocirc;NG cần sử dụng <code>axios</code>. <code>fetch</code> API đ&atilde; đủ mạnh mẽ v&agrave; hook <code>useFetch</code> sẽ l&agrave;m cho việc viết code trở n&ecirc;n dễ d&agrave;ng hơn.</li>
</ul>
Trong chương n&agrave;y, ch&uacute;ng ta đ&atilde; xem qua c&aacute;ch lấy dữ liệu từ backend/API bằng <code>fetch</code> API. Trong chương tiếp theo, ch&uacute;ng ta sẽ học c&aacute;ch sử dụng <code>fetch</code> API trong c&aacute;c component React.

Fetch API