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 những b&agrave;i học trước, việc &aacute;p dụng c&aacute;c lớp động trong React hơi phức tạp v&igrave; bạn phải x&acirc;y dựng chuỗi <code>className</code> theo c&aacute;ch thủ c&ocirc;ng.
C&oacute; một số thư viện nhỏ gi&uacute;p c&ocirc;ng việc n&agrave;y trở n&ecirc;n dễ d&agrave;ng hơn; 2 thư viện phổ biến nhất l&agrave;:
<ul style="text-align: justify;">
<li aria-level="1">classnames</li>
</ul>
<ul style="text-align: justify;">
<li aria-level="1">clsx</li>
</ul>
Cả hai thư viện đều rất nhỏ gọn; bạn c&oacute; thể sử dụng bất kỳ thư viện n&agrave;o bạn muốn. Trong kh&oacute;a học n&agrave;y, ch&uacute;ng ta sẽ sử dụng <code>clsx</code> v&igrave; đ&acirc;y l&agrave; thư viện mới.
<h2 style="text-align: justify;">C&agrave;i đặt</h2>
Để c&agrave;i đặt clsx, chạy lệnh:
<pre class="language-c" data-content="npm%20install%20clsx" data-language="c" data-ace-language="c_cpp" data-name-language="C" data-main-file="main.c"><code>npm install clsx</code></pre>
<h2 style="text-align: justify;">K&iacute;ch thước g&oacute;i</h2>
G&oacute;i <code>clsx</code> c&oacute; k&iacute;ch thước khoảng 300 byte (nhỏ hơn 1KB), v&igrave; vậy bạn kh&ocirc;ng cần lo lắng về k&iacute;ch thước của g&oacute;i khi th&ecirc;m v&agrave;o dự &aacute;n.
<h2 style="text-align: justify;">Th&ecirc;m clsx v&agrave;o file</h2>
Bạn c&oacute; thể sử dụng <code>clsx</code> trong bất kỳ b&agrave;i tập React n&agrave;o bằng c&aacute;ch nhập lệnh import v&igrave; g&oacute;i đ&atilde; được c&agrave;i đặt sẵn.
Để th&ecirc;m clsx, bạn phải th&ecirc;m <code>clsx</code> từ t&ecirc;n g&oacute;i:
<pre class="language-js" data-content="import%20clsx%20from%20%22clsx%22%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import clsx from "clsx";</code></pre>
<h2 style="text-align: justify;">C&aacute;c lớp c&oacute; điều kiện</h2>
Sau khi đ&atilde; th&ecirc;m <code>clsx</code>, h&atilde;y xem c&aacute;ch thư viện gi&uacute;p đơn giản h&oacute;a việc sử dụng lớp c&oacute; điều kiện:
<pre class="language-js" data-content="import%20clsx%20from%20%22clsx%22%3B%0A%0Aconst%20result%20%3D%20clsx(%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%22link%22%3A%20true%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%22link-primary%22%3A%20true%0A%7D)%3B%0A%0Aconsole.log(result)%3B%20%2F%2F%22link%20link-primary%22" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import clsx from "clsx";

const result = clsx({
 "link": true,
 "link-primary": true
});

console.log(result); //"link link-primary"</code></pre>
Ch&uacute;ng ta đ&atilde; truyền cho clsx một đối tượng chứa:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">kh&oacute;a <code>link</code> với gi&aacute; trị <code>true</code></li>
<li style="font-weight: 400;" aria-level="1">v&agrave; kh&oacute;a <code>link-primary</code> với gi&aacute; trị <code>true</code>, kết quả trả về một chuỗi chứa cả hai lớp được ph&acirc;n t&aacute;ch bằng dấu c&aacute;ch.</li>
</ul>
H&atilde;y xem một v&iacute; dụ kh&aacute;c:
<pre class="language-js" data-content="import%20clsx%20from%20%22clsx%22%3B%0A%0Aconst%20result%20%3D%20clsx(%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%22link%22%3A%20true%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%22link-primary%22%3A%20false%0A%7D)%3B%0A%0Aconsole.log(result)%3B%20%2F%2F%22link%22" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import clsx from "clsx";

const result = clsx({
 "link": true,
 "link-primary": false
});

console.log(result); //"link"</code></pre>
Đ&acirc;y về cơ bản c&ugrave;ng một c&aacute;ch l&agrave;m như v&iacute; dụ trước. Tuy nhi&ecirc;n, lần n&agrave;y ch&uacute;ng ta chỉ định rằng <code>link-primary</code> l&agrave; <code>false</code>, v&igrave; vậy chuỗi kết quả sẽ kh&ocirc;ng bao gồm <code>link-primary</code>.
Thay v&igrave; thiết lập gi&aacute; trị cố định l&agrave; <code>true</code> hoặc <code>false</code>, điều g&igrave; sẽ xảy ra nếu ch&uacute;ng ta thay thế ch&uacute;ng bằng một biến hoặc kết quả của một biểu thức? V&iacute; dụ:
<pre class="language-js" data-content="import%20clsx%20from%20%22clsx%22%3B%0A%0Afunction%20MyComponent(props)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20className%20%3D%20clsx(%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%22title%22%3A%20props.loggedIn%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Ch1%20className%3D%7BclassName%7D%3E%3C%2Fh1%3E%0A%7D%0A%0Aconst%20example1%20%3D%20%3CMyComponent%20loggedIn%3D%7Btrue%7D%20%2F%3E%3B%20%2F%2F%20className%3D%22title%22%0Aconst%20example2%20%3D%20%3CMyComponent%20loggedIn%3D%7Bfalse%7D%20%2F%3E%3B%20%2F%2F%20className%3D%22%22" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import clsx from "clsx";

