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

Đ&ocirc;i khi bạn kh&ocirc;ng muốn hiển thị một JSX mới ho&agrave;n to&agrave;n m&agrave; chỉ muốn bỏ qua việc hiển thị một phần của JSX phụ thuộc v&agrave;o <code>data</code> từ API. V&iacute; dụ:
<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%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%20This%20will%20throw%20an%20ERROR%0A%20%20%20%20return%20%3C%3E%0A%20%20%20%20%20%20%20%20%3Ch1%3EUsers%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Busers.map(user%20%3D%3E%20%3Cli%20key%3D%7Buser.id%7D%3E%7Buser.name%7D%3C%2Fli%3E)%7D%0A%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%3C%2F%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; {
 setUsers(data);
 });
 }, []);
 
 // This will throw an ERROR
 return &lt;&gt;
 &lt;h1&gt;Users&lt;/h1&gt;
 &lt;ul&gt;
 {users.map(user =&gt; &lt;li key={user.id}&gt;{user.name}&lt;/li&gt;)}
 &lt;/ul&gt;
 &lt;/&gt;
}</code></pre>
Chương tr&igrave;nh sẽ đưa ra th&ocirc;ng b&aacute;o lỗi: <code>Cannot read property 'map' of undefined</code>.
Vậy nếu bạn muốn chặn th&ocirc;ng b&aacute;o lỗi m&agrave; kh&ocirc;ng thay đổi phần hiển thị của component th&igrave; phải l&agrave;m như thế n&agrave;o? Giả sử trước khi <code>users</code> được tải, bạn chỉ muốn component hiển thị JSX sau:
<pre class="language-html" data-content="%3C%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3Ch1%3EUsers%3C%2Fh1%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3Cul%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2Ful%3E%0A%3C%2F%3E" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>&lt;&gt;
 &lt;h1&gt;Users&lt;/h1&gt;
 &lt;ul&gt;
 &lt;/ul&gt;
&lt;/&gt;</code></pre>
Để &yacute; l&agrave; ch&uacute;ng ta bỏ qua <code>users.map(...)</code>.
V&agrave; sau đ&oacute;, khi <code>users</code> đ&atilde; được tải, <code>users.map(...)</code> sẽ được hiển thị.
Đ&acirc;y l&agrave; một t&igrave;nh huống thường gặp v&agrave; c&oacute; thể được giải quyết dễ d&agrave;ng bằng c&aacute;ch sử dụng to&aacute;n tử logic <code>&amp;&amp;</code>.
Bạn c&oacute; thể th&ecirc;m tiền tố <code>users &amp;&amp;</code> trước <code>users.map()</code>, kết quả cuối c&ugrave;ng như sau:
<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%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%20this%20will%20work%20without%20breaking%20%F0%9F%91%8D%0A%20%20%20%20return%20%3C%3E%0A%20%20%20%20%20%20%20%20%3Ch1%3EUsers%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Busers%20%26%26%20users.map(user%20%3D%3E%20%3Cli%20key%3D%7Buser.id%7D%3E%7Buser.name%7D%3C%2Fli%3E)%7D%0A%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%3C%2F%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; {
 setUsers(data);
 });
 }, []);
 
 // this will work without breaking 👍
 return &lt;&gt;
 &lt;h1&gt;Users&lt;/h1&gt;
 &lt;ul&gt;
 {users &amp;&amp; users.map(user =&gt; &lt;li key={user.id}&gt;{user.name}&lt;/li&gt;)}
 &lt;/ul&gt;
 &lt;/&gt;
}</code></pre>
Đoạn code tr&ecirc;n hoạt động l&agrave; v&igrave;:
<ol style="text-align: justify;">
<li> Trước khi 'users' được tải: biểu thức <code>users &amp;&amp; users.map()</code> sẽ gặp xung đột tại <code>users</code>, c&oacute; nghĩa l&agrave; n&oacute; sẽ kh&ocirc;ng tiếp tục thực thi sau <code>&amp;&amp;</code> v&igrave; <code>users</code> trả về <code>undefined</code>. Điều n&agrave;y sẽ ngăn chặn việc thực thi <code>users.map()</code>, tr&aacute;nh g&acirc;y ra lỗi.</li>
</ol>
V&igrave; vậy trước khi <code>users</code> được tải, component <code>App</code> sẽ hiển thị:
<pre class="language-html" data-content="%3C%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3Ch1%3EUsers%3C%2Fh1%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3Cul%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2Ful%3E%0A%3C%2F%3E" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;&gt;
 &lt;h1&gt;Users&lt;/h1&gt;
 &lt;ul&gt;
 &lt;/ul&gt;
&lt;/&gt;</code></pre>
<ol style="text-align: justify;" start="2">
<li> Sau khi 'users' được tải: biểu thức <code>users &amp;&amp; users.map()</code> sẽ được thực thi to&agrave;n bộ v&igrave; <code>users</code> kh&ocirc;ng trả về một gi&aacute; trị falsy (như <code>undefined</code> hoặc <code>false</code>). Do đ&oacute;, <code>users.map()</code> sẽ được gọi.</li>
</ol>
V&igrave; vậy sau khi <code>users</code> được tải, component <code>App</code> sẽ hiển thị:
<pre class="language-html" data-content="%3C%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3Ch1%3EUsers%3C%2Fh1%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3Cul%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7Busers%20%26%26%20users.map(user%20%3D%3E%20%3Cli%20key%3D%7Buser.id%7D%3E%7Buser.name%7D%3C%2Fli%3E)%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2Ful%3E%0A%3C%2F%3E" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;&gt;
 &lt;h1&gt;Users&lt;/h1&gt;
 &lt;ul&gt;
 {users &amp;&amp; users.map(user =&gt; &lt;li key={user.id}&gt;{user.name}&lt;/li&gt;)}
 &lt;/ul&gt;
&lt;/&gt;</code></pre>
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">To&aacute;n tử logic <code>&amp;&amp;</code> c&oacute; thể được sử dụng để tr&aacute;nh hiển thị một phần cụ thể của JSX.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">To&aacute;n tử n&agrave;y gi&uacute;p tr&aacute;nh g&acirc;y lỗi cho component trước khi state được thiết lập sau khi fetch đ&atilde; được xử l&yacute;.</li>
</ul>

Toán tử logic &&