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

Mỗi khi sử dụng phương thức <code>map</code> trong JSX, bạn cần cung cấp một thuộc t&iacute;nh <code>key</code> để tr&aacute;nh gặp cảnh b&aacute;o (v&igrave; l&yacute; do hiệu suất):
<pre class="language-js" data-content="function%20Grades()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20grades%20%3D%20%5B8%2C%2018%2C%2010%2C%2010%5D%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cul%3E%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0grades.map((grade%2C%20index)%20%3D%3E%20%3Cli%20key%3D%7Bindex%7D%3E%7Bgrade%7D%3C%2Fli%3E)%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%3C%2Ful%3E%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function Grades() {
 const grades = [8, 18, 10, 10];

 return &lt;ul&gt;{
 grades.map((grade, index) =&gt; &lt;li key={index}&gt;{grade}&lt;/li&gt;)
 }&lt;/ul&gt;;
}</code></pre>
<code>key</code> n&ecirc;n l&agrave; gi&aacute; trị đại diện duy nhất cho từng phần tử trong danh s&aacute;ch. Tuy nhi&ecirc;n, trong trường hợp c&aacute;c phần tử kh&ocirc;ng phải l&agrave; duy nhất, ch&uacute;ng ta c&oacute; thể sử dụng <code>index</code> được cung cấp bởi phương thức <code>.map</code> l&agrave;m <code>key</code>.
Chỉ số bắt đầu từ 0 v&agrave; tăng l&ecirc;n 1 sau mỗi lần lặp.
Nếu mảng chứa c&aacute;c mục duy nhất th&igrave; c&aacute;c gi&aacute; trị của mục sẽ l&agrave; <code>key</code>:
<pre class="language-js" data-content="function%20Users()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20collection%20of%20user%20ids%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20users%20%3D%20%5B1%2C%2010%2C%203%2C%204%2C%2013%5D%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cul%3E%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0users.map(user%20%3D%3E%20%3Cli%20key%3D%7Buser%7D%3E%7Buser%7D%3C%2Fli%3E)%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%3C%2Ful%3E%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function Users() {
 // collection of user ids
 const users = [1, 10, 3, 4, 13];

 return &lt;ul&gt;{
 users.map(user =&gt; &lt;li key={user}&gt;{user}&lt;/li&gt;)
 }&lt;/ul&gt;;
}</code></pre>
V&igrave; vậy, việc sử dụng <code>index</code> l&agrave;m <code>key</code> chỉ n&ecirc;n l&agrave; phương &aacute;n cuối c&ugrave;ng. Trong c&aacute;c v&iacute; dụ trước đ&acirc;y, v&igrave; ch&uacute;ng ta chỉ l&agrave;m việc với mảng chứa chuỗi v&agrave; mảng số n&ecirc;n việc sử dụng chỉ số l&agrave;m <code>key</code> l&agrave; tạm thời chấp nhận.
Tuy nhi&ecirc;n, khi t&igrave;m hiểu về mảng chứa đối tượng, bạn sẽ được hướng dẫn c&aacute;ch chọn gi&aacute; trị <code>key</code> ph&ugrave; hợp cho từng trường hợp.
<h2 style="text-align: justify;">Tại sao ch&uacute;ng ta cần key?</h2>
Khi một phần tử mảng thay đổi, React cần biết <code>li</code> n&agrave;o cần được cập nhật; do đ&oacute;, n&oacute; y&ecirc;u cầu cung cấp một <code>key</code> duy nhất để chỉ cập nhật phần tử đ&oacute; m&agrave; kh&ocirc;ng x&oacute;a tất cả c&aacute;c <code>li</code> kh&aacute;c v&agrave; hiển thị lại.
Cơ chế n&agrave;y cũng &aacute;p dụng cho thao t&aacute;c th&ecirc;m hoặc x&oacute;a phần tử.
V&iacute; dụ:
<pre class="language-js" data-content="import%20%7BuseState%7D%20from%20%22react%22%3B%0A%0Afunction%20Users()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20collection%20of%20user%20ids%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%5Busers%2C%20setUsers%5D%20%3D%20useState(%5B4%2C%208%2C%2010%2C%2017%2C%2013%5D)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0function%20handleRemoveClick()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20remember%20array%20immutability%20%3B)%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0setUsers(users.slice(1))%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3C%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cul%3E%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0users.map(user%20%3D%3E%20%3Cli%20key%3D%7Buser%7D%3E%7Buser%7D%3C%2Fli%3E)%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%3C%2Ful%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cbutton%20onClick%3D%7BhandleRemoveClick%7D%3ERemove%20first%20user%3C%2Fbutton%3E%0A%C2%A0%C2%A0%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 {useState} from "react";

function Users() {
 // collection of user ids
 const [users, setUsers] = useState([4, 8, 10, 17, 13]);

 function handleRemoveClick() {
 // remember array immutability ;)
 setUsers(users.slice(1));
 }

 return &lt;&gt;
 &lt;ul&gt;{
 users.map(user =&gt; &lt;li key={user}&gt;{user}&lt;/li&gt;)
 }&lt;/ul&gt;
 &lt;button onClick={handleRemoveClick}&gt;Remove first user&lt;/button&gt;
 &lt;/&gt;;
}</code></pre>
Việc sử dụng <code>key={user}</code> với <code>user</code> l&agrave; duy nhất sẽ cho ph&eacute;p React (cụ thể l&agrave; DOM ảo) hiểu rằng v&igrave; c&aacute;c phần tử mới được hiển thị kh&ocirc;ng chứa <code>&lt;li key="4"&gt;</code>, v&igrave; vậy <code>li</code> n&agrave;y cần được x&oacute;a. Tất cả c&aacute;c <code>li</code> kh&aacute;c vẫn được giữ nguy&ecirc;n vẹn.
Nếu kh&ocirc;ng c&oacute; <code>key</code> n&agrave;y, React sẽ phải x&oacute;a tất cả c&aacute;c <code>li</code> v&agrave; sau đ&oacute; th&ecirc;m ch&uacute;ng lại, điều n&agrave;y sẽ l&agrave;m ứng dụng chậm đi rất nhiều.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Mỗi khi lặp qua <code>map</code> trong JSX, bạn cần cung cấp một key.</li>
<li style="font-weight: 400;" aria-level="1"><code>key</code> n&ecirc;n l&agrave; duy nhất. Với phương &aacute;n cuối c&ugrave;ng, bạn c&oacute; thể sử dụng <code>index</code> của lần lặp trong map (đ&oacute; l&agrave; đối số thứ hai).</li>
<li style="font-weight: 400;" aria-level="1"><code>key</code> cho ph&eacute;p React cập nhật DOM một c&aacute;ch hiệu quả với &iacute;t thao t&aacute;c nhất.</li>
</ul>

Key trong mảng