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 c&aacute;c b&agrave;i học tiếp theo, ch&uacute;ng ta sẽ ph&acirc;n t&iacute;ch c&aacute;ch điều hướng cơ bản giữa hai trang, tương tự như b&agrave;i tập hiển thị React Router trước đ&oacute;.
C&oacute; bốn kh&aacute;i niệm ch&iacute;nh cần giải th&iacute;ch:
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>BrowserRouter</code></li>
<li style="font-weight: 400;" aria-level="1"><code>Routes</code></li>
<li style="font-weight: 400;" aria-level="1"><code>Route</code></li>
<li style="font-weight: 400;" aria-level="1"><code>Link</code></li>
</ol>
<h2 style="text-align: justify;">1. BrowserRouter</h2>
Component <code>&lt;BrowserRouter /&gt;</code> l&agrave; một router sử dụng HTML5 history API (chủ yếu l&agrave; phương thức pushState cho ph&eacute;p thay đổi URL của trang m&agrave; kh&ocirc;ng k&iacute;ch hoạt h&agrave;nh vi l&agrave;m mới tr&igrave;nh duyệt).
BrowserRouter giữ giao diện người d&ugrave;ng đồng bộ với URL, điều đ&oacute; c&oacute; nghĩa l&agrave; URL sẽ lu&ocirc;n phản &aacute;nh đ&uacute;ng route hiện đang được hiển thị.
C&oacute; nhiều loại Router kh&aacute;c nhau nhưng bạn sẽ chủ yếu sử dụng <code>BrowserRouter</code>.
Để BrowserRouter hoạt động, bạn cần đ&oacute;ng g&oacute;i to&agrave;n bộ ứng dụng trong component đ&oacute;:
<pre class="language-js" data-content="import%20%7BBrowserRouter%7D%20from%20%22react-router-dom%22%3B%0A%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3CBrowserRouter%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cdiv%3EThe%20rest%20of%20your%20app%20goes%20here%3C%2Fdiv%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2FBrowserRouter%3E%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {BrowserRouter} from "react-router-dom";

function App() {
 return &lt;BrowserRouter&gt;
 &lt;div&gt;The rest of your app goes here&lt;/div&gt;
 &lt;/BrowserRouter&gt;;
}</code></pre>
Việc c&oacute; component <code>&lt;BrowserRouter /&gt;</code> đ&oacute;ng g&oacute;i to&agrave;n bộ ứng dụng l&agrave; rất quan trọng. Trong c&aacute;c phần tiếp theo, bạn sẽ thấy rằng <code>&lt;Routes /&gt;</code>, <code>&lt;Route /&gt;</code> v&agrave; <code>&lt;Link /&gt;</code> sẽ được đặt b&ecirc;n trong <code>&lt;BrowserRouter&gt;&lt;/BrowserRouter&gt;</code>.
<h2 style="text-align: justify;">2. Route</h2>
Component <code>&lt;Route /&gt;</code> sẽ hiển thị một component khi trường thuộc t&iacute;nh <code>path</code> khớp với URL hiện tại trong tr&igrave;nh duyệt.
Dưới đ&acirc;y l&agrave; v&iacute; dụ về component <code>&lt;Route /&gt;</code>:
<pre class="language-js" data-content="%3CRoute%20path%3D%22%2Fabout%22%20element%3D%7B%3CAbout%20%2F%3E%7D%3E%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;&lt;/Route&gt;</code></pre>
Component <code>&lt;About /&gt;</code>, được cung cấp cho <code>Route</code> th&ocirc;ng qua trường thuộc t&iacute;nh <code>element</code>, chỉ được hiển thị khi URL của tr&igrave;nh duyệt khớp với đường dẫn <code>/about</code>.
H&atilde;y xem v&iacute; dụ đầy đủ:
<pre class="language-js" data-content="import%20%7BBrowserRouter%2C%20Route%7D%20from%20%22react-router-dom%22%3B%0A%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3CBrowserRouter%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cdiv%3EThe%20rest%20of%20your%20app%20goes%20here%3C%2Fdiv%3E%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7B%2F*We%20still%20need%20to%20wrap%20these%20two%20Route%20components%20with%20a%20%3CRoutes%20%2F%3E.%20Keep%20reading%20for%20now.*%2F%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3CRoute%20path%3D%22%2F%22%20element%3D%7B%3CHome%20%2F%3E%7D%3E%3C%2FRoute%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3CRoute%20path%3D%22%2Fabout%22%20element%3D%7B%3CAbout%20%2F%3E%7D%3E%3C%2FRoute%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2FBrowserRouter%3E%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {BrowserRouter, Route} from "react-router-dom";

function App() {
 return &lt;BrowserRouter&gt;
 &lt;div&gt;The rest of your app goes here&lt;/div&gt;

 {/*We still need to wrap these two Route components with a &lt;Routes /&gt;. Keep reading for now.*/}
 &lt;Route path="/" element={&lt;Home /&gt;}&gt;&lt;/Route&gt;
 &lt;Route path="/about" element={&lt;About /&gt;}&gt;&lt;/Route&gt;
 &lt;/BrowserRouter&gt;;
}</code></pre>
Khi người d&ugrave;ng điều hướng đến <code>/</code>, component <code>&lt;Home /&gt;</code> sẽ được hiển thị.
Tương tự, khi người d&ugrave;ng điều hướng đến <code>/about</code>, component <code>&lt;About /&gt;</code> sẽ được hiển thị.
V&igrave; vậy, URL tr&igrave;nh duyệt sẽ được so s&aacute;nh với trường thuộc t&iacute;nh <code>path</code> của mỗi component <code>&lt;Route /&gt;</code>. Dựa tr&ecirc;n kết quả so khớp n&agrave;y, c&aacute;c route tương ứng sẽ được x&aacute;c định v&agrave; chỉ c&aacute;c component li&ecirc;n quan sẽ được hiển thị.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Component <code>&lt;BrowserRouter /&gt;</code> l&agrave; một router sử dụng HTML5 history API (sử dụng phương thức <code>pushState</code>).</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Bạn phải đ&oacute;ng g&oacute;i to&agrave;n bộ ứng dụng trong component <code>&lt;BrowserRouter /&gt;</code>.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Component <code>&lt;Route /&gt;</code> sẽ hiển thị một component khi trường thuộc t&iacute;nh <code>path</code> khớp với URL hiện tại tr&ecirc;n tr&igrave;nh duyệt.</li>
</ul>

Điều hướng cơ bản