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

Qu&aacute; tr&igrave;nh l&agrave;m việc với c&aacute;c route lồng nhau trong React Router bao gồm ba bước:
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Bắt đầu bằng c&aacute;ch nh&uacute;ng c&aacute;c định nghĩa <code>&lt;Route /&gt;</code> b&ecirc;n trong một phần tử <code>&lt;Route /&gt;</code> đ&atilde; tồn tại.</li>
<li style="font-weight: 400;" aria-level="1">Sau đ&oacute;, bạn cần th&ecirc;m v&agrave; sử dụng một component <code>&lt;Outlet /&gt;</code> trong route sẽ chứa c&aacute;c route lồng nhau.</li>
<li style="font-weight: 400;" aria-level="1">Cuối c&ugrave;ng, bạn cần c&oacute; c&aacute;c li&ecirc;n kết <code>&lt;Link /&gt;</code> trỏ đến những route n&agrave;y để xem/kiểm thử ch&uacute;ng.</li>
</ol>
H&atilde;y bắt đầu bằng một v&iacute; dụ c&oacute; component <code>&lt;About /&gt;</code> được hiển thị tr&ecirc;n <code>/about</code>:
<pre class="language-js" data-content="import%20%7BBrowserRouter%2C%20Routes%2C%20Route%7D%20from%20%22react-router-dom%22%3B%0A%0Afunction%20About()%20%7B%0A%C2%A0%C2%A0return%20%3C%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Ch1%3EAbout%3C%2Fh1%3E%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2F%3E%3B%0A%7D%0A%0Afunction%20App()%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%3CBrowserRouter%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%3CRoutes%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%C2%A0%C2%A0%C2%A0%3CRoute%20path%3D%22%2Fabout%2F%22%20element%3D%7B%3CAbout%20%2F%3E%7D%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%C2%A0%C2%A0%C2%A0%3C%2FRoute%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%3C%2FRoutes%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3C%2FBrowserRouter%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>import {BrowserRouter, Routes, Route} from "react-router-dom";

function About() {
 return &lt;&gt;
 &lt;h1&gt;About&lt;/h1&gt;

 &lt;/&gt;;
}

function App() {
 return (
 &lt;BrowserRouter&gt;
 &lt;Routes&gt;
 &lt;Route path="/about/" element={&lt;About /&gt;}&gt;
 &lt;/Route&gt;
 &lt;/Routes&gt;
 &lt;/BrowserRouter&gt;
 );
}</code></pre>
Ch&uacute;ng ta muốn l&agrave;m cho component <code>&lt;About /&gt;</code> hiển thị c&aacute;c route lồng nhau. Nghĩa l&agrave; mỗi khi đường dẫn bắt đầu bằng <code>/about</code>, ch&uacute;ng ta muốn hiển thị component <code>&lt;About /&gt;</code> c&ugrave;ng với một số component con. Điều n&agrave;y cho ph&eacute;p ta lu&ocirc;n hiển thị <code>&lt;h1&gt;About&lt;/h1&gt;</code> tr&ecirc;n c&aacute;c trang con như <code>/about/us</code> v&agrave; <code>/about/team</code>.
<h2 style="text-align: justify;">1. Khai b&aacute;o c&aacute;c &lt;Route /&gt; lồng nhau</h2>
Đầu ti&ecirc;n, ch&uacute;ng ta cần định nghĩa hai route lồng nhau nằm trong route cha <code>/about.</code> Đ&oacute; l&agrave; <code>&lt;Route path="us" /&gt;</code> v&agrave; <code>&lt;Route path="team" /&gt;</code>. Ch&uacute; &yacute; rằng c&aacute;c đường dẫn l&agrave; tương đối v&igrave; ch&uacute;ng ta sẽ nh&uacute;ng ch&uacute;ng trong <code>&lt;Route path="/about/" /&gt;</code>. Hai component <code>&lt;Route /&gt;</code> n&agrave;y trở th&agrave;nh component con của <code>&lt;Route path="/about" /&gt;</code> như sau:
<pre class="language-js" data-content="%3CRoute%20path%3D%22%2Fabout%2F%22%20element%3D%7B%3CAbout%20%2F%3E%7D%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%7B%2F*%20about%2Fus%20*%2F%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%3CRoute%20path%3D%22us%22%20element%3D%7B%3Ch2%3EAbout%20us%3C%2Fh2%3E%7D%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2FRoute%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%7B%2F*%20about%2Fteam%20*%2F%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%3CRoute%20path%3D%22team%22%20element%3D%7B%3Ch2%3EAbout%20the%20Team%3C%2Fh2%3E%7D%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2FRoute%3E%0A%3C%2FRoute%3E" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>&lt;Route path="/about/" element={&lt;About /&gt;}&gt;
 {/* about/us */}
 &lt;Route path="us" element={&lt;h2&gt;About us&lt;/h2&gt;}&gt;
 &lt;/Route&gt;
 {/* about/team */}
 &lt;Route path="team" element={&lt;h2&gt;About the Team&lt;/h2&gt;}&gt;
 &lt;/Route&gt;
