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

Hook hiệu ứng l&agrave; một chủ đề n&acirc;ng cao trong React; do đ&oacute;, ch&uacute;ng ta sẽ học về chủ đề n&agrave;y trong một số chương. C&aacute;c v&iacute; dụ ch&uacute;ng ta đ&atilde; thấy cho đến nay kh&ocirc;ng phải l&agrave; những v&iacute; dụ th&uacute; vị nhất. Do đ&oacute;, ch&uacute;ng ta sẽ sớm thấy c&aacute;c v&iacute; dụ th&uacute; vị hơn. V&iacute; dụ: cập nhật trạng th&aacute;i b&ecirc;n trong hook hiệu ứng (tuy nhi&ecirc;n bạn chưa n&ecirc;n thử ngay b&acirc;y giờ v&igrave; n&oacute; sẽ g&acirc;y ra v&ograve;ng lặp v&ocirc; hạn!).
<h2 style="text-align: justify;">Tr&igrave;nh lắng nghe sự kiện b&ecirc;n ngo&agrave;i React</h2>
Ch&uacute;ng ta đ&atilde; học c&aacute;ch th&ecirc;m tr&igrave;nh lắng nghe sự kiện v&agrave;o phần tử bằng thuộc t&iacute;nh JSX <code>onClick</code> (hoặc tương tự). Tuy nhi&ecirc;n, nếu bạn muốn th&ecirc;m một tr&igrave;nh lắng nghe sự kiện v&agrave;o đối tượng window th&igrave; phải l&agrave;m thế n&agrave;o?
Khi thực hiện h&agrave;nh động tr&ecirc;n, ta đang tương t&aacute;c với m&ocirc;i trường b&ecirc;n ngo&agrave;i v&agrave; điều n&agrave;y được coi l&agrave; một hiệu ứng trong React. Điều đ&oacute; l&agrave; bởi v&igrave; khi component hiển thị, n&oacute; g&acirc;y ra hiệu ứng phụ đến phần tử b&ecirc;n ngo&agrave;i, đ&oacute; l&agrave; đối tượng window. Hiệu ứng phụ l&agrave; th&ecirc;m một tr&igrave;nh lắng nghe sự kiện mới.
Điều n&agrave;y c&oacute; thể hữu &iacute;ch nếu bạn muốn biết khi n&agrave;o người d&ugrave;ng cuộn trang để thực hiện một h&agrave;nh động n&agrave;o đ&oacute;.
Dưới đ&acirc;y l&agrave; c&aacute;ch triển khai:
<pre class="language-js" data-content="import%20%7BuseEffect%7D%20from%20%22react%22%3B%0A%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0useEffect(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0window.addEventListener(%22scroll%22%2C%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22page%20scrolled%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%20%7Bpassive%3A%20true%7D)%3B%0A%C2%A0%C2%A0%7D)%3B%0A%0A%C2%A0%C2%A0return%20(%3C%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3Ch2%3EList%20of%20products%3C%2Fh2%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3Cp%3ELorem%20ipsum...%3C%2Fp%3E%0A%C2%A0%C2%A0%3C%2F%3E)%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {useEffect} from "react";

function App() {
 useEffect(() =&gt; {
 window.addEventListener("scroll", () =&gt; {
 console.log("page scrolled");
 }, {passive: true});
 });

 return (&lt;&gt;
 &lt;h2&gt;List of products&lt;/h2&gt;
 &lt;p&gt;Lorem ipsum...&lt;/p&gt;
 &lt;/&gt;);
}</code></pre>
[___NOTE_<code>{passive: true}</code> cải thiện đ&aacute;ng kể hiệu suất cuộn tr&ecirc;n trang, nhưng n&oacute; ngăn bạn gọi <code>event.preventDefault()</code> b&ecirc;n trong tr&igrave;nh xử l&yacute; cuộn. Đ&acirc;y kh&ocirc;ng phải l&agrave; một t&iacute;nh năng của React m&agrave; li&ecirc;n quan đến c&aacute;ch tr&igrave;nh duyệt hoạt động._NOTE___]
C&aacute;ch n&agrave;y hoạt động nhưng c&oacute; một vấn đề lớn. N&oacute; c&oacute; thể dẫn đến r&ograve; rỉ bộ nhớ v&igrave; mỗi khi component App được hiển thị lại, ch&uacute;ng ta lại th&ecirc;m một tr&igrave;nh lắng nghe sự kiện mới.
Đ&acirc;y l&agrave; l&yacute; do tại sao mỗi khi bạn gọi <code>addEventListener</code> b&ecirc;n trong <code>useEffect</code>, bạn cần dọn dẹp sau đ&oacute; bằng c&aacute;ch gọi <code>removeEventListener</code>.
<h2 style="text-align: justify;">Dọn dẹp sự kiện</h2>
Để dọn dẹp sự kiện, ch&uacute;ng ta cần đặt t&ecirc;n cho h&agrave;m lắng nghe sự kiện. Trong JavaScript thuần t&uacute;y (kh&ocirc;ng c&oacute; React), để th&ecirc;m v&agrave; sau đ&oacute; x&oacute;a một sự kiện, bạn l&agrave;m như sau:
<pre class="language-js" data-content="%2F%2F%20we%20need%20to%20give%20a%20name%20to%20the%20event%20so%20that%20we%20can%20remove%20it%20later%20on%0Afunction%20handleWindowScroll(event)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22page%20scrolled%22)%3B%0A%7D%0A%0A%2F%2F%20call%20the%20handleWindowScroll%20function%20when%20the%20page%20is%20scrolled%0Awindow.addEventListener(%22scroll%22%2C%20handleWindowScroll%2C%20%7Bpassive%3A%20true%7D)%3B%0A%0A%2F%2F%20remove%20the%20event%0Awindow.removeEventListener(%22scroll%22%2C%20handleWindowScroll%2C%20%7Bpassive%3A%20true%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>// we need to give a name to the event so that we can remove it later on
function handleWindowScroll(event) {
 console.log("page scrolled");
}

