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 qu&aacute; tr&igrave;nh ph&aacute;t triển ứng dụng mua sắm, ch&uacute;ng ta nhận thấy cần phải th&ecirc;m nhiều trang v&agrave;o ứng dụng.
Ch&uacute;ng ta c&oacute; thể &aacute;p dụng c&aacute;ch tiếp cận đ&atilde; được sử dụng trong Dự &aacute;n III, trong đ&oacute; ch&uacute;ng ta hiển thị c&aacute;c component dựa tr&ecirc;n trạng th&aacute;i đăng nhập của người d&ugrave;ng.
Tuy nhi&ecirc;n, c&aacute;ch tiếp cận n&agrave;y c&oacute; một số nhược điểm:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Việc quản l&yacute; code sẽ nhanh ch&oacute;ng trở n&ecirc;n phức tạp nếu ch&uacute;ng ta muốn th&ecirc;m nhiều trang.</li>
<li style="font-weight: 400;" aria-level="1">URL của trang kh&ocirc;ng bao giờ thay đổi. V&igrave; vậy, nếu người d&ugrave;ng duyệt ứng dụng web v&agrave; sau đ&oacute; muốn lưu li&ecirc;n kết hoặc chia sẻ với bạn b&egrave;, URL đ&oacute; sẽ kh&ocirc;ng thay đổi.</li>
</ul>
React Router giải quyết những vấn đề n&agrave;y bằng c&aacute;ch cho ph&eacute;p ta định nghĩa c&aacute;c route một c&aacute;ch r&otilde; r&agrave;ng v&agrave; kết nối ch&uacute;ng với c&aacute;c URL của trang. Cụm từ "định nghĩa route một c&aacute;ch r&otilde; r&agrave;ng" sẽ được giải th&iacute;ch trong b&agrave;i học tiếp theo.
<h2 style="text-align: justify;">React Router</h2>
React Router l&agrave; một thư viện gi&uacute;p tạo c&aacute;c route trong React dễ d&agrave;ng hơn. Thư viện n&agrave;y kh&ocirc;ng được x&acirc;y dựng bởi đội ngũ ph&aacute;t triển React, do đ&oacute; n&oacute; kh&ocirc;ng phải l&agrave; một g&oacute;i React ch&iacute;nh thức. Tuy nhi&ecirc;n, n&oacute; được sử dụng kh&aacute; rộng r&atilde;i trong cộng đồng React.
T&ecirc;n g&oacute;i l&agrave; <code>react-router-dom</code> v&agrave; k&iacute;ch thước của g&oacute;i sau khi tối ưu h&oacute;a l&agrave; 52kb.
G&oacute;i <code>react-router-dom</code> sử dụng named export để xuất chức năng của n&oacute;. Điều n&agrave;y c&oacute; nghĩa l&agrave; bạn sẽ sử dụng c&uacute; ph&aacute;p sau để nhập c&aacute;c component được cung cấp bởi g&oacute;i n&agrave;y:
<pre class="language-js" data-content="import%20%7B%7D%20from%20%22react-router-dom%22%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {} from "react-router-dom";</code></pre>
T&ecirc;n của component sẽ nằm giữa <code>{}</code> bởi v&igrave; ch&uacute;ng l&agrave; named export.
V&iacute; dụ, để th&ecirc;m c&aacute;c component <code>BrowserRouter</code> v&agrave; <code>Route</code>, bạn sử dụng c&uacute; ph&aacute;p sau:
<pre class="language-js" data-content="import%20%7BBrowserRouter%2C%20Route%7D%20from%20%22react-router-dom%22%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {BrowserRouter, Route} from "react-router-dom";</code></pre>
Kh&oacute;a học n&agrave;y giới thiệu về phi&ecirc;n bản mới nhất của react-router-dom (v6).
G&oacute;i <code>react-router-dom</code> cung cấp nhiều component v&agrave; hook cho việc quản l&yacute; route. Tuy nhi&ecirc;n, trong kh&oacute;a học n&agrave;y, ch&uacute;ng ta sẽ tập trung v&agrave;o 10 component v&agrave; hook quan trọng nhất v&agrave; thường được sử dụng
Trước đ&oacute;, bạn cần biết 4 component phổ biến nhất được th&ecirc;m trong mọi ứng dụng sử dụng React Router l&agrave;:
<ul 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> (Route - dạng số &iacute;t của Routes)</li>
<li style="font-weight: 400;" aria-level="1"><code>Link</code></li>
</ul>
4 component tr&ecirc;n sẽ được giải th&iacute;ch trong b&agrave;i học tiếp theo.
<h2 style="text-align: justify;">Hiển thị URL</h2>
Trong Kh&oacute;a React, bạn c&oacute; thể hiển thị URL hiện tại tr&ecirc;n thẻ Tr&igrave;nh duyệt, ở tr&ecirc;n c&ugrave;ng. URL n&agrave;y bắt đầu bằng <code>http://localhost</code> v&agrave; sau đ&oacute; hiển thị route hiện tại của bạn.
Lưu &yacute; rằng URL n&agrave;y chỉ hiển thị trong c&aacute;c b&agrave;i tập sử dụng React Router.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">React Router cho ph&eacute;p ch&uacute;ng ta định nghĩa route một c&aacute;ch r&otilde; r&agrave;ng, URL tr&igrave;nh duyệt sẽ được cập nhật khi ch&uacute;ng ta điều hướng qua ứng dụng.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">React Router kh&ocirc;ng phải l&agrave; một thư viện React ch&iacute;nh thức. Tuy nhi&ecirc;n, n&oacute; được sử dụng kh&aacute; rộng r&atilde;i trong cộng đồng React.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">T&ecirc;n g&oacute;i cho React Router l&agrave; <code>react-router-dom</code>.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><code>react-router-dom</code> sau khi được tối ưu h&oacute;a c&oacute; k&iacute;ch thước l&agrave; 52kb.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">G&oacute;i <code>react-router-dom</code> xuất c&aacute;c component sau: <code>BrowserRouter</code>, <code>Route</code>, <code>Routes</code> v&agrave; <code>Link</code>.</li>
</ul>