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

<code>document.createElement</code> kh&ocirc;ng được sử dụng trong React.
Ch&uacute;ng ta đ&atilde; quan s&aacute;t hoạt động của phương thức n&agrave;y v&agrave; thấy một số điểm tương đồng với <code>React.createElement</code>, nhưng hai phương thức n&agrave;y kh&ocirc;ng giống nhau ho&agrave;n to&agrave;n.
<h2 style="text-align: justify;">So s&aacute;nh</h2>
H&atilde;y so s&aacute;nh <code>document.createElement</code> v&agrave; <code>React.createElement</code>.
<h3 style="text-align: justify;">Gi&aacute; trị trả về</h3>
<code>document.createElement</code> trả về một phần tử DOM (v&iacute; dụ: <code>div</code> hoặc <code>h1</code>). Trong khi đ&oacute;, <code>React.createElement</code> trả về một đối tượng đại diện cho phần tử DOM.
Đối tượng c&oacute; dạng như sau:
<pre class="language-js" data-content="const%20element%20%3D%20React.createElement(%22h1%22)%3B%0A%2F%2Freturns%20an%20object%20similar%20to%20this%20one%3A%0A%7B%0A%C2%A0%C2%A0type%3A%20'h1'%2C%0A%C2%A0%C2%A0props%3A%20%7B%7D%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const element = React.createElement("h1");
//returns an object similar to this one:
{
 type: 'h1',
 props: {}
}</code></pre>
L&yacute; do tại sao <code>React.createElement</code> trả về một đối tượng thay v&igrave; phần tử DOM l&agrave; v&igrave; React hoạt động dựa tr&ecirc;n Virtual DOM (DOM ảo). Ch&uacute;ng ta sẽ t&igrave;m hiểu chi tiết sau n&agrave;y, trước hết h&atilde;y xem phần giải th&iacute;ch đơn giản về Virtual DOM:
Virtual DOM l&agrave; một phi&ecirc;n bản của giao diện người d&ugrave;ng được lưu giữ trong bộ nhớ v&agrave; được đồng bộ với DOM thật.
V&igrave; vậy, <code>React.createElement()</code> trả về một đối tượng thay v&igrave; phần tử DOM v&igrave; điều n&agrave;y cho ph&eacute;p React tối ưu h&oacute;a hiệu suất (như Virtual DOM).
<h3 style="text-align: justify;">Thay đổi lớp/kiểu d&aacute;ng</h3>
C&uacute; ph&aacute;p của hai phương thức tương tự nhau khi thiết lập c&aacute;c thuộc t&iacute;nh n&agrave;y:
<pre class="language-js" data-content="React.createElement(%22h1%22%2C%20%7BclassName%3A%20%22center%22%2C%20style%3A%20%22color%3A%20red%22%7D)" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>React.createElement("h1", {className: "center", style: "color: red"})</code></pre>
Lưu &yacute; rằng ch&uacute;ng ta viết <code>className</code> thay v&igrave; <code>class</code> v&igrave; <code>class</code> l&agrave; từ kh&oacute;a được d&agrave;nh ri&ecirc;ng trong JavaScript v&agrave; kh&ocirc;ng thể sử dụng trực tiếp l&agrave;m t&ecirc;n thuộc t&iacute;nh.
<h2 style="text-align: justify;">Viết văn bản</h2>
Để viết văn bản b&ecirc;n trong phần tử, bạn phải cung cấp tham số thứ ba cho React.createElement, được gọi l&agrave; <code>children</code> (c&oacute; thể truyền c&aacute;c phần tử React kh&aacute;c l&agrave;m <code>children</code>).
<pre class="language-js" data-content="React.createElement(%22h1%22%2C%20%7B%7D%2C%20%22Hello%20World%22)" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>React.createElement("h1", {}, "Hello World")</code></pre>
Lệnh n&agrave;y trả về một đối tượng đại diện cho <code>h1</code> chứa <code>Hello World</code>.
Lưu &yacute; rằng trong v&iacute; dụ tr&ecirc;n, ch&uacute;ng ta kh&ocirc;ng muốn thiết lập className hoặc style (hoặc c&aacute;c t&ugrave;y chọn kh&aacute;c), v&igrave; vậy ch&uacute;ng ta truyền <code>{}</code> l&agrave;m tham số thứ hai (bạn cũng c&oacute; thể truyền <code>null</code>).
C&uacute; ph&aacute;p tr&ecirc;n tr&ocirc;ng kh&ocirc;ng trực quan v&agrave; kh&aacute; phức tạp. Do đ&oacute;, ch&uacute;ng ta c&oacute; thể sử dụng JSX, một c&uacute; ph&aacute;p thay thế code tr&ecirc;n bằng <code>&lt;h1&gt;Hello World&lt;/h1&gt;</code>. Tuy nhi&ecirc;n, JSX KH&Ocirc;NG ho&agrave;n to&agrave;n giống với HTML, v&igrave; vậy bạn n&ecirc;n học <code>React.createElement</code> trước.
<h2 style="text-align: justify;">React Element l&agrave; g&igrave;?</h2>
Trong React, Element (Phần tử) l&agrave; khối x&acirc;y dựng nhỏ nhất.
Phần tử đại diện cho đơn vị nhỏ nhất của giao diện người d&ugrave;ng. V&iacute; dụ đơn giản nhất l&agrave; văn bản Welcome nằm trong một đoạn văn bản (<code>&lt;p&gt;Welcome&lt;/p&gt;</code>).
Sau n&agrave;y ch&uacute;ng ta sẽ kết hợp nhiều phần tử React c&ugrave;ng với logic phức tạp để x&acirc;y dựng ứng dụng mua sắm.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><code>React Element</code> l&agrave; khối x&acirc;y dựng nhỏ nhất đại diện cho một đơn vị nhỏ trong giao diện người d&ugrave;ng.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><code>React.createElement</code> trả về một phần tử React&nbsp;</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><code>React.createElement(type, options, children)</code></li>
</ul>

Làm quen với React.createElement