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

Một ứng dụng được x&acirc;y dựng bằng React sẽ c&oacute; nhiều component.
Quy ước l&agrave; định nghĩa một component trong mỗi file ri&ecirc;ng biệt để sau n&agrave;y dễ d&agrave;ng t&igrave;m thấy n&oacute; (c&oacute; một số ngoại lệ, nhưng hiện tại bạn chưa cần để &yacute; đến những ngoại lệ n&agrave;y).
T&ecirc;n file phải khớp với t&ecirc;n Component, v&iacute; dụ:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">file: <code>Footer.js</code> cho Component <code>Footer</code></li>
<li style="font-weight: 400;" aria-level="1">file: <code>AppNavbar.js</code> cho Component <code>AppNavbar</code></li>
</ul>
<h2 style="text-align: justify;">index.js</h2>
Ứng dụng sẽ c&oacute; một file <code>index.js</code> l&agrave; điểm m&agrave; qu&aacute; tr&igrave;nh chạy ứng dụng bắt đầu (đ&ocirc;i khi được gọi l&agrave; <code>app.js</code>).
V&igrave; vậy, bạn sẽ định nghĩa c&aacute;c component trong những file kh&aacute;c v&agrave; sau đ&oacute; sử dụng ch&uacute;ng trong index.js.
<h2 style="text-align: justify;">V&iacute; dụ</h2>
H&atilde;y xem một v&iacute; dụ bằng c&aacute;ch sử dụng hai file: <code>Footer.js</code> v&agrave; <code>index.js</code>:
File <code>Footer.js</code> định nghĩa component Footer:
<pre class="language-js" data-content="%2F%2FFooter.js%0Aexport%20default%20function%20Footer()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20(%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3C%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Ch3%3EFooter%3C%2Fh3%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cp%3EAll%20rights%20reserved%3C%2Fp%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3C%2F%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0)%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>//Footer.js
export default function Footer() {
 return (
 &lt;&gt;
 &lt;h3&gt;Footer&lt;/h3&gt;
 &lt;p&gt;All rights reserved&lt;/p&gt;
 &lt;/&gt;
 );
}</code></pre>
Để &yacute; file n&agrave;y sử dụng default export để khai b&aacute;o component Footer.
Điều n&agrave;y l&agrave; bắt buộc để c&oacute; thể sử dụng component Footer trong c&aacute;c file kh&aacute;c.
<pre class="language-js" data-content="%2F%2Findex.js%0Aimport%20%7BcreateRoot%7D%20from%20%22react-dom%2Fclient%22%3B%0Aimport%20Footer%20from%20%22.%2FFooter.js%22%3B%0A%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20(%3C%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3CFooter%20%2F%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3CFooter%20%2F%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2F%3E)%3B%0A%7D%0A%0Aconst%20root%20%3D%20document.querySelector(%22%23root%22)%3B%0A%0AcreateRoot(root).render(%3CApp%20%2F%3E)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>//index.js
import {createRoot} from "react-dom/client";
import Footer from "./Footer.js";

function App() {
 return (&lt;&gt;
 &lt;Footer /&gt;
 &lt;Footer /&gt;
 &lt;/&gt;);
}

const root = document.querySelector("#root");

createRoot(root).render(&lt;App /&gt;);</code></pre>
Để &yacute; component Footer đ&atilde; được th&ecirc;m v&agrave;o file <code>index.js</code> từ <code>./Footer.js</code> để file c&oacute; thể sử dụng component.
Điều đ&oacute; l&agrave; v&igrave; <code>&lt;Footer /&gt;</code> được chuyển đổi th&agrave;nh: <code>React.createElement(Footer, {})</code> v&igrave; vậy để component hoạt động, h&agrave;m Footer phải c&oacute; phạm vi hoạt động trong file <code>index.js</code>, tức l&agrave; n&oacute; phải được th&ecirc;m v&agrave;o file.
Ngo&agrave;i ra, đoạn code hiển thị Footer hai lần bằng c&aacute;ch sử dụng component hai lần trong component App.
<h2 style="text-align: justify;">Lu&ocirc;n đặt t&ecirc;n cho c&aacute;c th&agrave;nh phần được xuất</h2>
Mặc d&ugrave; bạn c&oacute; thể xuất một component function m&agrave; kh&ocirc;ng cần đặt t&ecirc;n (h&agrave;m ẩn danh), bạn vẫn n&ecirc;n đặt t&ecirc;n c&aacute;c th&agrave;nh phần được xuất. Điều n&agrave;y sẽ gi&uacute;p dễ d&agrave;ng gỡ lỗi code v&igrave; bạn sẽ thấy t&ecirc;n component khi c&oacute; lỗi xảy ra b&ecirc;n trong n&oacute;, thay v&igrave; chỉ thấy lỗi trong h&agrave;m ẩn danh.
<pre class="language-js" data-content="%2F%2FFooter.js%0A%2F%2F%20this%20is%20NOT%20recommended%C2%A0%0Aexport%20default%20function%20()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20(%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Ch3%3EFooter%3C%2Fh3%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0)%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>//Footer.js
// this is NOT recommended 
export default function () {
 return (
 &lt;h3&gt;Footer&lt;/h3&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">Định nghĩa một component trong mỗi file ri&ecirc;ng biệt để dễ gỡ lỗi code hơn.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">T&ecirc;n file cần khớp với t&ecirc;n Component.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Để sử dụng một Component đ&atilde; được định nghĩa, bạn cần xuất n&oacute; ra.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Để sử dụng một Component được định nghĩa trong file kh&aacute;c, bạn cần th&ecirc;m n&oacute; v&agrave;o file hiện tại.</li>
</ul>

Quy tắc code: Một file chỉ chứa 1 Component