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 b&agrave;i học trước, ch&uacute;ng ta đ&atilde; sử dụng JSX để hiển thị component <code>&lt;Hero&gt;&lt;/Hero&gt;</code> l&ecirc;n DOM.
Dưới đ&acirc;y l&agrave; c&aacute;ch React nhận biết rằng đ&oacute; l&agrave; component chứ kh&ocirc;ng phải phần tử:
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">React kiểm tra k&yacute; tự đầu ti&ecirc;n của component, <code>F</code> (từ <code>Footer</code>).</li>
<li style="font-weight: 400;" aria-level="1">K&yacute; tự c&oacute; viết hoa kh&ocirc;ng? Nếu c&oacute; th&igrave; đ&oacute; l&agrave; một component.</li>
<li style="font-weight: 400;" aria-level="1">K&yacute; tự c&oacute; viết thường kh&ocirc;ng? Nếu c&oacute; th&igrave; đ&oacute; l&agrave; một phần tử.</li>
</ol>
Theo t&agrave;i liệu React: Phần đầu ti&ecirc;n của thẻ JSX x&aacute;c định kiểu của phần tử React. Kiểu viết hoa cho biết thẻ JSX đang tham chiếu đến component React.
V&igrave; React coi c&aacute;c component bắt đầu bằng chữ thường như thẻ DOM th&ocirc;ng thường, <code>&lt;footer&gt;</code> sẽ KH&Ocirc;NG hoạt động trong trường hợp n&agrave;y; n&oacute; sẽ hiển thị phần tử HTML5 <code>&lt;footer&gt;</code> chứ kh&ocirc;ng phải component Footer m&agrave; bạn định nghĩa.
<h2 style="text-align: justify;">Phần tử với component</h2>
Vậy sự kh&aacute;c biệt giữa phần tử v&agrave; component trong React l&agrave; g&igrave;?
C&acirc;u hỏi sẽ được giải đ&aacute;p trong một chương sau n&agrave;y sau khi ch&uacute;ng ta đ&atilde; t&igrave;m hiểu một số kh&aacute;i niệm cụ thể. Hiện tại, bạn chỉ cần biết l&agrave;:
Component React l&agrave; một h&agrave;m trả về phần tử React.
<h2 style="text-align: justify;">Kết hợp c&aacute;c component</h2>
Dưới đ&acirc;y l&agrave; cấu tr&uacute;c tổng quan của ứng dụng:
<pre class="language-js" data-content="%3CApp%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3CNavbar%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3CLogo%20%2F%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3CTitle%3ESupermarket%3C%2FTitle%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2FNavbar%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3CBrowserRouter%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7B%2F*...*%2F%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2FBrowserRouter%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3CFooter%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2FFooter%3E%0A%3C%2FApp%3E" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>&lt;App&gt;
 &lt;Navbar&gt;
 &lt;Logo /&gt;
 &lt;Title&gt;Supermarket&lt;/Title&gt;
 &lt;/Navbar&gt;
 &lt;BrowserRouter&gt;
 {/*...*/}
 &lt;/BrowserRouter&gt;
 &lt;Footer&gt;
 &lt;/Footer&gt;
&lt;/App&gt;</code></pre>
Như bạn thấy, đoạn code l&agrave; sự kết hợp của nhiều component.
Bạn nghi ngờ rằng thẻ Navbar đang gặp lỗi? H&atilde;y kiểm tra trong component Navbar.
<h3 style="text-align: justify;">Thẻ tự đ&oacute;ng</h3>
Tương tự như phần tử, bạn c&oacute; thể sử dụng c&uacute; ph&aacute;p tự đ&oacute;ng cho những component kh&ocirc;ng c&oacute; bất kỳ phần tử con n&agrave;o. V&igrave; vậy thay v&igrave; viết <code>&lt;Logo&gt;&lt;/Logo&gt;</code>, bạn c&oacute; thể viết: <code>&lt;Logo /&gt;</code>.
<h2 style="text-align: justify;">Chuyển đổi JSX sang React.createElement</h2>
Khi bạn sử dụng JSX để viết code, tr&igrave;nh bi&ecirc;n dịch sẽ chuyển đổi code th&agrave;nh cuộc gọi <code>React.createElement</code>.
H&atilde;y xem v&iacute; dụ code JSX được chuyển đổi th&agrave;nh cuộc gọi <code>React.createElement</code> cho Component:
<pre class="language-js" data-content="const%20element%20%3D%20%3CFooter%20%2F%3E%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const element = &lt;Footer /&gt;;</code></pre>
sẽ được chuyển đổi th&agrave;nh:
<pre class="language-js" data-content="const%20element%20%3D%20React.createElement(Footer%2C%20%7B%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const element = React.createElement(Footer, {});</code></pre>
C&acirc;u lệnh n&agrave;y truyền một tham chiếu đến h&agrave;m Footer, <code>React.createElement</code> sẽ&nbsp; sử dụng tham chiếu n&agrave;y để gọi h&agrave;m.&nbsp;
Để &yacute; c&acirc;u lệnh chỉ truyền t&ecirc;n h&agrave;m Footer (kh&ocirc;ng c&oacute; dấu ngoặc đơn) m&agrave; kh&ocirc;ng gọi h&agrave;m (với dấu ngoặc đơn); l&yacute; do l&agrave; để cho React biết ch&uacute;ng ta đang tham chiếu đến h&agrave;m n&agrave;o. V&agrave; sau đ&oacute; React sẽ tự động gọi h&agrave;m khi cần thiết.
<h2 style="text-align: justify;">Cẩn thận với v&ograve;ng lặp v&ocirc; hạn</h2>
Khi bạn mới bắt đầu học React, bạn rất dễ gặp phải v&ograve;ng lặp v&ocirc; hạn; v&iacute; dụ, đoạn code sau sẽ tạo ra một v&ograve;ng lặp v&ocirc; hạn l&agrave;m cho tr&igrave;nh duyệt bị treo. Trong hầu hết c&aacute;c trường hợp, React sẽ cảnh b&aacute;o cho bạn nếu bạn sắp tạo ra một v&ograve;ng lặp v&ocirc; hạn.
<pre class="language-js" data-content="function%20Button()%20%7B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20Be%20careful%3A%20this%20is%20an%20infinite%20loop%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3CButton%3E%3C%2FButton%3E%3B%0A%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function Button() {
 // Be careful: this is an infinite loop
 return &lt;Button&gt;&lt;/Button&gt;;
}</code></pre>
Điều n&agrave;y v&igrave; JSX <code>&lt;Button&gt;&lt;/Button&gt;</code> sẽ được chuyển đổi th&agrave;nh cuộc gọi <code>React.createElement(Button)</code>, cuộc gọi n&agrave;y sẽ gọi lại h&agrave;m <code>Button</code>. V&igrave; vậy, h&agrave;m <code>Button</code> li&ecirc;n tục gọi lại ch&iacute;nh n&oacute;.
Trong trường hợp n&agrave;y, ch&uacute;ng ta cần muốn trả về <code>&lt;button&gt;&lt;/button&gt;</code> (viết thường), đ&oacute; l&agrave; phần tử HTML <code>button</code> thay v&igrave; component <code>Button</code>.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Phần đầu ti&ecirc;n của thẻ JSX x&aacute;c định kiểu của phần tử React.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Kiểu viết hoa cho biết thẻ JSX đang đề cập đến component React.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Component React l&agrave; một h&agrave;m trả về Phần tử React.</li>
</ul>

Cơ chế hoạt động của component