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 một số t&igrave;nh huống, bạn c&oacute; thể cần di chuyển giữa c&aacute;c trang trong ứng dụng React một c&aacute;ch tự động.
V&iacute; dụ: bạn gửi một y&ecirc;u cầu <code>fetch</code> v&agrave; dựa tr&ecirc;n kết quả đ&oacute;, bạn muốn chuyển hướng người d&ugrave;ng đến một trang cụ thể.
Sau đ&acirc;y l&agrave; một số v&iacute; dụ kh&aacute;c:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Chuyển hướng người d&ugrave;ng đến trang <code>/login</code> nếu họ chưa đăng nhập.</li>
<li style="font-weight: 400;" aria-level="1">Chuyển hướng người d&ugrave;ng đến trang <code>/dashboard</code> sau khi y&ecirc;u cầu <code>fetch()</code> cho đăng nhập th&agrave;nh c&ocirc;ng.</li>
</ul>
Để l&agrave;m điều đ&oacute;, bạn cần sử dụng hook <code>useNavigate()</code>, n&oacute; trả về một phương thức m&agrave; bạn c&oacute; thể gọi để điều hướng đến một route mới một c&aacute;ch tự động. H&atilde;y xem v&iacute; dụ sau:
<pre class="language-js" data-content="import%20React%2C%20%7BuseEffect%7D%20from%20%22react%22%3B%0Aimport%20%7BuseNavigate%7D%20from%20%22react-router-dom%22%3B%0A%0Afunction%20HelpPage()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20navigate%20%3D%20useNavigate()%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0useEffect(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0const%20isLoggedIn%20%3D%20window.localStorage.getItem(%22isLoggedIn%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0if%20(!isLoggedIn)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0navigate(%22%2Flogin%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%20%5B%5D)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Ch2%3EHelp%20page%3C%2Fh2%3E%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import React, {useEffect} from "react";
import {useNavigate} from "react-router-dom";

function HelpPage() {
 const navigate = useNavigate();

 useEffect(() =&gt; {
 const isLoggedIn = window.localStorage.getItem("isLoggedIn");
 if (!isLoggedIn) {
 navigate("/login");
 }
 }, []);

 return &lt;h2&gt;Help page&lt;/h2&gt;;
}</code></pre>
Trong v&iacute; dụ n&agrave;y, ch&uacute;ng ta kiểm tra xem localStorage c&oacute; chứa gi&aacute; trị cho kh&oacute;a <code>isLoggedIn</code> hay kh&ocirc;ng. Nếu kh&ocirc;ng, ch&uacute;ng ta điều hướng người d&ugrave;ng trở lại trang <code>/login</code> bằng c&aacute;ch gọi <code>navigate("/login")</code>.
<h3 style="text-align: justify;">Hook useNavigate chỉ hoạt động trong BrowserRouter</h3>
Bạn cần gọi hook <code>useNavigate()</code> trong một component được lồng trong <code>&lt;BrowserRouter /&gt;</code>, nếu kh&ocirc;ng, hook sẽ kh&ocirc;ng hoạt động.
Do đ&oacute; đoạn code dưới đ&acirc;y SẼ KH&Ocirc;NG hoạt động:
<pre class="language-js" data-content="import%20React%20from%20%22react%22%3B%0Aimport%20%7BBrowserRouter%2C%20useNavigate%7D%20from%20%22react-router-dom%22%3B%0A%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20%E2%9D%8C%20This%20breaks%20because%20the%20component%20was%20not%20wrapped%20by%20BrowserRouter%2C%20but%20its%20children%20are.%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20history%20%3D%20useNavigate()%3B%0A%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%7B%2F*%20...%20*%2F%7D%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 React from "react";
import {BrowserRouter, useNavigate} from "react-router-dom";

function App() {
 // ❌ This breaks because the component was not wrapped by BrowserRouter, but its children are.
 const history = useNavigate();

 return &lt;BrowserRouter&gt;
 {/* ... */}
 &lt;/BrowserRouter&gt;;
}</code></pre>
Như bạn thấy, hook <code>useNavigate()</code> sẽ kh&ocirc;ng hoạt động trong component <code>App()</code> v&igrave; n&oacute; kh&ocirc;ng được đ&oacute;ng g&oacute;i bởi <code>&lt;BrowserRouter/&gt;</code>. Tuy nhi&ecirc;n, tất cả c&aacute;c component con b&ecirc;n trong App sẽ được đ&oacute;ng g&oacute;i bởi <code>&lt;BrowserRouter /&gt;</code>, v&igrave; vậy bạn c&oacute; thể sử dụng <code>useNavigate()</code> trong c&aacute;c component con đ&oacute;.
Nếu bạn muốn sử dụng <code>useNavigate()</code> trong component <code>&lt;App /&gt;</code>, bạn cần tạo một component cha đ&oacute;ng g&oacute;i <code>&lt;App /&gt;</code> v&agrave; di chuyển <code>&lt;BrowserRouter /&gt;</code> v&agrave;o component cha đ&oacute;.
<h3 style="text-align: justify;">Khả năng tiếp cận</h3>
Tất cả c&aacute;c li&ecirc;n kết n&ecirc;n được tạo bằng c&aacute;ch sử dụng component <code>&lt;Link /&gt;</code> v&igrave; ch&uacute;ng sẽ được hiển thị th&agrave;nh một thẻ <code>&lt;a&gt;</code>, gi&uacute;p đảm bảo khả năng tiếp cận cho người d&ugrave;ng.
Kh&ocirc;ng thay thế c&aacute;c component <code>&lt;Link /&gt;</code> th&ocirc;ng thường bằng phương thức <code>.push()</code> của <code>useNavigate()</code>.
Bạn chỉ n&ecirc;n sử dụng phương thức <code>.push()</code> khi kh&ocirc;ng thể sử dụng <code>&lt;Link /&gt;</code>. Cụ thể l&agrave; khi việc chuyển hướng phải dựa tr&ecirc;n một số logic n&agrave;o đ&oacute;, chẳng hạn như kết quả của <code>fetch()</code>.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Chuyển hướng lập tr&igrave;nh l&agrave; phương ph&aacute;p chuyển hướng dựa tr&ecirc;n một số điều kiện kiểm tra, chẳng hạn như dựa tr&ecirc;n kết quả của <code>fetch()</code> hoặc một biểu thức điều kiện.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Bạn c&oacute; thể thay đổi route hiện tại một c&aacute;ch tự động th&ocirc;ng qua lập tr&igrave;nh bằng c&aacute;ch sử dụng hook <code>useNavigate()</code> của React Router m&agrave; bạn c&oacute; thể gọi với đường dẫn m&agrave; bạn muốn điều hướng đến.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Để đảm bảo khả năng tiếp cận, h&atilde;y lu&ocirc;n ưu ti&ecirc;n sử dụng <code>&lt;Link /&gt;</code>.</li>
</ul>