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, ch&uacute;ng ta chỉ l&agrave;m việc với c&aacute;c phần tử JSX kh&ocirc;ng c&oacute; phần tử con, v&iacute; dụ như <code>div</code> hoặc <code>h1</code>.
Tuy nhi&ecirc;n, trong thực tế, giao diện người d&ugrave;ng sẽ c&aacute;c nhiều phần tử phức tạp hơn, v&iacute; dụ như HTML sau:
<pre class="language-js" data-content="%3Cul%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3Cli%3EFirst%20item%3C%2Fli%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3Cli%3ESecond%20item%3C%2Fli%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3Cli%3EThird%20item%3C%2Fli%3E%0A%3C%2Ful%3E" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>&lt;ul&gt;
 &lt;li&gt;First item&lt;/li&gt;
 &lt;li&gt;Second item&lt;/li&gt;
 &lt;li&gt;Third item&lt;/li&gt;
&lt;/ul&gt;</code></pre>
Trong JSX, để biểu diễn danh s&aacute;ch như tr&ecirc;n, ch&uacute;ng ta sử dụng c&uacute; ph&aacute;p như sau
<pre class="language-js" data-content="const%20list%20%3D%20%3Cul%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3Cli%3EFirst%20item%3C%2Fli%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3Cli%3ESecond%20item%3C%2Fli%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3Cli%3EThird%20item%3C%2Fli%3E%0A%3C%2Ful%3E%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const list = &lt;ul&gt;
 &lt;li&gt;First item&lt;/li&gt;
 &lt;li&gt;Second item&lt;/li&gt;
 &lt;li&gt;Third item&lt;/li&gt;
