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 s&acirc;u hơn về array destructuring, một kh&aacute;i niệm quan trọng cần học trước khi kh&aacute;m ph&aacute; về Hook.
Ngay cả khi bạn đ&atilde; biết về array destructuring, h&atilde;y tiếp tục b&agrave;i học v&igrave; b&agrave;i viết sẽ tr&igrave;nh b&agrave;y về một số kh&aacute;i niệm n&acirc;ng cao.
<h2 style="text-align: justify;">Array destructuring cơ bản</h2>
H&atilde;y bắt đầu với v&iacute; dụ cơ bản nhất về array destructuring.
Array destructuring cho ph&eacute;p bạn sử dụng c&uacute; ph&aacute;p ngắn gọn hơn khi đọc nhiều phần tử của một mảng. V&iacute; dụ, thay v&igrave; viết:
<pre class="language-js" data-content="const%20dimensions%20%3D%20%5B20%2C%205%5D%0A%0Aconst%20width%20%3D%20dimensions%5B0%5D%3B%20%2F%2F20%0Aconst%20height%20%3D%20dimensions%5B1%5D%3B%20%2F%2F5" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const dimensions = [20, 5]

const width = dimensions[0]; //20
const height = dimensions[1]; //5</code></pre>
Bạn c&oacute; thể tạo hai biến <code>width</code> v&agrave; <code>height</code> bằng một c&uacute; ph&aacute;p ngắn hơn gọi l&agrave; array destructuring:
<pre class="language-js" data-content="const%20dimensions%20%3D%20%5B20%2C%205%5D%0A%0Aconst%20%5Bwidth%2C%20height%5D%20%3D%20dimensions%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const dimensions = [20, 5]

const [width, height] = dimensions;</code></pre>
C&aacute;ch thức hoạt động như sau: <code>width</code> được g&aacute;n cho <code>dimensions[0]</code> (v&igrave; n&oacute; l&agrave; phần tử đầu ti&ecirc;n trong c&uacute; ph&aacute;p destructuring) v&agrave; <code>height</code> được g&aacute;n cho <code>dimensions[1]</code> (v&igrave; n&oacute; l&agrave; phần tử thứ hai trong c&uacute; ph&aacute;p destructuring).
Thứ tự của c&aacute;c biến b&ecirc;n trong c&uacute; ph&aacute;p <code>[]</code> tương ứng với chỉ số của mảng được destructure.
Một v&iacute; dụ kh&aacute;c về array destructuring:
<pre class="language-js" data-content="const%20point%20%3D%20%5B3.3124%2C%2014.52028%2C%2010%5D%3B%20%2F%2Fcoordinates%0A%0Aconst%20%5Blat%2C%20lng%2C%20elevation%5D%20%3D%20point%0A%0Aconsole.log(lat)%3B%20%2F%2F3.3124%0Aconsole.log(lng)%3B%20%2F%2F14.52028%0Aconsole.log(elevation)%3B%20%2F%2F10" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const point = [3.3124, 14.52028, 10]; //coordinates

const [lat, lng, elevation] = point

console.log(lat); //3.3124
console.log(lng); //14.52028
console.log(elevation); //10</code></pre>
C&uacute; ph&aacute;p n&agrave;y c&ograve;n được gọi l&agrave; sugar syntax (c&uacute; ph&aacute;p r&uacute;t gọn) gi&uacute;p code dễ đọc hơn (khi bạn l&agrave;m quen dần, code sẽ trở n&ecirc;n dễ đọc hơn).
<h2 style="text-align: justify;">Mảng chứa c&aacute;c kiểu dữ liệu kh&aacute;c nhau</h2>
Array destructuring vẫn hoạt động ngay cả khi mảng chứa c&aacute;c kiểu dữ liệu kh&aacute;c nhau, v&iacute; dụ như số nguy&ecirc;n, chuỗi, đối tượng, h&agrave;m, v.v.. V&iacute; dụ:
<pre class="language-js" data-content="%2F%2Fdata%20contains%20the%20name%2C%20followed%20by%20the%20age%2C%20followed%20by%20the%20details%20object%0Aconst%20data%20%3D%20%5B%22Sam%22%2C%2023%2C%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0id%3A%201%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0created_at%3A%20%22Jan%2019%22%0A%7D%5D%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>//data contains the name, followed by the age, followed by the details object
const data = ["Sam", 23, {
 id: 1,
 created_at: "Jan 19"
}];</code></pre>
Bạn c&oacute; thể destructure mảng <code>data</code> th&agrave;nh ba biến sử dụng c&uacute; ph&aacute;p destructuring th&ocirc;ng thường:
<pre class="language-js" data-content="const%20%5Bname%2C%20age%2C%20details%5D%20%3D%20data%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const [name, age, details] = data;</code></pre>
v&agrave; bạn sẽ nhận được:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>name</code> l&agrave; <code>"Sam"</code></li>
<li style="font-weight: 400;" aria-level="1"><code>age</code> l&agrave; <code>23</code></li>
<li style="font-weight: 400;" aria-level="1"><code>details</code> l&agrave; <code>{id: 1, created_at: "Jan 19"}</code></li>
</ul>
C&uacute; ph&aacute;p destructuring sẽ lu&ocirc;n hoạt động d&ugrave; cho nội dung của mảng l&agrave; g&igrave;.
C&uacute; ph&aacute;p cũng hoạt động với mảng chứa h&agrave;m hoặc gi&aacute; trị <code>boolean</code>.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Array destructuring l&agrave; một c&uacute; ph&aacute;p ngắn gọn được d&ugrave;ng để tạo c&aacute;c biến từ c&aacute;c phần tử của một mảng.</li>
<li style="font-weight: 400;" aria-level="1">Array destructuring lu&ocirc;n hoạt động bất kể mảng chứa kiểu dữ liệu g&igrave;.</li>
</ul>

Giới thiệu về ngữ pháp Destructuring với mảng