function MyComponent(props) {
 const className = clsx({
 "title": props.loggedIn
 });

 return &lt;h1 className={className}&gt;&lt;/h1&gt;
}

const example1 = &lt;MyComponent loggedIn={true} /&gt;; // className="title"
const example2 = &lt;MyComponent loggedIn={false} /&gt;; // className=""</code></pre>
Trong đoạn code tr&ecirc;n, <code>props.loggedIn</code> l&agrave; một gi&aacute; trị boolean. Ch&uacute;ng ta sử dụng gi&aacute; trị boolean đ&oacute; để th&ecirc;m/x&oacute;a lớp <code>title</code> theo điều kiện:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">khi <code>props.loggedIn</code> l&agrave; <code>true</code>, <code>clsx</code> nhận <code>{"title": true}</code> v&agrave; trả về chuỗi <code>title</code>.</li>
<li style="font-weight: 400;" aria-level="1">Ngược lại, khi <code>props.loggedIn</code> l&agrave; <code>false</code>, <code>clsx</code> nhận <code>{"title": false}</code> v&agrave; trả về chuỗi rỗng <code>""</code>.</li>
</ul>
V&igrave; vậy, <code>clsx</code> cho ph&eacute;p ta sử dụng c&aacute;c lớp c&oacute; điều kiện m&agrave; kh&ocirc;ng cần viết điều kiện <code>if</code>. Đoạn code tr&ecirc;n nếu viết c&aacute;c điều kiện <code>if</code> v&agrave; kh&ocirc;ng c&oacute; <code>clsx</code> sẽ như sau:
<pre class="language-js" data-content="import%20clsx%20from%20%22clsx%22%3B%0A%0Afunction%20MyComponent(props)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20className%20%3D%20clsx(%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%22title%22%3A%20props.loggedIn%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Ch1%20className%3D%7BclassName%7D%3E%3C%2Fh1%3E%0A%7D%0A%0Aconst%20example1%20%3D%20%3CMyComponent%20loggedIn%3D%7Btrue%7D%20%2F%3E%3B%20%2F%2F%20className%3D%22title%22%0Aconst%20example2%20%3D%20%3CMyComponent%20loggedIn%3D%7Bfalse%7D%20%2F%3E%3B%20%2F%2F%20className%3D%22%22" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import clsx from "clsx";

function MyComponent(props) {
 const className = clsx({
 "title": props.loggedIn
 });

 return &lt;h1 className={className}&gt;&lt;/h1&gt;
}

const example1 = &lt;MyComponent loggedIn={true} /&gt;; // className="title"
const example2 = &lt;MyComponent loggedIn={false} /&gt;; // className=""</code></pre>
Bạn cũng c&oacute; thể kết hợp những kh&aacute;i niệm n&agrave;y theo c&aacute;ch sao cho lu&ocirc;n c&oacute; một lớp cố định m&agrave; kh&ocirc;ng bị ảnh hưởng bởi điều kiện, trong khi vẫn c&oacute; thể &aacute;p dụng một lớp kh&aacute;c theo điều kiện:
<pre class="language-js" data-content="import%20clsx%20from%20%22clsx%22%3B%0A%0Afunction%20MyComponent(props)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20className%20%3D%20clsx(%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%22text%22%3A%20true%2C%20%2F%2F%20this%20class%20is%20always%20added%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%22title%22%3A%20props.loggedIn%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Ch1%20className%3D%7BclassName%7D%3E%3C%2Fh1%3E%0A%7D%0A%0Aconst%20example1%20%3D%20%3CMyComponent%20loggedIn%3D%7Btrue%7D%20%2F%3E%3B%20%2F%2F%20className%3D%22text%20title%22%0Aconst%20example2%20%3D%20%3CMyComponent%20loggedIn%3D%7Bfalse%7D%20%2F%3E%3B%20%2F%2F%20className%3D%22text%22" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import clsx from "clsx";

function MyComponent(props) {
 const className = clsx({
 "text": true, // this class is always added
 "title": props.loggedIn
 });

 return &lt;h1 className={className}&gt;&lt;/h1&gt;
}

const example1 = &lt;MyComponent loggedIn={true} /&gt;; // className="text title"
const example2 = &lt;MyComponent loggedIn={false} /&gt;; // className="text"</code></pre>
Để &yacute; l&agrave; lớp <code>text</code> sẽ lu&ocirc;n được th&ecirc;m v&agrave;o, kh&ocirc;ng phụ thuộc v&agrave;o bất kỳ điều kiện n&agrave;o, trong khi lớp <code>title</code> chỉ được th&ecirc;m v&agrave;o dựa tr&ecirc;n điều kiện, t&ugrave;y thuộc v&agrave;o gi&aacute; trị boolean của <code>props.loggedIn</code>.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Bạn c&oacute; thể c&agrave;i đặt <code>clsx</code> bằng lệnh <code>npm install clsx</code></li>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><code>clsx</code> l&agrave; một tiện &iacute;ch nhỏ được d&ugrave;ng để x&acirc;y dựng chuỗi className theo điều kiện.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><code>clsx({"your-class-name": booleanValue})</code> l&agrave; c&uacute; ph&aacute;p chung cho <code>clsx</code>.</li>
</ul>

Sử dụng thư viện clsx để viết câu lệnh if