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

C&oacute; nhiều c&aacute;ch để kết xuất c&oacute; điều kiện, ch&uacute;ng chủ yếu l&agrave; c&aacute;c t&iacute;nh năng của JavaScript m&agrave; bạn c&oacute; thể sử dụng trong React.
Bạn kh&ocirc;ng bắt buộc phải sử dụng những phương ph&aacute;p n&agrave;y, v&igrave; vậy phần thực h&agrave;nh sẽ kh&ocirc;ng kiểm tra việc sử dụng c&aacute;c phương ph&aacute;p một c&aacute;ch r&otilde; r&agrave;ng. Tuy nhi&ecirc;n, bạn c&oacute; thể bắt gặp kỹ thuật n&agrave;y trong code của lập tr&igrave;nh vi&ecirc;n kh&aacute;c, v&igrave; vậy bạn cần nắm r&otilde; c&aacute;ch thức hoạt động của c&aacute;c phương ph&aacute;p.
<h2 style="text-align: justify;">Lưu trữ c&aacute;c phần tử trong biến</h2>
Kỹ thuật n&agrave;y đ&atilde; được đề cập trong chương JSX, do đ&oacute; chương n&agrave;y sẽ nhắc lại một ch&uacute;t.
V&igrave; phần tử JSX như <code>&lt;h1 className="title"&gt;Hello&lt;/h1&gt;</code> chỉ l&agrave; một cuộc gọi đến <code>React.createElement(...)</code> trả về một đối tượng, do đ&oacute;, bạn c&oacute; thể lưu trữ n&oacute; trong biến.
Việc lưu trữ phần tử JSX v&agrave;o biến cho ph&eacute;p bạn t&aacute;i sử dụng biến n&agrave;y nếu n&oacute; được lặp lại nhiều lần trong một mẫu hoặc bạn cần trả về n&oacute; theo điều kiện. V&iacute; dụ:
<pre class="language-js" data-content="function%20App(props)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20loginButton%20%3D%20%3Cbutton%3ELogin%3C%2Fbutton%3E%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20signupButton%20%3D%20%3Cbutton%3ESignup%3C%2Fbutton%3E%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0if%20(props.existingUser)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cdiv%20className%3D%22app-container%22%3E%7BloginButton%7D%3C%2Fdiv%3E%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cdiv%20className%3D%22app-container%22%3E%7BsignupButton%7D%3C%2Fdiv%3E%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function App(props) {
 const loginButton = &lt;button&gt;Login&lt;/button&gt;;
 const signupButton = &lt;button&gt;Signup&lt;/button&gt;;
 if (props.existingUser) {
 return &lt;div className="app-container"&gt;{loginButton}&lt;/div&gt;;
 }
 return &lt;div className="app-container"&gt;{signupButton}&lt;/div&gt;;
}</code></pre>
<h2 style="text-align: justify;">To&aacute;n tử ba ng&ocirc;i</h2>
To&aacute;n tử ba ng&ocirc;i l&agrave; c&uacute; ph&aacute;p JavaScript cho ph&eacute;p bạn thay thế điều kiện <code>if/else</code> bằng <code>? :</code>. H&atilde;y xem một v&iacute; dụ:
<pre class="language-js" data-content="function%20getWelcomeMessage(type)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0if%20(type%20%3D%3D%3D%20%22admin%22)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20%22Welcome%20admin%22%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%20else%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20%22Welcome%20user%22%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function getWelcomeMessage(type) {
 if (type === "admin") {
 return "Welcome admin";
 } else {
 return "Welcome user";
 }
}</code></pre>
C&oacute; thể được viết lại như sau:
<pre class="language-js" data-content="function%20getWelcomeMessage(type)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20(type%20%3D%3D%3D%20%22admin%22)%20%3F%20%22Welcome%20admin%22%20%3A%20%22Welcome%20user%22%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function getWelcomeMessage(type) {
 return (type === "admin") ? "Welcome admin" : "Welcome user";
}</code></pre>
<code>? :</code> l&agrave; to&aacute;n tử ba ng&ocirc;i, trong đ&oacute; biểu thức sau <code>?</code> sẽ được thực hiện khi điều kiện (<code>type === "admin"</code>) l&agrave; <code>true</code> v&agrave; biểu thức sau <code>:</code> sẽ được thực hiện khi điều kiện l&agrave; <code>false</code>.
Sử dụng to&aacute;n tử ba ng&ocirc;i, ch&uacute;ng ta c&oacute; thể viết lại component <code>App</code> ở tr&ecirc;n như sau:
<pre class="language-js" data-content="function%20getWelcomeMessage(type)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20(type%20%3D%3D%3D%20%22admin%22)%20%3F%20%22Welcome%20admin%22%20%3A%20%22Welcome%20user%22%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function getWelcomeMessage(type) {
 return (type === "admin") ? "Welcome admin" : "Welcome user";
}</code></pre>
Theo kinh nghiệm của những lập tr&igrave;nh vi&ecirc;n l&acirc;u năm, bạn kh&ocirc;ng n&ecirc;n cố gắng sử dụng to&aacute;n tử ba ng&ocirc;i ở mọi nơi.
Quan trọng l&agrave; viết code dễ đọc, kh&ocirc;ng nhất thiết phải l&agrave; viết &iacute;t code.
Trong v&iacute; dụ n&agrave;y, to&agrave;n bộ biểu thức viết vừa đủ tr&ecirc;n một d&ograve;ng v&agrave; vẫn dễ đọc, v&igrave; vậy việc sử dụng to&aacute;n tử ba ng&ocirc;i l&agrave; chấp nhận được. Bạn c&oacute; thể giữ nguy&ecirc;n điều kiện <code>if/else</code> nếu code dễ đọc.
V&igrave; vậy, bạn kh&ocirc;ng n&ecirc;n lạm dụng những kỹ thuật n&agrave;y, viết code dễ đọc mới l&agrave; nhiệm vụ h&agrave;ng đầu của c&aacute;c lập tr&igrave;nh vi&ecirc;n.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">C&aacute;c phần tử JSX c&oacute; thể được lưu trữ trong biến</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Bạn c&oacute; thể sử dụng to&aacute;n tử ba ng&ocirc;i để r&uacute;t gọn điều kiện if trong JSX</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">H&atilde;y cố gắng viết code dễ đọc thay v&igrave; viết code ngắn nhất c&oacute; thể.</li>
</ul>

Rendering theo điều kiện (2)