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

Trước đ&oacute;, ch&uacute;ng ta đ&atilde; viết tr&igrave;nh xử l&yacute; sự kiện ở dạng nội tuyến, tức l&agrave; trực tiếp g&aacute;n một h&agrave;m (kh&ocirc;ng c&oacute; t&ecirc;n) cho sự kiện, v&iacute; dụ:
<pre class="language-js" data-content="%3Cbutton%20onClick%3D%7B()%20%3D%3E%20console.log(%22Logging%20in..%22)%7D%3ELogin%3C%2Fbutton%3E" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>&lt;button onClick={() =&gt; console.log("Logging in..")}&gt;Login&lt;/button&gt;</code></pre>
<code>() =&gt; console.log("Logging in..")</code> l&agrave; h&agrave;m mũi t&ecirc;n được viết trực tiếp trong thuộc t&iacute;nh của phần tử, cho ph&eacute;p bạn thực hiện console.log (hoặc thay đổi trạng th&aacute;i).
Nhưng khi kh&aacute;m ph&aacute; c&aacute;c kh&aacute;i niệm n&acirc;ng cao hơn, ch&uacute;ng ta sẽ tạo c&aacute;c tr&igrave;nh xử l&yacute; sự kiện phức tạp hơn, v&igrave; vậy ta cần định nghĩa c&aacute;c h&agrave;m v&agrave; đặt t&ecirc;n cho ch&uacute;ng:
<pre class="language-js" data-content="function%20handleLoginClick()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Logging%20in..%22)%3B%0A%7D%3B%0A%0A%3Cbutton%20onClick%3D%7BhandleLoginClick%7D%3ELogin%3C%2Fbutton%3E" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function handleLoginClick() {
 console.log("Logging in..");
};

&lt;button onClick={handleLoginClick}&gt;Login&lt;/button&gt;</code></pre>
Đoạn code định nghĩa h&agrave;m <code>handleLoginClick</code> v&agrave; sau đ&oacute; truyền tham chiếu của h&agrave;m v&agrave;o tr&igrave;nh xử l&yacute; <code>onClick</code>.
<h3 style="text-align: justify;">Các l&ocirc;̃i ph&ocirc;̉ bi&ecirc;́n</h3>
Lưu &yacute; l&agrave; ch&uacute;ng ta cần truyền t&ecirc;n h&agrave;m chứ kh&ocirc;ng gọi h&agrave;m, v&igrave; vậy c&acirc;u lệnh sau sẽ kh&ocirc;ng hoạt động:
<pre class="language-js" data-content="%2F%2F%20this%20will%20NOT%20work%0A%3Cbutton%20onClick%3D%7BhandleLoginClick()%7D%3ELogin%3C%2Fbutton%3E" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>// this will NOT work
&lt;button onClick={handleLoginClick()}&gt;Login&lt;/button&gt;</code></pre>
Kết quả l&agrave; h&agrave;m được gọi trong mỗi lần hiển thị v&igrave; <code>()</code> sẽ thực thi n&oacute; ngay lập tức.
<h2 style="text-align: justify;">Quy ước đặt t&ecirc;n</h2>
Ch&uacute;ng ta cần duy tr&igrave; sự tổ chức v&agrave; cấu tr&uacute;c r&otilde; r&agrave;ng trong chương tr&igrave;nh khi c&aacute;c component trở n&ecirc;n phức tạp hơn.
V&igrave; vậy, ta cần c&oacute; một quy ước đặt t&ecirc;n cho tr&igrave;nh xử l&yacute; sự kiện.
H&atilde;y nhớ rằng React kh&ocirc;ng bắt buộc tu&acirc;n thủ c&aacute;c quy ước đặt t&ecirc;n n&agrave;y, v&igrave; vậy chương tr&igrave;nh vẫn hoạt động ngay cả khi bạn kh&ocirc;ng tu&acirc;n thủ quy ước.
Đ&acirc;y l&agrave; quy ước đặt t&ecirc;n m&agrave; bạn n&ecirc;n tu&acirc;n thủ:
<h3 style="text-align: justify;">handleSubjectEvent</h3>
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">T&ecirc;n h&agrave;m lu&ocirc;n bắt đầu bằng <code>handle</code>.</li>
<li style="font-weight: 400;" aria-level="1">Tiếp theo l&agrave; phần m&ocirc; tả: v&iacute; dụ, <code>Login</code> cho n&uacute;t Đăng nhập.</li>
<li style="font-weight: 400;" aria-level="1">Sau đ&oacute; l&agrave; loại sự kiện: <code>Click</code> cho sự kiện nhấp chuột.</li>
</ol>
V&igrave; vậy ch&uacute;ng ta c&oacute; <code>handleLoginClick</code>.
H&atilde;y xem c&aacute;c v&iacute; dụ kh&aacute;c:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>handleFormSubmit</code> cho sự kiện submit biểu mẫu</li>
<li style="font-weight: 400;" aria-level="1"><code>handleNameChange</code> cho sự kiện change tr&ecirc;n trường nhập t&ecirc;n</li>
<li style="font-weight: 400;" aria-level="1"><code>handleLogoutClick</code> cho sự kiện click tr&ecirc;n n&uacute;t Đăng xuất</li>
</ul>
<h2 style="text-align: justify;">Tại sao kh&ocirc;ng sử dụng handleEvent?</h2>
Bạn c&oacute; thể thấy <code>handleClick</code> hoặc <code>handleSubmit</code> đều hoạt động tốt. Tuy nhi&ecirc;n, nếu bạn c&oacute; hai sự kiện c&ugrave;ng loại trong c&ugrave;ng một component l&agrave; vi phạm quy ước đặt t&ecirc;n.
Đ&oacute; l&agrave; l&yacute; do tại sao bạn n&ecirc;n sử dụng <code>handleSubjectEvent</code>.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Việc chuyển từ tr&igrave;nh xử l&yacute; sự kiện trực tiếp sang tr&igrave;nh xử l&yacute; sự kiện được đặt t&ecirc;n cho ph&eacute;p xử l&yacute; những sự kiện phức tạp hơn b&ecirc;n trong tr&igrave;nh xử l&yacute; sự kiện.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><code>&lt;button onClick={handleLoginClick}&gt;Đăng nhập&lt;/button&gt;</code> gọi <code>handleLoginClick</code> khi n&uacute;t được nhấp.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Sử dụng quy ước đặt t&ecirc;n <code>handleSubjectEvent</code> cho c&aacute;c tr&igrave;nh xử l&yacute; sự kiện</li>
</ul>

Đặt tên cho trình xử lý sự kiện