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

Trong b&agrave;i học trước, ch&uacute;ng ta đ&atilde; học c&aacute;ch lồng c&aacute;c route. Component hiển thị c&aacute;c route lồng nhau sẽ c&oacute; một component <code>&lt;Outlet /&gt;</code>.
C&oacute; những t&igrave;nh huống m&agrave; ch&uacute;ng ta cần truyền dữ liệu từ component cha chứa <code>Outlet</code> xuống cho c&aacute;c component con. Một v&iacute; dụ minh họa trường hợp đ&oacute; sẽ được đề cập trong dự &aacute;n tổng kết. Hiện tại, ch&uacute;ng ta sẽ bắt đầu với một v&iacute; dụ cơ bản với biến <code>data</code>, ch&uacute;ng ta muốn truyền biến n&agrave;y cho c&aacute;c component con được hiển thị trong <code>&lt;Outlet /&gt;</code>.
<pre class="language-js" data-content="function%20About()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20we%20want%20to%20make%20this%20available%20to%20the%20%3COutlet%20%2F%3E%20sub-components%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20data%20%3D%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0someValue%3A%20123%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%3B%0A%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%7B%2F*%20Content%20always%20rendered%20when%20the%20URL%20starts%20with%20%2Fabout%20*%2F%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Ch1%3EAbout%3C%2Fh1%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3CLink%20to%3D%22us%22%3EAbout%20us%3C%2FLink%3E%20%7C%C2%A0%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3CLink%20to%3D%22team%22%3EAbout%20the%20team%3C%2FLink%3E%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3COutlet%20%2F%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2F%3E%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function About() {
 // we want to make this available to the &lt;Outlet /&gt; sub-components
 const data = {
 someValue: 123
 };

 return &lt;&gt;
 {/* Content always rendered when the URL starts with /about */}
 &lt;h1&gt;About&lt;/h1&gt;
 &lt;Link to="us"&gt;About us&lt;/Link&gt; | 
 &lt;Link to="team"&gt;About the team&lt;/Link&gt;

 &lt;Outlet /&gt;
 &lt;/&gt;;
}</code></pre>
Để l&agrave;m điều đ&oacute;, ch&uacute;ng ta c&oacute; thể sử dụng thuộc t&iacute;nh <code>context</code> tr&ecirc;n component<code> &lt;Outlet /&gt;</code>, n&oacute; sẽ tự động tạo ra context. Đ&acirc;y l&agrave; một trường hợp sử dụng phổ biến, v&igrave; vậy nh&oacute;m React Router đ&atilde; t&iacute;ch hợp t&iacute;nh năng n&agrave;y v&agrave;o thư viện.
<pre class="language-js" data-content="function%20About()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20we%20want%20to%20make%20this%20available%20to%20the%20%3COutlet%20%2F%3E%20sub-components%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20data%20%3D%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0someValue%3A%20123%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%3B%0A%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%7B%2F*%20Content%20always%20rendered%20when%20the%20URL%20starts%20with%20%2Fabout%20*%2F%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Ch1%3EAbout%3C%2Fh1%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3CLink%20to%3D%22us%22%3EAbout%20us%3C%2FLink%3E%20%7C%C2%A0%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3CLink%20to%3D%22team%22%3EAbout%20the%20team%3C%2FLink%3E%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20pass%20it%20to%20Outlet%20as%20a%20context%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3COutlet%20context%3D%7Bdata%7D%20%2F%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2F%3E%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function About() {
 // we want to make this available to the &lt;Outlet /&gt; sub-components
 const data = {
 someValue: 123
 };

 return &lt;&gt;
 {/* Content always rendered when the URL starts with /about */}
 &lt;h1&gt;About&lt;/h1&gt;
 &lt;Link to="us"&gt;About us&lt;/Link&gt; | 
 &lt;Link to="team"&gt;About the team&lt;/Link&gt;

 // pass it to Outlet as a context
 &lt;Outlet context={data} /&gt;
 &lt;/&gt;;
}</code></pre>
Thuộc t&iacute;nh <code>context</code> n&agrave;y chỉ c&oacute; sẵn trong component <code>&lt;Outlet /&gt;</code> của React Router. Ch&uacute;ng ta kh&ocirc;ng cần phải tạo ngữ cảnh bằng c&aacute;ch thủ c&ocirc;ng bởi React Router đ&atilde; tự động l&agrave;m điều n&agrave;y v&agrave; tạo một context c&oacute; thể được truy cập v&agrave; sử dụng bởi c&aacute;c component con của <code>&lt;Outlet /&gt;</code>.&nbsp;
<h2 style="text-align: justify;">Hook useOutletContext</h2>
Đ&acirc;y l&agrave; l&uacute;c hook <code>useOutletContext</code> trở n&ecirc;n hữu &iacute;ch. Ch&uacute;ng ta c&oacute; thể sử dụng n&oacute; trong bất kỳ component n&agrave;o cần được hiển thị b&ecirc;n trong <code>&lt;Outlet /&gt;</code>. V&iacute; dụ, trong component <code>AboutUs</code>:
<pre class="language-js" data-content="import%20%7BuseOutletContext%7D%20from%20%22react-router-dom%22%3B%0A%0Afunction%20AboutUs()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20context%20%3D%20useOutletContext()%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(context)%3B%20%2F%2F%20%7BsomeValue%3A%20123%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(context.someValue)%3B%20%2F%2F%20123%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20...%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {useOutletContext} from "react-router-dom";

function AboutUs() {
 const context = useOutletContext();
 console.log(context); // {someValue: 123}
 console.log(context.someValue); // 123

 // ...
}</code></pre>
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Ch&uacute;ng ta thường cần truyền dữ liệu cho <code>&lt;Outlet&gt;</code>. Dữ liệu n&agrave;y c&oacute; thể truy cập được bởi c&aacute;c component con được hiển thị b&ecirc;n trong <code>Outlet</code>. React Router sẽ tự động tạo một Context&nbsp;khi bạn sử dụng thuộc t&iacute;nh <code>context</code> tr&ecirc;n component <code>&lt;Outlet /&gt;</code>.</li>
<li style="font-weight: 400;" aria-level="1">Để đọc dữ liệu từ context của Outlet, bạn phải sử dụng hook <code>useOutletContext</code>.</li>
</ul>
Trong dự &aacute;n tiếp theo, ch&uacute;ng ta sẽ sử dụng kiến thức từ chương n&agrave;y v&agrave; b&agrave;i tập cuối chương để tạo c&aacute;c tab lồng nhau (hoạt động như c&aacute;c trang con) cho c&aacute;c sản phẩm, trong đ&oacute; ch&uacute;ng ta c&oacute; thể xem chi tiết sản phẩm (được truy xuất từ API) cũng như th&ocirc;ng tin giao dịch.
Nhưng trước ti&ecirc;n, h&atilde;y t&igrave;m hiểu th&ecirc;m một v&agrave;i kh&aacute;i niệm (n&acirc;ng cao) về React Router.