&lt;/Route&gt;</code></pre>
Comment ở tr&ecirc;n cho thấy rằng <code>path="us"</code> được lồng trong <code>path="/about/"</code> tạo th&agrave;nh đường dẫn cuối c&ugrave;ng của route đ&oacute; l&agrave; <code>/about/us</code>. Tương tự, <code>path="team"</code> trở th&agrave;nh <code>/about/team</code>.
[___NOTE_Bạn kh&ocirc;ng n&ecirc;n bắt đầu khai b&aacute;o c&aacute;c route lồng nhau bằng k&yacute; tự <code>/</code>. Nếu kh&ocirc;ng, bạn sẽ phải lặp lại đường dẫn <code>/about</code>. V&igrave; vậy, cả <code>path="us"</code> v&agrave; <code>path="/about/us"</code> l&agrave; hợp lệ. Tuy nhi&ecirc;n, <a href="https://tek4.vn/">Tek4</a> khuyến nghị bạn n&ecirc;n sử dụng c&aacute;ch tiếp cận đầu ti&ecirc;n._NOTE___]
<h2 style="text-align: justify;">2. Sử dụng &lt;Outlet /&gt;</h2>
B&acirc;y giờ, ch&uacute;ng ta cần chỉ định cho component <code>&lt;About /&gt;</code> hiển thị c&aacute;c route lồng nhau. Để l&agrave;m điều đ&oacute;, ch&uacute;ng ta cần th&ecirc;m component <code>Outlet</code> từ <code>react-router-dom</code> v&agrave; sử dụng n&oacute; trong <code>&lt;About /&gt;</code>. Điều n&agrave;y sẽ x&aacute;c định vị tr&iacute; m&agrave; c&aacute;c route lồng nhau sẽ hiển thị trong JSX:
<pre class="language-js" data-content="import%20%7BBrowserRouter%2C%20Routes%2C%20Route%2C%20Outlet%7D%20from%20%22react-router-dom%22%3B%0A%0Afunction%20About()%20%7B%0A%C2%A0%C2%A0return%20%3C%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Ch1%3EAbout%3C%2Fh1%3E%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7B%2F*%20Render%20nested%20routes%20for%20%2Fabout%2F...%20here%20*%2F%7D%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%0A%0Afunction%20App()%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%3CBrowserRouter%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%3CRoutes%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%C2%A0%C2%A0%C2%A0%3CRoute%20path%3D%22%2Fabout%2F%22%20element%3D%7B%3CAbout%20%2F%3E%7D%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%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7B%2F*%20about%2Fus%20*%2F%7D%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%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3CRoute%20path%3D%22us%22%20element%3D%7B%3Ch2%3EAbout%20us%3C%2Fh2%3E%7D%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%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3C%2FRoute%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%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7B%2F*%20about%2Fteam%20*%2F%7D%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%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3CRoute%20path%3D%22team%22%20element%3D%7B%3Ch2%3EAbout%20the%20Team%3C%2Fh2%3E%7D%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%C2%A0%C2%A0%C2%A0%3C%2FRoute%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%3C%2FRoute%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3C%2FRoutes%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3C%2FBrowserRouter%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>import {BrowserRouter, Routes, Route, Outlet} from "react-router-dom";

function About() {
 return &lt;&gt;
 &lt;h1&gt;About&lt;/h1&gt;

 {/* Render nested routes for /about/... here */}
 &lt;Outlet /&gt;
 &lt;/&gt;;
}

