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

Giả sử ch&uacute;ng ta muốn x&acirc;y dựng component <code>&lt;Clock /&gt;</code> hiển thị thời gian hiện tại.
Ch&uacute;ng ta sẽ bắt đầu bằng c&aacute;ch tạo một trạng th&aacute;i t&ecirc;n l&agrave; <code>date</code> v&agrave; khởi tạo gi&aacute; trị ban đầu l&agrave; một thực thể mới của Date. Đ&oacute; l&agrave; <code>new Date()</code>.
Điều n&agrave;y sẽ tạo ra một đối tượng <code>date</code> m&agrave; ta c&oacute; thể gọi <code>.toLocaleTimeString()</code> để nhận được chuỗi thời gian, v&iacute; dụ: <code>09:08:43</code> (định dạng hh:mm:ss).
Nếu bạn muốn xem thử code trong JavaScript trước khi chuyển sang React, h&atilde;y quan s&aacute;t dưới đ&acirc;y:
<pre class="language-js" data-content="const%20date%20%3D%20new%20Date()%3B%0Aconsole.log(date.toLocaleTimeString())%3B%20%2F%2F%2009%3A08%3A43%20(depending%20on%20the%20time%20of%20the%20day)" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const date = new Date();
console.log(date.toLocaleTimeString()); // 09:08:43 (depending on the time of the day)</code></pre>
H&atilde;y tạo component React l&agrave;m điều tương tự:
<pre class="language-js" data-content="import%20%7BuseState%2C%20useEffect%7D%20from%20%22react%22%3B%0A%0Afunction%20Clock()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%5Bdate%2C%20setDate%5D%20%3D%20useState(new%20Date())%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Ch2%3E%7Bdate.toLocaleTimeString()%7D%3C%2Fh2%3E%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {useState, useEffect} from "react";

