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 chương n&agrave;y, ch&uacute;ng ta sẽ t&igrave;m hiểu về trạng thái trong React khi sử dụng hook.
Hiện tại, ch&uacute;ng ta sẽ tập trung v&agrave;o trạng thái hơn l&agrave; hook, sau đ&oacute;, <a href="https://tek4.vn/">Tek4</a> sẽ d&agrave;nh ra một v&agrave;i chương để giải th&iacute;ch trạng thái v&agrave; hook từng bước.
<h2 style="text-align: justify;">Trạng th&aacute;i l&agrave; g&igrave;?</h2>
Trạng thái đề cập đến bất kỳ biến n&agrave;o được định nghĩa b&ecirc;n trong Component với mục đ&iacute;ch cập nhật sau n&agrave;y.
V&iacute; dụ: khi tạo component <code>&lt;Stopwatch /&gt;</code>, ch&uacute;ng ta cần theo d&otilde;i số gi&acirc;y đ&atilde; tr&ocirc;i qua. Số gi&acirc;y đ&atilde; tr&ocirc;i qua kh&ocirc;ng thể l&agrave; prop v&igrave; hai l&yacute; do sau:
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Thuộc t&iacute;nh n&ecirc;n được lưu giữ b&ecirc;n trong component <code>&lt;Stopwatch /&gt;</code> thay v&igrave; được truyền từ b&ecirc;n ngo&agrave;i v&agrave;o</li>
<li style="font-weight: 400;" aria-level="1">Thuộc t&iacute;nh cần được cập nhật/thay đổi! Prop được xem như dữ liệu đầu v&agrave;o kh&ocirc;ng thay đổi v&agrave; kh&ocirc;ng thể thay đổi gi&aacute; trị của ch&uacute;ng trong qu&aacute; tr&igrave;nh chạy.</li>
</ol>
Nếu bạn đang thắc mắc về &yacute; nghĩa của c&acirc;u n&oacute;i "thuộc t&iacute;nh n&ecirc;n được lưu trữ b&ecirc;n trong component thay v&igrave; được truyền từ b&ecirc;n ngo&agrave;i", h&atilde;y nhớ rằng prop được truyền từ b&ecirc;n ngo&agrave;i v&agrave;o, v&iacute; dụ:
<pre class="language-js" data-content="%3CStopwatch%20theme%3D%22dark%22%20%2F%3E" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>&lt;Stopwatch theme="dark" /&gt;</code></pre>
Theme l&agrave; prop v&igrave; n&oacute; được truyền từ b&ecirc;n ngo&agrave;i v&agrave;o.
Theme kh&ocirc;ng thể được thay đổi từ b&ecirc;n trong component Stopwatch; n&oacute; phải được thay đổi từ b&ecirc;n ngo&agrave;i. Khi n&oacute; được thay đổi từ b&ecirc;n ngo&agrave;i, n&oacute; sẽ được xử l&yacute; lại bởi component.
Đ&acirc;y l&agrave; l&yacute; do tại sao theme l&agrave; một prop. Ch&uacute;ng ta kh&ocirc;ng c&oacute; &yacute; định cập nhật n&oacute; từ b&ecirc;n trong Stopwatch.
Trong khi đ&oacute;, số gi&acirc;y đ&atilde; tr&ocirc;i qua l&agrave; một trạng thái v&igrave; ch&uacute;ng ta c&oacute; &yacute; định bắt đầu/ngừng đếm thời gian từ b&ecirc;n trong component <code>&lt;Stopwatch /&gt;</code>.
<h2 style="text-align: justify;">Điều g&igrave; xảy ra khi trạng th&aacute;i thay đổi?</h2>
Khi state được cập nhật, ReactDOM sẽ tự động hiển thị lại Component một c&aacute;ch hiệu quả tr&ecirc;n DOM.&nbsp;
<h2 style="text-align: justify;">Ví dụ khác</h2>
H&atilde;y xem một v&iacute; dụ kh&aacute;c.
Giả sử bạn đang tạo component <code>&lt;Item /&gt;</code> chứa một bộ đếm.
Người d&ugrave;ng c&oacute; thể tăng/giảm bộ đếm bằng c&aacute;ch nhấn c&aacute;c n&uacute;t <code>+</code> v&agrave; <code>-</code> để chọn số lượng sản phẩm.
<code>counter</code> l&agrave; một biến trạng th&aacute;i sẽ được cập nhật khi người d&ugrave;ng nhấp v&agrave;o c&aacute;c n&uacute;t <code>+</code> v&agrave; <code>-</code>.
Khi người d&ugrave;ng nhấp v&agrave;o c&aacute;c n&uacute;t n&agrave;y, <code>counter</code> sẽ được cập nhật tự động tr&ecirc;n giao diện người d&ugrave;ng.
V&igrave; vậy, <code>0 item(s)</code> sẽ hiển thị th&agrave;nh <code>1 item(s)</code> khi người d&ugrave;ng nhấp v&agrave;o n&uacute;t +.
Bạn sẽ x&acirc;y dựng component n&agrave;y trong v&agrave;i chương sắp tới (sau khi t&igrave;m hiểu về State, hook &amp; Events), v&igrave; vậy h&atilde;y tiếp tục theo d&otilde;i!
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Trạng thái đề cập đến bất kỳ biến n&agrave;o được định nghĩa b&ecirc;n trong Component với mục đ&iacute;ch cập nhật sau n&agrave;y.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Biến trạng thái c&oacute; thể được cập nhật từ b&ecirc;n trong component.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Khi một biến trạng thái được cập nhật, component sẽ tự động hiển thị lại.</li>
</ul>

Trạng thái với hook