function App() {
 return (
 &lt;BrowserRouter&gt;
 &lt;Routes&gt;
 &lt;Route path="/about/" element={&lt;About /&gt;}&gt;
 {/* about/us */}
 &lt;Route path="us" element={&lt;h2&gt;About us&lt;/h2&gt;}&gt;
 &lt;/Route&gt;
 {/* about/team */}
 &lt;Route path="team" element={&lt;h2&gt;About the Team&lt;/h2&gt;}&gt;
 &lt;/Route&gt;
 &lt;/Route&gt;
 &lt;/Routes&gt;
 &lt;/BrowserRouter&gt;
 );
}</code></pre>
Giả sử bạn đặt <code>&lt;Outlet /&gt;</code> trước <code>&lt;h1&gt;About&lt;/h1&gt;</code>. Trong trường hợp đ&oacute;, nội dung của c&aacute;c route lồng nhau (<code>&lt;h2&gt;About us&lt;/h2&gt;</code> hoặc <code>&lt;h2&gt;About the Team&lt;/h2&gt;</code>) sẽ hiển thị trước <code>h1</code>.
<h2 style="text-align: justify;">3. Th&ecirc;m c&aacute;c phần tử &lt;Link /&gt;</h2>
Cuối c&ugrave;ng, ch&uacute;ng ta cần th&ecirc;m c&aacute;c phần tử <code>&lt;Link /&gt;</code> để xem v&agrave; kiểm thử c&aacute;c route lồng nhau:
<pre class="language-js" data-content="import%20%7BBrowserRouter%2C%20Routes%2C%20Route%2C%20Outlet%2C%20Link%7D%20from%20%22react-router-dom%22%3B%0A%0Afunction%20About()%20%7B%0A%C2%A0%C2%A0return%20%3C%3E%0A%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%3Ch1%3EAbout%3C%2Fh1%3E%0A%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%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%3COutlet%20%2F%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2F%3E%3B%0A%7D%0A%0Afunction%20App()%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%3CBrowserRouter%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3CRoutes%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%3CRoute%20path%3D%22%2Fabout%2F%22%20element%3D%7B%3CAbout%20%2F%3E%7D%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%C2%A0%C2%A0%C2%A0%7B%2F*%20about%2Fus%20*%2F%7D%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%C2%A0%C2%A0%C2%A0%3CRoute%20path%3D%22us%22%20element%3D%7B%3Ch2%3EAbout%20us%3C%2Fh2%3E%7D%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%C2%A0%C2%A0%C2%A0%3C%2FRoute%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%C2%A0%C2%A0%C2%A0%7B%2F*%20about%2Fteam%20*%2F%7D%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%C2%A0%C2%A0%C2%A0%3CRoute%20path%3D%22team%22%20element%3D%7B%3Ch2%3EAbout%20the%20Team%3C%2Fh2%3E%7D%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%C2%A0%C2%A0%C2%A0%3C%2FRoute%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%3C%2FRoute%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%3C%2FRoute%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3C%2FRoutes%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3C%2FBrowserRouter%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>import {BrowserRouter, Routes, Route, Outlet, Link} from "react-router-dom";

function About() {
 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;;
}

function App() {
 return (
 &lt;BrowserRouter&gt;
 &lt;Routes&gt;
 &lt;Route path="/about/" element={&lt;About /&gt;}&gt;
 {/* about/us */}
 &lt;Route path="us" element={&lt;h2&gt;About us&lt;/h2&gt;}&gt;
 &lt;/Route&gt;
 {/* about/team */}
 &lt;Route path="team" element={&lt;h2&gt;About the Team&lt;/h2&gt;}&gt;
 &lt;/Route&gt;
 &lt;/Route&gt;
 &lt;/Route&gt;
 &lt;/Routes&gt;
 &lt;/BrowserRouter&gt;
 );
}</code></pre>
H&atilde;y c&ugrave;ng thực h&agrave;nh những g&igrave; nội dung đ&atilde; học trong b&agrave;i tập tiếp theo!
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Qu&aacute; tr&igrave;nh l&agrave;m việc với c&aacute;c route lồng nhau trong React Router bao gồm ba bước:</li>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="2">Khai b&aacute;o c&aacute;c <code>&lt;Route /&gt;</code> lồng nhau.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="2">Sử dụng <code>&lt;Outlet /&gt;</code> để x&aacute;c định vị tr&iacute; m&agrave; c&aacute;c route lồng nhau sẽ hiển thị trong component cha.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="2">Th&ecirc;m c&aacute;c phần tử <code>&lt;Link /&gt;</code> để xem v&agrave; kiểm thử c&aacute;c route lồng nhau.</li>
</ul>
</ul>

Nested routes trong React Router