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

Sau n&agrave;y trong kh&oacute;a học, khi ch&uacute;ng ta n&oacute;i th&ecirc;m về Virtual DOM, bạn sẽ thấy React c&oacute; thể h&igrave;nh dung c&aacute;ch cập nhật component một c&aacute;ch hiệu quả khi một gi&aacute; trị thay đổi.
Để gi&uacute;p React đạt được hiệu suất tối ưu, điều quan trọng l&agrave; tu&acirc;n theo một trong những quy tắc quan trọng nhất của React, đ&oacute; l&agrave;:
Tất cả c&aacute;c component React kh&ocirc;ng bao giờ thay đổi c&aacute;c props của ch&uacute;ng.
Điều n&agrave;y c&oacute; nghĩa l&agrave; bạn kh&ocirc;ng n&ecirc;n thay đổi gi&aacute; trị của prop b&ecirc;n trong component; h&atilde;y xem một v&iacute; dụ:
<pre class="language-js" data-content="function%20Notifications(props)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20%E2%9D%8C%20do%20NOT%20do%20this%20(this%20is%20changing%20the%20props)%0A%C2%A0%C2%A0%C2%A0%C2%A0props.data.count%20%3D%20props.data.count%20-%201%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Ch3%3EYou%20have%20%7Bprops.data.count%7D%20unread%20notifications.%3C%2Fh3%3E%3B%0A%7D%0A%0Aconst%20notifications%20%3D%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0count%3A%203%0A%7D%3B%0A%0Aconst%20element%20%3D%20%3CNotifications%20data%3D%7Bnotifications%7D%20%2F%3E%3B%0Aconsole.log(notifications)%3B%20%2F%2F%20%7Bcount%3A%202%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function Notifications(props) {
 // ❌ 
 props.data.count = props.data.count - 1;
 return &lt;h3&gt;You have {props.data.count} unread notifications.&lt;/h3&gt;;
}

const notifications = {
 count: 3
};

const element = &lt;Notifications data={notifications} /&gt;;
console.log(notifications); // {count: 2}</code></pre>
Để &yacute; việc sử dụng phần tử <code>&lt;Notifications&nbsp; data={notifications}/&gt;</code> c&oacute; t&aacute;c dụng phụ l&agrave; thay đổi gi&aacute; trị của props (<code>notifications.count</code>).
Thay v&agrave;o đ&oacute;, code n&ecirc;n được viết như sau:
<pre class="language-js" data-content="function%20Notifications(props)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20%E2%98%91%EF%B8%8F%20this%20is%20okay%20because%20we're%20not%20changing%20the%20props%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20value%20%3D%20props.data.count%20-%201%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Ch3%3EYou%20have%20%7Bvalue%7D%20unread%20notifications.%3C%2Fh3%3E%3B%0A%7D%0A%0Aconst%20notifications%20%3D%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0count%3A%203%0A%7D%3B%0A%0Aconst%20element%20%3D%20%3CNotifications%20data%3D%7Bnotifications%7D%20%2F%3E%3B%0Aconsole.log(notifications)%3B%20%2F%2F%20%7Bcount%3A%203%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function Notifications(props) {
 // ☑️ 
 const value = props.data.count - 1;
 return &lt;h3&gt;You have {value} unread notifications.&lt;/h3&gt;;
}

const notifications = {
 count: 3
};

const element = &lt;Notifications data={notifications} /&gt;;
console.log(notifications); // {count: 3}</code></pre>
V&igrave; vậy, bạn n&ecirc;n coi props l&agrave; thuộc t&iacute;nh chỉ đọc.
<h2 style="text-align: justify;">C&ugrave;ng đầu v&agrave;o, c&ugrave;ng đầu ra</h2>
Để duy tr&igrave; triết l&yacute; c&ugrave;ng đầu v&agrave;o, c&ugrave;ng đầu ra, component kh&ocirc;ng n&ecirc;n sửa đổi bất kỳ biến n&agrave;o b&ecirc;n ngo&agrave;i React. V&iacute; dụ, đ&acirc;y kh&ocirc;ng phải l&agrave; h&agrave;m thuần t&uacute;y v&agrave; cần được tr&aacute;nh:
<pre class="language-js" data-content="let%20count%20%3D%200%3B%0A%0Afunction%20Counter%20()%20%7B%0A%C2%A0%C2%A0%2F%2F%20%E2%9D%8C%20impure%20-%20do%20NOT%20use%0A%C2%A0%C2%A0count%20%3D%20count%20%2B%201%3B%0A%0A%C2%A0%C2%A0return%20%3Cp%3E%7Bcount%7D%3C%2Fp%3E%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>let count = 0;

function Counter () {
 // ❌ kh&ocirc;ng thu&acirc;̀n túy- kh&ocirc;ng dùng
 count = count + 1;

 return &lt;p&gt;{count}&lt;/p&gt;;
}</code></pre>
Sau n&agrave;y, ch&uacute;ng ta sẽ học c&aacute;ch sử dụng <code>state</code> v&agrave; <code>effects</code> (nếu cần thiết) để l&agrave;m cho c&aacute;c component linh hoạt hơn trong khi vẫn duy tr&igrave; t&iacute;nh thuần t&uacute;y.
<h2 style="text-align: justify;">Tại sao cần tu&acirc;n thủ quy tắc của React</h2>
React kh&ocirc;ng cho ph&eacute;p c&aacute;c component thay đổi props v&igrave; khi c&aacute;c h&agrave;m l&agrave; thuần t&uacute;y, điều đ&oacute; c&oacute; nghĩa l&agrave; từ c&ugrave;ng một đầu v&agrave;o (props), ch&uacute;ng sẽ lu&ocirc;n cho ra c&ugrave;ng một kết quả (đầu ra).
Điều n&agrave;y cho ph&eacute;p React nhanh ch&oacute;ng x&aacute;c định c&aacute;c component n&agrave;o cần được hiển thị lại khi một prop cụ thể được cập nhật. Qu&aacute; tr&igrave;nh n&agrave;y diễn ra như một phần của Virtual DOM. Điều n&agrave;y trở n&ecirc;n rất quan trọng khi ứng dụng chứa h&agrave;ng trăm, thậm ch&iacute; h&agrave;ng ngh&igrave;n component cần được hiển thị lại.
Ngo&agrave;i ra cũng c&oacute; những lợi &iacute;ch kh&aacute;c li&ecirc;n quan đến việc kiểm thử v&agrave; dự đo&aacute;n, cũng như c&aacute;c t&iacute;nh năng kết hợp mới trong React 18 m&agrave; ch&uacute;ng ta sẽ thảo luận sau trong kh&oacute;a học.
Việc kiểm thử h&agrave;m thuần t&uacute;y cũng rất dễ d&agrave;ng v&agrave; n&oacute; gi&uacute;p bạn ngăn chặn c&aacute;c lỗi kh&ocirc;ng mong đợi.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Tất cả c&aacute;c component React kh&ocirc;ng bao giờ thay đổi c&aacute;c props của ch&uacute;ng.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">React y&ecirc;u cầu c&aacute;c component l&agrave; thuần t&uacute;y để c&oacute; thể cập nhật DOM một c&aacute;ch hiệu quả chỉ khi cần thiết.</li>
</ul>

Hàm thuần túy (Pure function)