// call the handleWindowScroll function when the page is scrolled
window.addEventListener("scroll", handleWindowScroll, {passive: true});

// remove the event
window.removeEventListener("scroll", handleWindowScroll, {passive: true});</code></pre>
B&acirc;y giờ quay trở lại <code>useEffect</code>, ch&uacute;ng ta cần trả về một h&agrave;m từ <code>useEffect</code> để dọn dẹp tr&igrave;nh lắng nghe sự kiện n&agrave;y:
<pre class="language-js" data-content="import%20React%2C%20%7BuseEffect%7D%20from%20%22react%22%3B%0A%0Afunction%20App()%20%7B%0A%0A%C2%A0%C2%A0function%20handleWindowScroll(event)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22page%20scrolled%22)%3B%0A%C2%A0%C2%A0%7D%0A%0A%C2%A0%C2%A0useEffect(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0window.addEventListener(%22scroll%22%2C%20handleWindowScroll%2C%20%7Bpassive%3A%20true%7D)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20cleanup%20event%20listener%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0window.removeEventListener(%22scroll%22%2C%20handleWindowScroll%2C%20%7Bpassive%3A%20true%7D)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%7D)%3B%0A%0A%C2%A0%C2%A0return%20(%3C%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3Ch2%3EList%20of%20products%3C%2Fh2%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3Cp%3ELorem%20ipsum...%3C%2Fp%3E%0A%C2%A0%C2%A0%3C%2F%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";

function App() {

 function handleWindowScroll(event) {
 console.log("page scrolled");
 }

 useEffect(() =&gt; {
 window.addEventListener("scroll", handleWindowScroll, {passive: true});

 // cleanup event listener
 return () =&gt; {
 window.removeEventListener("scroll", handleWindowScroll, {passive: true});
 }
 });

 return (&lt;&gt;
 &lt;h2&gt;List of products&lt;/h2&gt;
 &lt;p&gt;Lorem ipsum...&lt;/p&gt;
 &lt;/&gt;);
}</code></pre>
B&acirc;y giờ khi component <code>App</code> bị hủy gắn kết (loại bỏ khỏi DOM) v&agrave; mỗi khi n&oacute; được hiển thị lại, React sẽ dọn dẹp tr&igrave;nh lắng nghe sự kiện để tr&aacute;nh r&ograve; rỉ bộ nhớ.
Lưu &yacute; rằng nếu bạn muốn th&ecirc;m sự kiện v&agrave;o một phần tử được m&ocirc; tả trong JSX, bạn vẫn phải sử dụng c&uacute; ph&aacute;p <code>onClick</code>, <code>onChange</code>, v.v. Điều n&agrave;y chỉ &aacute;p dụng cho việc th&ecirc;m sự kiện v&agrave;o c&aacute;c đối tượng <code>window</code>, <code>document</code> hoặc c&aacute;c đối tượng b&ecirc;n ngo&agrave;i React.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Khi th&ecirc;m một tr&igrave;nh lắng nghe sự kiện b&ecirc;n ngo&agrave;i React, h&atilde;y nhớ dọn dẹp n&oacute;.</li>
<li style="font-weight: 400;" aria-level="1">Bạn c&oacute; thể dọn dẹp một tr&igrave;nh lắng nghe sự kiện bằng c&aacute;ch sử dụng <code>removeEventListener</code> với hai đối số: loại sự kiện v&agrave; t&ecirc;n của h&agrave;m xử l&yacute; sự kiện.</li>
</ul>
Trong chương tiếp theo, ch&uacute;ng ta sẽ t&igrave;m hiểu c&aacute;ch quyết định khi n&agrave;o th&igrave; n&ecirc;n chạy c&aacute;c hiệu ứng.

Event listeners: Trình lắng nghe sự kiện