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 c&aacute;c chương trước, ch&uacute;ng ta đ&atilde; l&agrave;m việc với những phần tử React đơn giản. Ch&uacute;ng lu&ocirc;n c&oacute; nội dung văn bản cụ thể v&agrave; t&ecirc;n lớp kh&ocirc;ng thay đổi.
Tiếp theo ch&uacute;ng ta c&ugrave;ng t&igrave;m hiểu về Biểu thức JSX.
<h2 style="text-align: justify;">Biểu thức l&agrave; g&igrave;?</h2>
Biểu thức l&agrave; bất kỳ đoạn code JavaScript hợp lệ n&agrave;o c&oacute; thể được t&iacute;nh to&aacute;n th&agrave;nh một gi&aacute; trị.
Đ&oacute; l&agrave; bất kỳ code JavaScript n&agrave;o m&agrave; khi thực thi sẽ trả về một gi&aacute; trị cuối c&ugrave;ng, v&iacute; dụ:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>3 + 4</code></li>
<li style="font-weight: 400;" aria-level="1"><code>"Sam"</code></li>
<li style="font-weight: 400;" aria-level="1"><code>new Date()</code></li>
<li style="font-weight: 400;" aria-level="1"><code>2 * 4</code></li>
<li style="font-weight: 400;" aria-level="1"><code>name</code> (giả định rằng biến <code>name</code> đ&atilde; được khai b&aacute;o).</li>
<li style="font-weight: 400;" aria-level="1">v.v.</li>
</ul>
Mỗi biểu thức trả về một gi&aacute; trị, v&iacute; dụ:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>3 + 4</code> trả về gi&aacute; trị <code>7</code>.</li>
<li style="font-weight: 400;" aria-level="1"><code>"Sam"</code> trả về chuỗi <code>"Sam"</code>.</li>
<li style="font-weight: 400;" aria-level="1"><code>new Date()</code> trả về một đối tượng ng&agrave;y.</li>
<li style="font-weight: 400;" aria-level="1"><code>2 * 4</code> trả về gi&aacute; trị <code>8</code>.</li>
<li style="font-weight: 400;" aria-level="1"><code>name</code> trả về gi&aacute; trị của biến <code>name</code>, thường l&agrave; một chuỗi.</li>
</ul>
<h2 style="text-align: justify;">Biểu thức trong JSX</h2>
Bạn c&oacute; thể sử dụng c&aacute;c biểu thức tr&ecirc;n trong JSX bằng c&aacute;ch đ&oacute;ng g&oacute;i trong dấu ngoặc nhọn <code>{}</code>.
<h3 style="text-align: justify;">V&iacute; dụ cơ bản</h3>
<pre class="language-js" data-content="const%20title%20%3D%20%3Ch1%3EYou%20have%20%7B2%20%2B%203%7D%20notifications%3C%2Fh1%3E%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const title = &lt;h1&gt;You have {2 + 3} notifications&lt;/h1&gt;;</code></pre>
C&acirc;u lệnh n&agrave;y sẽ tạo một phần tử <code>h1</code> chứa văn bản: <code>You have 5 notifications</code>.
H&atilde;y xem c&aacute;ch biểu thức <code>(2 + 3)</code> được thực thi v&agrave; trả về <code>5</code>, sau đ&oacute; được thay thế v&agrave;o văn bản cuối c&ugrave;ng để trả về <code>You have 5 notifications</code>.
Để c&oacute; thể hoạt động, biểu thức phải nằm trong dấu ngoặc nhọn.
<h3 style="text-align: justify;">Biến</h3>
Việc sử dụng biến trong biểu thức thường c&oacute; nhiều ứng dụng hữu &iacute;ch, v&iacute; dụ: hiển thị t&ecirc;n người d&ugrave;ng trong thanh điều hướng:
<pre class="language-js" data-content="const%20user%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%3B%0A%0Aconst%20element%20%3D%20%3Cp%20className%3D%22user-info%22%3EWelcome%20%7Buser.name%7D!%3C%2Fp%3E" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const user = {
 id: 1,
 name: "Sam"
};

const element = &lt;p className="user-info"&gt;Welcome {user.name}!&lt;/p&gt;</code></pre>
Đoạn code n&agrave;y sẽ tạo một phần tử p chứa văn bản: <code>Welcome Sam!</code>.
<h3 style="text-align: justify;">Gọi h&agrave;m</h3>
Bạn cũng c&oacute; thể gọi h&agrave;m trong biểu thức, v&iacute; dụ:
<pre class="language-js" data-content="function%20capitalise(word)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20word%5B0%5D.toUpperCase()%20%2B%20word.substring(1).toLowerCase()%3B%0A%7D%0Aconst%20name%20%3D%20%22brendan%22%3B%0A%0Aconst%20element%20%3D%20%3Cp%20className%3D%22user-info%22%3EWelcome%20%7Bcapitalise(name)%7D%3C%2Fp%3E" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function capitalise(word) {
 return word[0].toUpperCase() + word.substring(1).toLowerCase();
}
const name = "brendan";

const element = &lt;p className="user-info"&gt;Welcome {capitalise(name)}&lt;/p&gt;</code></pre>
Đoạn code tr&ecirc;n sẽ tạo một đoạn văn bản chứa nội dung: <code>Welcome Brendan</code> (lưu &yacute; chữ B viết hoa).
<h3 style="text-align: justify;">Những biểu thức JavaScript kh&aacute;c</h3>
Tr&ecirc;n đ&acirc;y chỉ l&agrave; một số v&iacute; dụ; bạn c&oacute; thể sử dụng bất kỳ biểu thức hợp lệ n&agrave;o b&ecirc;n trong dấu ngoặc nhọn.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Biểu thức l&agrave; bất kỳ đoạn code JavaScript hợp lệ n&agrave;o c&oacute; thể được t&iacute;nh to&aacute;n th&agrave;nh một gi&aacute; trị.</li>
<li style="font-weight: 400;" aria-level="1">Biểu thức trong JSX cần được đ&oacute;ng g&oacute;i trong dấu ngoặc nhọn: <code>{expression}</code></li>
<li style="font-weight: 400;" aria-level="1"><code>&lt;h1 className="title"&gt;You have {2 + 3} notifications&lt;/h1&gt;</code> l&agrave; một v&iacute; dụ về JSX với một biểu thức.</li>
</ul>