function Clock() {
 const [date, setDate] = useState(new Date());

 return &lt;h2&gt;{date.toLocaleTimeString()}&lt;/h2&gt;
}</code></pre>
B&acirc;y giờ, component n&agrave;y sẽ hiển thị ng&agrave;y v&agrave; giờ m&agrave; n&oacute; được hiển thị lần đầu v&agrave; kh&ocirc;ng cập nhật lại thời gian nữa.
Ch&uacute;ng ta cần cập nhật trạng th&aacute;i <code>date</code> mỗi 1 gi&acirc;y với một thực thể mới của <code>Date</code>.
V&igrave; vậy trong JavaScript:
<pre class="language-js" data-content="let%20date%20%3D%20new%20Date()%3B%0Aconsole.log(date.toLocaleTimeString())%3B%0AsetInterval(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0date%20%3D%20new%20Date()%3B%20%2F%2F%20get%20a%20new%20instance%20of%20date%20every%20second%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(date.toLocaleTimeString())%3B%20%2F%2F%20shows%20the%20time%20every%20second%0A%7D%2C%201_000)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>let date = new Date();
console.log(date.toLocaleTimeString());
setInterval(() =&gt; {
 date = new Date(); // get a new instance of date every second
 console.log(date.toLocaleTimeString()); // shows the time every second
}, 1_000);</code></pre>
Lưu &yacute;: <code>setInterval</code> cho ph&eacute;p bạn gọi một h&agrave;m sau mỗi X mili gi&acirc;y. Trong v&iacute; dụ n&agrave;y, ch&uacute;ng ta đặt l&agrave; 1000 mili gi&acirc;y để <code>setInterval</code> gọi h&agrave;m sau mỗi 1 gi&acirc;y.
Tuy nhi&ecirc;n, <code>setInterval</code> kh&ocirc;ng đảm bảo hoạt động ch&iacute;nh x&aacute;c 100%; nếu tr&igrave;nh duyệt đang bận với c&aacute;c t&aacute;c vụ kh&aacute;c th&igrave; việc gọi h&agrave;m c&oacute; thể bị trễ hơn 1000 mili gi&acirc;y. V&igrave; vậy, đồng hồ sẽ kh&ocirc;ng ho&agrave;n to&agrave;n ch&iacute;nh x&aacute;c.
B&acirc;y giờ với React, ch&uacute;ng ta sẽ l&agrave;m cho component gọi <code>useEffect</code> để khởi tạo interval:
<pre class="language-js" data-content="useEffect(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0setInterval(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20set%20a%20new%20instance%20of%20date%20every%20second%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0setDate(new%20Date())%3B%C2%A0%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%201_000)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20TODO%3A%20still%20need%20to%20cleanup%20the%20side%20effect%0A%7D%2C%20%5B%5D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>useEffect(() =&gt; {
 setInterval(() =&gt; {
 // set a new instance of date every second
 setDate(new Date()); 
 }, 1_000);
 // TODO: still need to cleanup the side effect
}, []);</code></pre>
Ch&uacute;ng ta sử dụng <code>useEffect</code> để thiết lập hiệu ứng chỉ chạy một lần bằng c&aacute;ch cung cấp <code>[]</code> (mảng rỗng) l&agrave;m tham số thứ hai cho <code>useEffect</code>.
Bạn c&oacute; thể hiểu đoạn code tr&ecirc;n như sau:
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">React hiển thị nội dung trong thẻ <code>&lt;h2&gt;&lt;/h2&gt;</code> c&ugrave;ng với thời gian.</li>
<li style="font-weight: 400;" aria-level="1">Sau khi hiển thị lần đầu ti&ecirc;n, <code>useEffect</code> chỉ chạy h&agrave;m b&ecirc;n trong n&oacute; một lần duy nhất.</li>
<li style="font-weight: 400;" aria-level="1">H&agrave;m đ&oacute; gọi <code>setInterval</code> để l&ecirc;n lịch gọi h&agrave;m <code>setDate(new Date())</code> mỗi gi&acirc;y một lần.</li>
<li style="font-weight: 400;" aria-level="1">Mỗi lần gọi <code>setDate()</code>, component sẽ được hiển thị lại, hiển thị thời gian được cập nhật tr&ecirc;n m&agrave;n h&igrave;nh.</li>
</ol>
<h2 style="text-align: justify;">Dọn dẹp hiệu ứng</h2>
Đoạn code tr&ecirc;n g&acirc;y ra lỗi r&ograve; rỉ bộ nhớ v&igrave; ch&uacute;ng ta chưa x&oacute;a interval được tạo với <code>setInterval</code>. Dưới đ&acirc;y l&agrave; c&aacute;ch giải quyết vấn đề trong JavaScript:
<pre class="language-js" data-content="let%20date%20%3D%20new%20Date()%3B%0Aconsole.log(date.toLocaleTimeString())%3B%0A%2F%2F%20save%20intervalId%20in%20a%20variable%20so%20we%20can%20clear%20it%20later%20on%0Aconst%20intervalId%20%3D%20setInterval(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0date%20%3D%20new%20Date()%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(date.toLocaleTimeString())%3B%0A%7D%2C%201_000)%3B%0A%0A%2F%2F%20when%20you%20want%20to%20clear%20the%20interval%3A%C2%A0%C2%A0%0AclearInterval(intervalId)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>let date = new Date();
console.log(date.toLocaleTimeString());
// save intervalId in a variable so we can clear it later on
const intervalId = setInterval(() =&gt; {
 date = new Date();
 console.log(date.toLocaleTimeString());
}, 1_000);

// when you want to clear the interval: 
clearInterval(intervalId);</code></pre>
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><code>const date = new Date();</code> tạo ra một thực thể mới của Date.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><code>date.toLocaleTimeString()</code> hiển thị thời gian hiện tại theo định dạng <code>hh:mm:ss</code> (c&oacute; thể kh&aacute;c nhau t&ugrave;y thuộc v&agrave;o cấu h&igrave;nh ng&ocirc;n ngữ/v&ugrave;ng địa l&yacute; tr&ecirc;n m&aacute;y của bạn).</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><code>setInterval</code> l&ecirc;n lịch gọi một h&agrave;m sau mỗi X mili gi&acirc;y.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><code>clearInterval(intervalId)</code> cho ph&eacute;p bạn x&oacute;a một interval được tạo ra bằng <code>setInterval</code>.</li>
</ul>

Tích hợp đồng hồ vào trang web