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

B&acirc;y giờ ch&uacute;ng ta đ&atilde; biết c&aacute;ch thay đổi mảng một c&aacute;ch bất biến (kh&ocirc;ng l&agrave;m thay đổi mảng ban đầu), do đ&oacute;, việc thực hiện thao t&aacute;c bất biến với đối tượng cũng trở n&ecirc;n dễ d&agrave;ng hơn v&igrave; n&oacute; cũng dựa tr&ecirc;n to&aacute;n tử spread (<code>...</code>).
<h2 style="text-align: justify;">Th&ecirc;m kh&oacute;a/gi&aacute; trị một c&aacute;ch bất biến</h2>
H&atilde;y bắt đầu với phương thức l&agrave;m thay đổi đối tượng:
<pre class="language-js" data-content="const%20data%20%3D%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0id%3A%201%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0name%3A%20%22Sam%22%0A%7D%0A%0A%2F%2FBAD%3A%20mutates%0Adata.age%20%3D%2018%3B%0Aconsole.log(data)%3B%20%2F%2F%20%7Bid%3A%201%2C%20name%3A%20%22Sam%22%2C%20age%3A%2018%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const data = {
 id: 1,
 name: "Sam"
}

//BAD: mutates
data.age = 18;
console.log(data); // {id: 1, name: "Sam", age: 18}</code></pre>
Thay v&igrave; c&aacute;ch tr&ecirc;n, ch&uacute;ng ta c&oacute; thể tạo một bản sao của đối tượng bằng c&aacute;ch sử dụng to&aacute;n tử <code>spread: {...data}</code>.
To&aacute;n tử n&agrave;y tạo ra một đối tượng mới với c&aacute;c kh&oacute;a v&agrave; gi&aacute; trị tương tự, sau đ&oacute; ch&uacute;ng ta c&oacute; thể th&ecirc;m cặp kh&oacute;a/gi&aacute; trị mới v&agrave;o đối tượng:
<pre class="language-js" data-content="const%20data%20%3D%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0id%3A%201%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0name%3A%20%22Sam%22%0A%7D%0A%0A%2F%2FGOOD%3A%20immutable%0Aconst%20newObj%20%3D%20%7B...data%2C%20age%3A%2018%7D%0Aconsole.log(newObj)%3B%20%2F%2F%20%7Bid%3A%201%2C%20name%3A%20%22Sam%22%2C%20age%3A%2018%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const data = {
 id: 1,
 name: "Sam"
}

//GOOD: immutable
const newObj = {...data, age: 18}
console.log(newObj); // {id: 1, name: "Sam", age: 18}</code></pre>
<h2 style="text-align: justify;">Thay thế gi&aacute; trị của kh&oacute;a hiện c&oacute;</h2>
C&aacute;ch sử dụng phương thức thay đổi đối tượng sẽ như sau:
<pre class="language-js" data-content="const%20data%20%3D%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0id%3A%201%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0name%3A%20%22Sam%22%0A%7D%0A%0A%2F%2FGOOD%3A%20immutable%0Aconst%20newObj%20%3D%20%7B...data%2C%20age%3A%2018%7D%0Aconsole.log(newObj)%3B%20%2F%2F%20%7Bid%3A%201%2C%20name%3A%20%22Sam%22%2C%20age%3A%2018%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const data = {
 id: 1,
 name: "Sam"
}

//GOOD: immutable
const newObj = {...data, age: 18}
console.log(newObj); // {id: 1, name: "Sam", age: 18}</code></pre>
Thay v&igrave; c&aacute;ch tr&ecirc;n, ch&uacute;ng ta c&oacute; thể tạo một bản sao mới của đối tượng với <code>{...data}</code> v&agrave; sau đ&oacute; kết hợp n&oacute; với kh&oacute;a mới nhưng c&oacute; gi&aacute; trị kh&aacute;c:
<pre class="language-js" data-content="const%20data%20%3D%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0id%3A%201%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0age%3A%2019%0A%7D%0A%0A%2F%2F%20GOOD%3A%20immutable%0Aconst%20newObj%20%3D%20%7B...data%2C%20age%3A%2020%7D%3B%0Aconsole.log(newObj)%3B%20%2F%2F%20%7Bid%3A%201%2C%20age%3A%2020%7D%0Aconsole.log(data)%3B%20%2F%2F%20original%20object%20did%20not%20change%20%7Bid%3A%201%2C%20age%3A%2019%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const data = {
 id: 1,
 age: 19
}

// GOOD: immutable
const newObj = {...data, age: 20};
console.log(newObj); // {id: 1, age: 20}
console.log(data); // original object did not change {id: 1, age: 19}</code></pre>
Đoạn code n&agrave;y hoạt động v&igrave; <code>age: 20</code> trong <code>{...data, age: 20}</code> sẽ ghi đ&egrave; l&ecirc;n <code>age</code> hiện tại.
<h3 style="text-align: justify;">Để &yacute; thứ tự</h3>
Lưu &yacute; rằng khi bạn muốn thay thế gi&aacute; trị, c&aacute;c gi&aacute; trị mới n&ecirc;n đứng sau bản sao của đối tượng cũ.
Điều n&agrave;y cho ph&eacute;p ghi đ&egrave; l&ecirc;n c&aacute;c gi&aacute; trị cũ bằng c&aacute;c gi&aacute; trị mới.
Do đ&oacute;, đoạn code dưới đ&acirc;y SẼ KH&Ocirc;NG hoạt động:
<pre class="language-js" data-content="const%20data%20%3D%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0id%3A%201%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0age%3A%2019%0A%7D%0Aconst%20wrongNewObj%20%3D%20%7Bage%3A%2020%2C%20...data%7D%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const data = {
 id: 1,
 age: 19
}
const wrongNewObj = {age: 20, ...data};</code></pre>
Nguy&ecirc;n nh&acirc;n l&agrave; v&igrave; <code>age: 19</code> từ đối tượng <code>data</code> sẽ ghi đ&egrave; l&ecirc;n <code>age: 20</code>.
Bạn chỉ cần sửa đổi th&agrave;nh <code>{...data, age: 20}</code> v&agrave; đoạn code sẽ hoạt động.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><code>{...obj}</code> cho ph&eacute;p bạn tạo một bản sao mới của đối tượng hiện c&oacute;, gi&uacute;p dễ d&agrave;ng thực hiện c&aacute;c thao t&aacute;c bất biến.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><code>{...obj, newKey: 'value'}</code> được d&ugrave;ng để th&ecirc;m <code>newKey: 'value'</code> v&agrave;o đối tượng <code>obj</code> một c&aacute;ch bất biến.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><code>{...obj, existingKey: 'newValue'}</code> được d&ugrave;ng để thay đổi <code>existingKey</code> th&agrave;nh <code>newValue</code> một c&aacute;ch bất biến.</li>
</ul>

Thêm và thay thế