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

Cannot read property X of undefined (Kh&ocirc;ng thể đọc trường thuộc t&iacute;nh X của undefined) l&agrave; một trong những lỗi phổ biến nhất m&agrave; bạn gặp phải khi l&agrave;m việc với Fetch API trong React.
Dưới đ&acirc;y l&agrave; một v&iacute; dụ về code lỗi:
<pre class="language-js" data-content="import%20%7BuseState%2C%20useEffect%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%20console.log(data)%3B%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%20%20%20%20%0A%20%20%20%20%2F%2F%20%E2%9D%8C%20This%20will%20throw%20an%20error%0A%20%20%20%20return%20%3Ch1%3EThere%20are%20%7Busers.length%7D%20users%3C%2Fh1%3E%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 [users, setUsers] = useState();

 useEffect(() =&gt; {
 fetch("https://course-assets.tek4.vn/reactjs-assets/users.json")
 .then(response =&gt; response.json())
 .then(data =&gt; {
 console.log(data);
 setUsers(data);
 });
 }, []);
 
 // ❌ This will throw an error
 return &lt;h1&gt;There are {users.length} users&lt;/h1&gt;
}</code></pre>
Code tr&ecirc;n sẽ đưa ra th&ocirc;ng b&aacute;o lỗi: Cannot read property 'length' of undefined.
Điều n&agrave;y c&oacute; nghĩa l&agrave; trong biểu thức <code>users.length</code>, <code>users</code> c&oacute; gi&aacute; trị l&agrave; <code>undefined</code>, v&igrave; vậy ch&uacute;ng ta kh&ocirc;ng thể truy cập <code>.length</code> tr&ecirc;n n&oacute; v&igrave; điều đ&oacute; tương đương với việc chạy <code>undefined.length</code>.
<h2 style="text-align: justify;">Tại sao code gặp lỗi?</h2>
Code gặp lỗi v&igrave; v&agrave;o lần hiển thị đầu ti&ecirc;n của component, gi&aacute; trị của users l&agrave; undefined do khai b&aacute;o <code>useState</code> như sau: <code>const [users, setUsers] = useState();</code>.
Bạn phải nhớ rằng <code>setUsers(data)</code> được gọi b&ecirc;n trong <code>.then()</code> sẽ thực thi v&agrave;o một thời điểm trong tương lai.
V&igrave; vậy, ở lần hiển thị đầu ti&ecirc;n của component <code>App</code>, <code>users</code> l&agrave; <code>undefined</code> v&agrave; việc cố gắng truy cập <code>users.length</code> sẽ g&acirc;y ra lỗi. Khi fetch ho&agrave;n th&agrave;nh v&agrave; ch&uacute;ng ta nhận được dữ liệu v&agrave; gọi <code>setUsers(data)</code>, <code>users.length</code> mới trở th&agrave;nh gi&aacute; trị hợp lệ. Tuy nhi&ecirc;n, component đ&atilde; bị lỗi trước đ&oacute;.
<h2 style="text-align: justify;">C&aacute;ch khắc phục vấn đề</h2>
C&oacute; nhiều c&aacute;ch để giải quyết vấn đề n&agrave;y, t&ugrave;y thuộc v&agrave;o nhiệm vụ của component. Dưới đ&acirc;y l&agrave; hai phương ph&aacute;p m&agrave; bạn c&oacute; thể sử dụng:
<h3 style="text-align: justify;">1. Kết xuất c&oacute; điều kiện</h3>
Kết xuất c&oacute; điều kiện l&agrave; một chủ đề đ&atilde; từng được đề cập trong chương 19. N&oacute;i ngắn gọn, bạn th&ecirc;m một điều kiện if v&agrave; trả về JSX kh&aacute;c dựa tr&ecirc;n một điều kiện n&agrave;o đ&oacute;.
Trong v&iacute; dụ tr&ecirc;n, ch&uacute;ng ta kiểm tra <code>if (!users)</code> (hoặc <code>if (users === undefined)</code>) v&agrave; trả về <code>null</code> hoặc th&ocirc;ng b&aacute;o như <code>Loading...</code>:
<pre class="language-js" data-content="import%20%7BuseState%2C%20useEffect%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%20console.log(data)%3B%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%20%20%20%20%0A%20%20%20%20if%20(!users)%20%7B%0A%20%20%20%20%20%20%20%20return%20null%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20return%20%3Ch1%3EThere%20are%20%7Busers.length%7D%20users%3C%2Fh1%3E%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 [users, setUsers] = useState();

 useEffect(() =&gt; {
 fetch("https://course-assets.tek4.vn/reactjs-assets/users.json")
 .then(response =&gt; response.json())
 .then(data =&gt; {
 console.log(data);
 setUsers(data);
 });
 }, []);
 
 if (!users) {
 return null;
 }

 return &lt;h1&gt;There are {users.length} users&lt;/h1&gt;
}</code></pre>
<h3 style="text-align: justify;">2. To&aacute;n tử logic &amp;&amp;&nbsp;</h3>
Chủ đề n&agrave;y sẽ được giải th&iacute;ch trong b&agrave;i học tiếp theo!
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Cố gắng truy cập v&agrave;o một đối tượng/mảng được trả về từ API fetch trước khi fetch ho&agrave;n th&agrave;nh l&agrave; một lỗi phổ biến khi sử dụng fetch.</li>
<li style="font-weight: 400;" aria-level="1">Để tr&aacute;nh gặp lỗi n&agrave;y, bạn c&oacute; thể th&ecirc;m một điều kiện if v&agrave; trả về JSX kh&aacute;c (kết xuất c&oacute; điều kiện).</li>
</ul>