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ử bạn c&oacute; h&agrave;m getUser sau:
<pre class="language-js" data-content="function%20sayHello()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%22Welcome!%22%3B%0A%7D%0A%0Afunction%20getUser()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2Freturn%20the%20id%20and%20a%20function%20that%20welcomes%20the%20user%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%5B15%2C%20sayHello%5D%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function sayHello() {
 return "Welcome!";
}

function getUser() {
 //return the id and a function that welcomes the user
 return [15, sayHello];
}</code></pre>
H&agrave;m trả về c&aacute;i g&igrave;?
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>getUser()</code> n&ecirc;n trả về một mảng.</li>
<li style="font-weight: 400;" aria-level="1">Mảng n&agrave;y chứa hai phần tử.</li>
<li style="font-weight: 400;" aria-level="1">Phần tử đầu ti&ecirc;n l&agrave; <code>number</code>.</li>
<li style="font-weight: 400;" aria-level="1">Phần tử thứ hai l&agrave; <code>function</code>.</li>
</ul>
<code>sayHello</code> l&agrave; một tham chiếu của h&agrave;m m&agrave; ch&uacute;ng ta c&oacute; thể gọi sau đ&oacute; (ch&uacute;ng ta sẽ t&igrave;m hiểu sau).
Nhưng c&acirc;u hỏi l&agrave;: Ch&uacute;ng ta c&oacute; thể sử dụng destructuring sau khi gọi <code>getUser()</code> kh&ocirc;ng?
<pre class="language-js" data-content="const%20result%20%3D%20getUser()%3B%0A%0Aconst%20id%20%3D%20result%5B0%5D%3B%0Aconst%20sayHello%20%3D%20result%5B1%5D%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const result = getUser();

const id = result[0];
const sayHello = result[1];</code></pre>
Ch&uacute;ng ta c&oacute; thể destructure <code>getUser()</code> kh&ocirc;ng?
Ho&agrave;n to&agrave;n c&oacute; thể! C&uacute; ph&aacute;p về cơ bản l&agrave; giống nhau, nhưng ch&uacute;ng ta đ&atilde; chia nhỏ ra v&igrave; c&uacute; ph&aacute;p thể g&acirc;y nhầm lẫn ban đầu.
H&atilde;y thực hiện từng bước:
<pre class="language-js" data-content="const%20result%20%3D%20getUser()%3B%0Aconst%20%5Bid%2C%20sayHello%5D%20%3D%20result%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const result = getUser();
const [id, sayHello] = result;</code></pre>
Đ&acirc;y l&agrave; c&aacute;ch ch&uacute;ng ta destructure biến <code>result</code>, nhưng ch&uacute;ng ta c&oacute; thể n&acirc;ng cấp th&ecirc;m v&agrave; destructure <code>getUser()</code> trực tiếp m&agrave; kh&ocirc;ng cần tạo ra biến trung gian (<code>result</code>):
<pre class="language-js" data-content="const%20%5Bid%2C%20sayHello%5D%20%3D%20getUser()%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const [id, sayHello] = getUser();</code></pre>
V&igrave; vậy, ở đ&acirc;y ch&uacute;ng ta đang destructure <code>id</code> v&agrave; <code>sayHello</code>, tương ứng với chỉ số 0 v&agrave; 1, của dữ liệu được trả về từ <code>getUser()</code>.
<h2 style="text-align: justify;">L&agrave;m thế n&agrave;o để gọi sayHello?</h2>
V&igrave; <code>sayHello</code> l&agrave; một h&agrave;m, bạn c&oacute; thể gọi n&oacute; bằng c&aacute;ch th&ecirc;m <code>()</code>. Sau đ&acirc;y l&agrave; v&iacute; dụ đầy đủ:
<pre class="language-js" data-content="function%20sayHello()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%22Welcome!%22%3B%0A%7D%0A%0Afunction%20getUser()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2Freturn%20the%20id%20and%20a%20function%20that%20welcomes%20the%20user%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%5B15%2C%20sayHello%5D%3B%0A%7D%0A%0Aconst%20%5Bid%2C%20sayHelloFunction%5D%20%3D%20getUser()%3B%0Aconsole.log(id)%3B%20%2F%2F15%0Aconsole.log(sayHelloFunction())%3B%20%2F%2FWelcome!" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function sayHello() {
 return "Welcome!";
}

function getUser() {
 //return the id and a function that welcomes the user
 return [15, sayHello];
}

const [id, sayHelloFunction] = getUser();
console.log(id); //15
console.log(sayHelloFunction()); //Welcome!</code></pre>
Vậy tại sao ch&uacute;ng ta lại l&agrave;m như vậy? Đ&oacute; sẽ được giải th&iacute;ch trong chương tiếp theo! H&atilde;y tiếp tục theo d&otilde;i!
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
Bạn c&oacute; thể destructure từ h&agrave;m, miễn l&agrave; h&agrave;m đ&oacute; trả về một mảng phần tử.
[___NOTE_
Array destructuring l&agrave; một c&uacute; ph&aacute;p r&uacute;t gọn v&igrave; n&oacute; gi&uacute;p ch&uacute;ng ta dễ d&agrave;ng tạo ra c&aacute;c biến từ c&aacute;c phần tử của mảng.
Bạn c&oacute; thể nhận thấy rằng việc trả về một mảng từ h&agrave;m cũng cho ph&eacute;p trả về nhiều biến (c&oacute; thể c&oacute; c&ugrave;ng hoặc kh&aacute;c kiểu dữ liệu).
Kh&aacute;i niệm n&agrave;y được hỗ trợ trong nhiều ng&ocirc;n ngữ lập tr&igrave;nh. V&agrave; đ&acirc;y cũng l&agrave; một kh&aacute;i niệm quan trọng cần biết trước khi học React Hook.
_NOTE___]

Destructuring với mảng - Nâng cao