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

Dự &aacute;n n&agrave;y sẽ giới thiệu c&aacute;ch t&iacute;ch hợp bản đồ đơn giản v&agrave;o ứng dụng web bằng c&aacute;ch sử dụng React.
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/f9716e9a-8166-47b4-9c9b-9d5523c1c37e" alt="project-6" />
Sau khi t&igrave;m hiểu về trạng th&aacute;i trong <code>useEffect</code>, ch&uacute;ng ta sẽ triển khai một dự &aacute;n bản đồ n&acirc;ng cao hơn.
<h2 style="text-align: justify;">Mapbox</h2>
Ch&uacute;ng ta sẽ sử dụng Mapbox v&igrave; dịch vụ n&agrave;y cho ph&eacute;p ch&uacute;ng ta th&ecirc;m bản đồ v&agrave;o trang web miễn ph&iacute; (v&agrave; bạn cũng kh&ocirc;ng cần th&ecirc;m số thẻ t&iacute;n dụng).
C&aacute;ch tạo t&agrave;i khoản sẽ được hướng dẫn chi tiết trong phần b&agrave;i tập. Bạn cần tạo t&agrave;i khoản để lấy kh&oacute;a truy cập, đ&oacute; l&agrave; một chuỗi k&yacute; tự m&agrave; Mapbox sử dụng để nhận dạng bạn, từ đ&oacute; giới hạn việc sử dụng API của bạn.
Với c&aacute;c t&agrave;i khoản miễn ph&iacute;, bạn c&oacute; khoảng 50.000 lượt tải bản đồ mỗi th&aacute;ng. Nếu bạn muốn mở rộng th&ecirc;m, h&atilde;y xem x&eacute;t n&acirc;ng cấp t&agrave;i khoản.
<h2 style="text-align: justify;">Tạo bản đồ</h2>
Để tạo bản đồ, ch&uacute;ng ta cần gọi <code>mapboxgl.Map</code>. Chi tiết sẽ được cung cấp trong b&agrave;i tập tiếp theo. Code trong b&agrave;i học n&agrave;y chỉ l&agrave; giả m&atilde;.
<pre class="language-js" data-content="new%20mapboxgl.Map(%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0container%3A%20%22map%22%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0center%3A%20%5B10%2C%205%5D%2C%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>new mapboxgl.Map({
 container: "map",
 center: [10, 5],
});</code></pre>
Đoạn code tr&ecirc;n sẽ tạo ra một bản đồ v&agrave; bản đồ được căn giữa tại điểm c&oacute; kinh độ 10 v&agrave; vĩ độ 5.
Để &yacute; <code>container: "map"</code> sẽ gọi <code>document.querySelector("#map")</code> để t&igrave;m phần tử DOM c&oacute; id l&agrave; <code>"map"</code>, đ&acirc;y l&agrave; phần tử DOM m&agrave; bản đồ sẽ được th&ecirc;m v&agrave;o.
Lưu &yacute; rằng <code>"map"</code> l&agrave; <code>container</code> kh&ocirc;ng phải l&agrave; c&aacute;ch l&agrave;m hiệu quả nhất. Ch&uacute;ng ta c&oacute; thể cải thiện với <code>refs</code>, tuy nhi&ecirc;n, ch&uacute;ng ta chưa học về chủ đề n&agrave;y, v&igrave; vậy h&atilde;y tiếp tục theo d&otilde;i!
<h2 style="text-align: justify;">Cần dọn dẹp?</h2>
V&iacute; dụ n&agrave;y kh&ocirc;ng y&ecirc;u cầu bất kỳ c&ocirc;ng việc dọn dẹp n&agrave;o v&igrave; ngay khi <code>&lt;div id="map"&gt;&lt;/div&gt;</code> bị x&oacute;a khỏi DOM (khi component được hủy gắn kết) th&igrave; Mapbox sẽ thực hiện c&aacute;c bước dọn dẹp cần thiết. Tuy nhi&ecirc;n, nếu bạn th&ecirc;m c&aacute;c sự kiện với API <code>map.on("event")</code>, h&atilde;y nhớ dọn dẹp ch&uacute;ng bằng <code>map.off("event")</code> bằng c&aacute;ch trả về một h&agrave;m trong <code>useEffect</code>.
Bạn sẽ triển khai điều đ&oacute; trong b&agrave;i tập sau đ&acirc;y!
<h2 style="text-align: justify;">Tại sao kh&ocirc;ng sử dụng g&oacute;i?</h2>
Một số g&oacute;i cho ph&eacute;p bạn sử dụng Mapbox với React. Ch&uacute;ng thường được m&ocirc; tả l&agrave; "React binding for Mapbox" (T&iacute;ch hợp c&aacute;c t&iacute;nh năng của Mapbox v&agrave;o React). V&iacute; dụ: react-mapbox-gl.
Việc sử dụng c&aacute;c g&oacute;i đ&oacute; c&oacute; một số nhược điểm sau:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Tăng k&iacute;ch thước ứng dụng (tăng k&iacute;ch thước của file JavaScript, l&agrave;m chậm trang web)</li>
<li style="font-weight: 400;" aria-level="1">Kh&oacute; khăn khi gặp sự cố: V&igrave; c&aacute;c g&oacute;i n&agrave;y đ&oacute;ng g&oacute;i v&agrave; bao quanh một thư viện gốc n&ecirc;n khi gặp sự cố, bạn cần t&igrave;m hiểu v&agrave; tra cứu t&agrave;i liệu của thư viện gốc để giải quyết vấn đề.</li>
<li style="font-weight: 400;" aria-level="1">Quan trọng nhất, hiện tại <a href="https://tek4.vn/">Tek4</a> chỉ muốn bạn t&igrave;m hiểu c&aacute;ch thức hoạt động của component thay v&igrave; biết c&aacute;ch sử dụng g&oacute;i.</li>
</ul>
H&atilde;y nhớ rằng điều đ&oacute; kh&ocirc;ng c&oacute; nghĩa bạn kh&ocirc;ng bao giờ n&ecirc;n sử dụng c&aacute;c g&oacute;i n&agrave;y. N&oacute; t&ugrave;y thuộc v&agrave;o bạn v&agrave; phụ thuộc v&agrave;o mục đ&iacute;ch x&acirc;y dựng của bạn. Đ&ocirc;i khi, nếu việc sử dụng g&oacute;i l&agrave;m cho việc sử dụng c&aacute;c thư viện b&ecirc;n ngo&agrave;i trở n&ecirc;n dễ d&agrave;ng hơn th&igrave; bạn c&oacute; thể sử dụng g&oacute;i! H&atilde;y đảm bảo bạn hiểu r&otilde; c&aacute;ch thức hoạt động của thư viện gốc trước khi sử dụng c&aacute;c g&oacute;i trừu tượng cao cấp.

Tích hợp bản đồ vào trang web