&lt;/ul&gt;;</code></pre>
Đoạn code tr&ecirc;n khi được chuyển đổi th&agrave;nh <code>React.createElement(...)</code> ng&agrave;y c&agrave;ng trở n&ecirc;n phức tạp v&agrave; kh&oacute; đọc hơn:
<pre class="language-js" data-content="const%20list%20%3D%20React.createElement(%22ul%22%2C%20null%2C%C2%A0%0A%C2%A0%C2%A0%C2%A0%C2%A0React.createElement(%22li%22%2C%20null%2C%20%22First%20item%22)%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0React.createElement(%22li%22%2C%20null%2C%20%22Second%20item%22)%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0React.createElement(%22li%22%2C%20null%2C%20%22Third%20item%22)%0A)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const list = React.createElement("ul", null, 
 React.createElement("li", null, "First item"),
 React.createElement("li", null, "Second item"),
 React.createElement("li", null, "Third item")
);</code></pre>
Đoạn code hoạt động v&igrave; <code>React.createElement</code> lấy tất cả c&aacute;c đối số được truyền sau đối số thứ hai v&agrave; coi ch&uacute;ng l&agrave; c&aacute;c phần tử con.
V&igrave; vậy, trong trường hợp n&agrave;y, danh s&aacute;ch l&agrave; <code>React.createElement("ul", null, child1, child2, child3)</code>.
Trong đ&oacute;, <code>child1</code> l&agrave; mục li đầu ti&ecirc;n, <code>child2</code> l&agrave; mục li thứ hai, v.v.
Bạn kh&ocirc;ng cần phải tự viết code <code>React.createElement(...)</code> nhưng n&ecirc;n hiểu c&aacute;ch n&oacute; hoạt động.
<h2 style="text-align: justify;">Một số điểm lưu &yacute;</h2>
Ch&uacute;ng ta sẽ thảo luận về một số điểm lưu &yacute; v&agrave; những lỗi tiềm ẩn trong chương n&agrave;y.
Sau n&agrave;y, bạn c&oacute; thể sử dụng Prettier để định dạng code hoặc tự định dạng code, v&agrave; khi bạn bắt đầu l&agrave;m việc với c&aacute;c UI phức tạp hơn, bạn c&oacute; thể c&oacute; xu hướng viết return tr&ecirc;n một d&ograve;ng ri&ecirc;ng v&agrave; phần c&ograve;n lại của code JSX tr&ecirc;n c&aacute;c d&ograve;ng kh&aacute;c, như sau:
<pre class="language-js" data-content="function%20getList()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%C2%A0%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cul%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cli%3EFirst%20Item%3C%2Fli%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cli%3ESecond%20Item%3C%2Fli%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3C%2Ful%3E%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function getList() {
 return 
 &lt;ul&gt;
 &lt;li&gt;First Item&lt;/li&gt;
 &lt;li&gt;Second Item&lt;/li&gt;
 &lt;/ul&gt;;
}</code></pre>
Nhưng điều n&agrave;y sẽ l&agrave;m cho chương tr&igrave;nh gặp lỗi do một kh&aacute;i niệm JavaScript gọi l&agrave; Automatic Semi-colon Insertion (ASI - tự động ch&egrave;n dấu chấm phẩy).
Điều xảy ra ở đ&acirc;y l&agrave; JavaScript tự động ch&egrave;n một dấu chấm phẩy sau từ kh&oacute;a return khi code được chuyển đổi từ JSX sang JavaScript, v&igrave; vậy đoạn code trở th&agrave;nh:
<pre class="language-js" data-content="function%20getList()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0React.createElement(%22ul%22%2C%20null%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0React.createElement(%22li%22%2C%20null%2C%20%22First%20Item%22)%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0React.createElement(%22li%22%2C%20null%2C%20%22Second%20Item%22)%0A%C2%A0%C2%A0%C2%A0%C2%A0)%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function getList() {
 return;
 React.createElement("ul", null,
 React.createElement("li", null, "First Item"),
 React.createElement("li", null, "Second Item")
 );
}</code></pre>
Để &yacute; <code>;</code> được th&ecirc;m ngay sau từ kh&oacute;a return, điều n&agrave;y c&oacute; nghĩa l&agrave; h&agrave;m kh&ocirc;ng bao giờ tiếp thi đến <code>React.createElement("ul", ...)</code>. Đ&acirc;y l&agrave; h&agrave;nh vi ch&iacute;nh x&aacute;c của JavaScript v&igrave; tr&igrave;nh bi&ecirc;n dịch y&ecirc;u cầu tự động ch&egrave;n một dấu chấm phẩy (nếu chưa c&oacute;) sau một số từ kh&oacute;a (đọc th&ecirc;m chi tiết tr&ecirc;n MDN).
Để tr&aacute;nh vấn đề n&agrave;y, h&atilde;y lu&ocirc;n lu&ocirc;n sử dụng c&uacute; ph&aacute;p <code>return ()</code> v&agrave; viết c&aacute;c phần tử JSX b&ecirc;n trong cặp dấu ngoặc đơn. V&igrave; vậy, đoạn code tr&ecirc;n trở th&agrave;nh:
<pre class="language-js" data-content="const%20getList%20%3D%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20(%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cul%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cli%3EFirst%20Item%3C%2Fli%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cli%3ESecond%20Item%3C%2Fli%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3C%2Ful%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0)%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const getList = () =&gt; {
 return (
 &lt;ul&gt;
 &lt;li&gt;First Item&lt;/li&gt;
 &lt;li&gt;Second Item&lt;/li&gt;
 &lt;/ul&gt;
 );
}</code></pre>
Bằng c&aacute;ch viết dấu ngoặc mở, kh&ocirc;ng c&oacute; dấu chấm phẩy tự động được ch&egrave;n sau <code>return</code> cho đến khi gặp dấu ngoặc đ&oacute;ng v&agrave; bạn tr&aacute;nh được c&aacute;c lỗi kh&ocirc;ng mong muốn.
H&atilde;y thử thực hiện tr&ecirc;n babel. Bạn sẽ cần đ&oacute;ng g&oacute;i phần tử JSX bằng <code>()</code> để code hoạt động.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">JSX cho ph&eacute;p định nghĩa c&aacute;c phần tử con b&ecirc;n trong phần tử cha</li>
<li style="font-weight: 400;" aria-level="1">Lu&ocirc;n đ&oacute;ng g&oacute;i c&aacute;c phần tử JSX bằng <code>()</code> khi viết JSX sau một lệnh return.</li>
</ul>

Các phần tử con của JSX