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(tagName)</code> l&agrave; một Web API được c&aacute;c tr&igrave;nh duyệt cung cấp để tạo một phần tử HTML.
T&oacute;m tắt nhanh c&uacute; ph&aacute;p:
<pre class="language-js" data-content="const%20element%20%3D%20document.createElement(%22h2%22)%3B%0A%0A%2F%2F%20this%20creates%3A%20%3Ch2%3E%3C%2Fh2%3E%0A%2F%2F%20which%20you%20can%20then%20insert%20in%20the%20DOM%3A%0Adocument.body.appendChild(element)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const element = document.createElement("h2");

// this creates: &lt;h2&gt;&lt;/h2&gt;
// which you can then insert in the DOM:
document.body.appendChild(element);</code></pre>
Hiện tại ch&uacute;ng ta chưa cần quan t&acirc;m đến việc ch&egrave;n phần tử v&agrave;o DOM, thay v&agrave;o đ&oacute; h&atilde;y tập trung v&agrave;o <code>document.createElement()</code>.
Phương thức n&agrave;y tạo ra một phần tử HTML v&agrave; ch&uacute;ng ta c&oacute; thể xem tất cả c&aacute;c thuộc t&iacute;nh của đối tượng bằng c&aacute;ch sử dụng <code>console.dir(element)</code>, đ&acirc;y l&agrave; một phương thức do c&aacute;c tr&igrave;nh duyệt cung cấp để liệt k&ecirc; tất cả c&aacute;c thuộc t&iacute;nh của một đối tượng cụ thể.
V&iacute; dụ minh họa:
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/3231918d-9786-42ab-8a92-22f99ae0dbad" alt="157774008782109617" />
Bạn kh&ocirc;ng cần sử dụng hầu hết c&aacute;c thuộc t&iacute;nh trong ảnh tr&ecirc;n. Tuy nhi&ecirc;n, những thuộc t&iacute;nh quan trọng nhất xuất hiện trong danh s&aacute;ch đầy đủ l&agrave;:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>id</code></li>
<li style="font-weight: 400;" aria-level="1"><code>style</code></li>
<li style="font-weight: 400;" aria-level="1"><code>className</code></li>
</ul>
L&agrave;m thế n&agrave;o để thay đổi lớp của phần tử? V&agrave; thay đổi kiểu?
<pre class="language-js" data-content="const%20element%20%3D%20document.createElement(%22h2%22)%3B%0Aelement.className%20%3D%20%22name-of-class%22%3B%0Aelement.style%20%3D%20%22color%3A%20red%3B%20background-color%3A%20blue%22%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const element = document.createElement("h2");
element.className = "name-of-class";
element.style = "color: red; background-color: blue";</code></pre>
Bạn c&oacute; thể đang thắc mắc, tại sao ch&uacute;ng ta cần tạo phần tử HTML bằng JavaScript?
Bạn cần biết rằng việc tạo ra phần tử bằng JavaScript tương đương với việc tạo ra trực tiếp phần tử tương tự trong HTML, như v&iacute; dụ sau:
<pre class="language-js" data-content="%3Ch2%20class%3D%22name-of-class%22%20style%3D%22color%3A%20red%3B%20background-color%3A%20blue%22%3E%3C%2Fh2%3E" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;h2 class="name-of-class" style="color: red; background-color: blue"&gt;&lt;/h2&gt;</code></pre>
L&yacute; do tại sao ch&uacute;ng ta cần tạo phần tử n&agrave;y bằng JavaScript sẽ được giải th&iacute;ch trong v&agrave;i b&agrave;i học tiếp theo.
<h3 style="text-align: justify;">Nhiều lớp</h3>
Bạn c&oacute; thể thiết lập nhiều lớp bằng c&aacute;ch ph&acirc;n t&aacute;ch t&ecirc;n lớp bằng khoảng trắng.
<pre class="language-js" data-content="const%20element%20%3D%20document.createElement(%22h2%22)%3B%0Aelement.className%20%3D%20%22container%20center%22%3B%0A%2F%2F%20%3Ch2%20class%3D%22container%20center%22%3E%3C%2Fh2%3E" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const element = document.createElement("h2");
element.className = "container center";
// &lt;h2 class="container center"&gt;&lt;/h2&gt;</code></pre>
<h2 style="text-align: justify;">className chứ kh&ocirc;ng phải class</h2>
Một điều quan trọng cần lưu &yacute; ở đ&acirc;y l&agrave; việc thay đổi <code>class</code> của phần tử diễn ra th&ocirc;ng qua thuộc t&iacute;nh <code>className</code> chứ kh&ocirc;ng phải <code>class</code>.
Điều đ&oacute; l&agrave; v&igrave; từ kh&oacute;a <code>class</code> trong JavaScript l&agrave; từ kh&oacute;a d&agrave;nh ri&ecirc;ng v&agrave; được sử dụng để tạo một lớp JavaScript c&oacute; thể gọi bằng c&aacute;ch sử dụng <code>new</code> (kh&ocirc;ng phải l&agrave; một lớp CSS).
Bạn cũng c&oacute; thể thay đổi lớp bằng c&aacute;ch sử dụng <code>element.classList.add("name-of-class")</code>; tuy nhi&ecirc;n, sau n&agrave;y bạn sẽ thấy rằng bạn cần tr&aacute;nh việc thay đổi DOM trực tiếp trong React (v&iacute; dụ: <code>classList.add</code>) v&agrave; thay v&agrave;o đ&oacute; x&aacute;c định c&aacute;c phần tử muốn hiển thị; th&ocirc;ng tin th&ecirc;m sẽ được giải th&iacute;ch sau n&agrave;y.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>const element = document.createElement(tagName)</code> tạo một phần tử HTML</li>
<li style="font-weight: 400;" aria-level="1"><code>element.style = "background-color: blue"</code> đặt m&agrave;u nền th&agrave;nh m&agrave;u xanh lam</li>
<li style="font-weight: 400;" aria-level="1"><code>element.className = "container"</code> đặt lớp của phần tử th&agrave;nh: <code>container</code></li>
<li style="font-weight: 400;" aria-level="1">Tạo nhiều lớp bằng c&aacute;ch ph&acirc;n t&aacute;ch t&ecirc;n lớp bằng khoảng trắng: <code>element.className = "container center"</code></li>
</ul>

Tạo phần tử HTML mới bằng Document.createElement