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

Nếu bạn muốn chạy một đoạn code mỗi khi React Router điều hướng đến một URL mới th&igrave; bạn sẽ l&agrave;m như thế n&agrave;o?
Bạn c&oacute; thể l&agrave;m điều đ&oacute; bằng c&aacute;ch sử dụng hook <code>useLocation</code>.
Trước ti&ecirc;n, h&atilde;y xem x&eacute;t một số trường hợp sử dụng của hook <code>useLocation</code>. Trường hợp sử dụng dụng phổ biến nhất l&agrave; gửi sự kiện pageview đến dịch vụ ph&acirc;n t&iacute;ch, chẳng hạn như Google Analytics. Lưu &yacute; rằng từ Google Analytics 4, t&iacute;nh năng n&agrave;y sẽ được tự động triển khai bởi Google Analytics. Tuy nhi&ecirc;n, ch&uacute;ng ta vẫn sẽ học về hook <code>useLocation</code> v&igrave; bạn c&oacute; thể cần sử dụng n&oacute; cho mục đ&iacute;ch kh&aacute;c.
V&iacute; dụ: t&iacute;ch hợp với c&aacute;c thư viện v&agrave; dịch vụ ph&acirc;n t&iacute;ch kh&aacute;c, chạy logic c&oacute; điều kiện cho một số route, v.v.
<h2 style="text-align: justify;">Hook useLocation</h2>
Hook <code>useLocation</code> trả về th&ocirc;ng tin li&ecirc;n quan đến route hiện đang hoạt động.
Dưới đ&acirc;y l&agrave; c&aacute;ch bạn sử dụng hook <code>useLocation</code>:
<pre class="language-js" data-content="import%20%7BBrowserRouter%2C%20Routes%2C%20Route%2C%20useLocation%7D%20from%20%22react-router-dom%22%3B%0Aimport%20%7BcreateRoot%7D%20from%20%22react-dom%2Fclient%22%3B%0A%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20location%20%3D%20useLocation()%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(location.pathname)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3CRoutes%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7B%2F*%20routes%20here...%20*%2F%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2FRoutes%3E%0A%7D%0A%0AcreateRoot(document.querySelector(%22%23react-root%22)).render(%3CBrowserRouter%3E%3CApp%20%2F%3E%3C%2FBrowserRouter%3E)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {BrowserRouter, Routes, Route, useLocation} from "react-router-dom";
import {createRoot} from "react-dom/client";

function App() {
 const location = useLocation();
 console.log(location.pathname);

 return &lt;Routes&gt;
 {/* routes here... */}
 &lt;/Routes&gt;
}

createRoot(document.querySelector("#react-root")).render(&lt;BrowserRouter&gt;&lt;App /&gt;&lt;/BrowserRouter&gt;);</code></pre>
Biến <code>location</code> sẽ l&agrave; một đối tượng chứa <code>pathname</code>.
Sau đ&oacute;, bạn c&oacute; thể sử dụng <code>location.pathname</code> để biết route hiện tại m&agrave; người d&ugrave;ng đang duyệt. V&iacute; dụ: <code>/</code> hoặc <code>/about</code>, v.v., t&ugrave;y thuộc v&agrave;o c&aacute;c route hiện c&oacute;.
Giống như hook <code>useNavigate</code>, bạn cần đảm bảo rằng code được chạy trong một component được đ&oacute;ng g&oacute;i bởi <code>&lt;BrowserRouter /&gt;</code>, nếu kh&ocirc;ng, hook sẽ kh&ocirc;ng hoạt động.
<h2 style="text-align: justify;">Thay đổi vị tr&iacute;</h2>
Bằng c&aacute;ch sử dụng <code>useLocation</code> v&agrave; c&aacute;ch lấy <code>pathname</code> hiện tại, bạn c&oacute; thể chạy một đoạn code mỗi khi React Router điều hướng đến một URL mới bằng c&aacute;ch đ&oacute;ng g&oacute;i code bằng <code>useEffect</code> với một phụ thuộc tr&ecirc;n <code>location</code>. C&aacute;ch triển khai như sau:
<pre class="language-js" data-content="import%20React%2C%20%7BuseEffect%7D%20from%20%22react%22%3B%0Aimport%20%7BBrowserRouter%2C%20Routes%2C%20Route%2C%20useLocation%7D%20from%20%22react-router-dom%22%3B%0Aimport%20%7BcreateRoot%7D%20from%20%22react-dom%2Fclient%22%3B%0A%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20location%20%3D%20useLocation()%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20run%20a%20piece%20of%20code%20on%20location%20change%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%A0console.log(location.pathname)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20send%20it%20to%20analytic%2C%20or%20do%20some%20conditional%20logic%20here%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%20%5Blocation%5D)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3CRoutes%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7B%2F*%20routes%20here...%20*%2F%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2FRoutes%3E%0A%7D%0A%0AcreateRoot(document.querySelector(%22%23react-root%22)).render(%3CBrowserRouter%3E%3CApp%20%2F%3E%3C%2FBrowserRouter%3E)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import React, {useEffect} from "react";
import {BrowserRouter, Routes, Route, useLocation} from "react-router-dom";
import {createRoot} from "react-dom/client";

function App() {
 const location = useLocation();

 // run a piece of code on location change
 useEffect(() =&gt; {
 console.log(location.pathname);
 // send it to analytic, or do some conditional logic here
 }, [location]);

 return &lt;Routes&gt;
 {/* routes here... */}
 &lt;/Routes&gt;
}

createRoot(document.querySelector("#react-root")).render(&lt;BrowserRouter&gt;&lt;App /&gt;&lt;/BrowserRouter&gt;);</code></pre>
Code trong hook <code>useEffect</code> sẽ chạy mỗi khi đối tượng <code>location</code> thay đổi, điều n&agrave;y xảy ra mỗi khi người d&ugrave;ng điều hướng đến một route mới.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Hook <code>useLocation()</code>&nbsp;trả về th&ocirc;ng tin li&ecirc;n quan đến route hiện đang hoạt động.</li>
<li style="font-weight: 400;" aria-level="1">Hook <code>useLocation()</code> trả về <code>pathname</code> của route.</li>
<li style="font-weight: 400;" aria-level="1">Bằng c&aacute;ch kết hợp <code>useLocation()</code> với <code>useEffect()</code>, bạn c&oacute; thể chạy một đoạn code mỗi khi người d&ugrave;ng điều hướng đến một route mới.</li>
</ul>
Chương n&agrave;y cung cấp kiến thức n&acirc;ng cao về React Router. Bạn c&oacute; thể kh&ocirc;ng cần sử dụng đến tất cả c&aacute;c t&iacute;nh năng n&agrave;y trong dự &aacute;n thực tế, tuy nhi&ecirc;n, kiến thức l&agrave; kh&ocirc;ng bao giờ thừa th&atilde;i. Trong tương lai, bạn c&oacute; thể gặp những trường hợp cần sử dụng những t&iacute;nh năng đ&oacute;!
Trong dự &aacute;n tiếp theo, ch&uacute;ng ta sẽ kết hợp những kh&aacute;i niệm đ&atilde; học trong chương n&agrave;y để cải thiện ứng dụng mua sắm trực tuyến!