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

Đ&acirc;y l&agrave; b&agrave;i học được tr&iacute;ch dẫn từ kh&oacute;a JavaScript.
Mỗi khi bạn <code>import</code> một file v&agrave;o code JavaScript, qu&aacute; tr&igrave;nh <code>import</code> sẽ diễn ra đồng bộ. Đ&acirc;y được gọi l&agrave; static import (th&ecirc;m v&agrave;o tĩnh). H&atilde;y xem một v&iacute; dụ:
<pre class="language-js" data-content="import%20debounce%20from%20%22lodash-es%22%3B%0Aimport%20Helpers%2C%20%7BgetDate%7D%20from%20%22.%2Fhelpers.js%22%3B%0A%0Aconsole.log(debounce)%3B%20%2F%2F%20lodash's%20debounce%20function%0Aconsole.log(Helpers)%3B%20%2F%2F%20a%20Helpers%20class%20exported%20by%20.%2Fhelpers.js%20(default%20export)%0Aconsole.log(getDate)%3B%20%2F%2F%20a%20getDate%20function%20exported%20by%20.%2Fhelpers.js%20(named%20export)" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import debounce from "lodash-es";
import Helpers, {getDate} from "./helpers.js";

console.log(debounce); // lodash's debounce function
console.log(Helpers); // a Helpers class exported by ./helpers.js (default export)
console.log(getDate); // a getDate function exported by ./helpers.js (named export)</code></pre>
Qu&aacute; tr&igrave;nh import được xử l&yacute; đồng bộ, tức l&agrave; tr&igrave;nh duyệt sẽ chờ c&aacute;c file được th&ecirc;m v&agrave;o ho&agrave;n tất trước khi chạy phần c&ograve;n lại của code. Điều n&agrave;y xảy ra khi bạn sử dụng <code>&lt;script type="module"&gt;&lt;/script&gt;</code> m&agrave; kh&ocirc;ng sử dụng tr&igrave;nh tổng hợp module.
Khi bạn sử dụng tr&igrave;nh tổng hợp module, c&aacute;c c&acirc;u lệnh <code>import</code> sẽ hợp nhất code từ c&aacute;c file được th&ecirc;m th&agrave;nh một file ch&iacute;nh. V&igrave; vậy, trong trường hợp của <code>webpack</code>, bạn sẽ c&oacute; một file <code>bundle.js</code> chứa to&agrave;n bộ code <code>debounce</code>, <code>NumericHelper</code> v&agrave; <code>console.log(debounce, NumericHelper)</code>.
Khi ứng dụng ng&agrave;y c&agrave;ng ph&aacute;t triển, k&iacute;ch thước g&oacute;i JavaScript trở n&ecirc;n ng&agrave;y c&agrave;ng lớn, dẫn đến việc khởi động ban đầu của trang web ng&agrave;y c&agrave;ng trở n&ecirc;n chậm hơn.
Ngo&agrave;i ra, đ&ocirc;i khi, import chỉ cần thiết trong một số trường hợp cụ thể. Giả sử bạn cần tải Thư viện tải l&ecirc;n h&igrave;nh ảnh nếu người d&ugrave;ng truy cập trang c&agrave;i đặt v&agrave; nhấp v&agrave;o <code>Edit avatar</code>. V&agrave; thật ra t&iacute;nh năng n&agrave;y kh&ocirc;ng được sử dụng phổ biến trong trang web. V&igrave; vậy, tại sao lại khiến tất cả người d&ugrave;ng phải chờ trang tải để th&ecirc;m thư viện n&agrave;y d&ugrave; họ c&oacute; sử dụng t&iacute;nh năng của n&oacute; hay kh&ocirc;ng?
Thay v&agrave;o đ&oacute;, bạn c&oacute; thể sử dụng <code>dynamic imports</code>. Th&ecirc;m v&agrave;o động chỉ tải m&ocirc;-đun khi h&agrave;m <code>import()</code> động được thực thi.
Để th&ecirc;m v&agrave;o động, bạn phải sử dụng <code>import()</code> như một h&agrave;m.
<h3 style="text-align: justify;">Ví dụ b&ocirc;̉ sung</h3>
Trước khi ph&acirc;n t&iacute;ch m&atilde; nguồn, bạn cần biết một điều l&agrave; kh&oacute;a học n&agrave;y chủ yếu sử dụng th&ecirc;m v&agrave;o động. Trang chỉ tải trung t&acirc;m trợ gi&uacute;p v&agrave; thư viện b&ecirc;n ngo&agrave;i khi bạn nhấp v&agrave;o n&uacute;t Trợ gi&uacute;p lần đầu ti&ecirc;n. Đ&oacute; l&agrave; một thư viện lớn v&agrave; kh&ocirc;ng phải ai cũng sử dụng n&oacute;. Đ&acirc;y l&agrave; l&yacute; do tại sao <a href="https://tek4.vn/">Tek4</a> th&ecirc;m n&oacute; động.
<h2 style="text-align: justify;">import()</h2>
Dưới đ&acirc;y l&agrave; c&aacute;ch chuyển đổi hai c&acirc;u lệnh <code>import</code> trước đ&oacute; th&agrave;nh <code>dynamic import</code>:
<pre class="language-js" data-content="import(%22lodash-es%22).then(module%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20debounce%20%3D%20module.default%3B%20%2F%2F%20because%20debounce%20is%20a%20default%20export%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20use%20debounce%20inside%20this%20function...%0A%7D)%3B%0A%0Aimport(%22.%2Fhelpers.js%22).then(module%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20Helpers%20%3D%20module.default%3B%20%2F%2F%20because%20Helpers%20is%20a%20default%20export%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20getDate%20%3D%20module.getDate%3B%20%2F%2F%20because%20getDate%20is%20a%20named%20export%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20use%20Helpers%20and%20getDate%20inside%20this%20function...%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import("lodash-es").then(module =&gt; {
 const debounce = module.default; // because debounce is a default export
 // use debounce inside this function...
});

import("./helpers.js").then(module =&gt; {
 const Helpers = module.default; // because Helpers is a default export
 const getDate = module.getDate; // because getDate is a named export
 // use Helpers and getDate inside this function...
});</code></pre>
Như bạn thấy, th&ecirc;m v&agrave;o động hoạt động cho cả thư viện v&agrave; file. Khi bạn sử dụng <code>import()</code> như một h&agrave;m (th&ecirc;m v&agrave;o động), n&oacute; sẽ trả về một promise.
Khi promise được thực thi xong, n&oacute; sẽ được xử l&yacute; với một đối tượng <code>module</code> chứa dữ liệu được xuất.
Đối tượng mặc định c&oacute; sẵn dạng gi&aacute; trị được g&aacute;n cho kh&oacute;a <code>module</code> v&agrave; dữ liệu kh&aacute;c c&oacute; sẵn dưới c&aacute;c kh&oacute;a c&oacute; c&ugrave;ng t&ecirc;n với t&ecirc;n đ&atilde; được xuất.
Khi bạn sử dụng default export, dữ liệu được xuất c&oacute; thể được truy cập th&ocirc;ng qua kh&oacute;a <code>default</code>, trong khi dữ liệu kh&aacute;c c&oacute; thể được truy cập th&ocirc;ng qua c&aacute;c kh&oacute;a c&oacute; c&ugrave;ng t&ecirc;n với t&ecirc;n đ&atilde; sử dụng trong c&acirc;u lệnh export.
<h3 style="text-align: justify;">Th&ecirc;m v&agrave;o động dựa tr&ecirc;n điều kiện hoặc Tương t&aacute;c người d&ugrave;ng</h3>
T&iacute;nh linh hoạt của th&ecirc;m v&agrave;o động cho ph&eacute;p bạn thực hiện việc import một module khi cần thiết. V&iacute; dụ: ch&uacute;ng ta tải thư viện <code>chat</code> khi người d&ugrave;ng nhấp v&agrave;o n&uacute;t Li&ecirc;n hệ hỗ trợ. Dưới đ&acirc;y l&agrave; v&iacute; dụ minh họa c&aacute;ch th&ecirc;m v&agrave;o động khi người d&ugrave;ng nhấp v&agrave;o n&uacute;t:
<pre class="language-js" data-content="const%20button%20%3D%20document.querySelector(%22%23button%22)%3B%0A%0Abutton.addEventListener(%22click%22%2C%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0import(%22chat-library%22).then(module%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0module.init()%3B%20%2F%2F%20assuming%20the%20chat-library%20exports%20a%20named%20function%20called%20init.%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D)%3B%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const button = document.querySelector("#button");

button.addEventListener("click", () =&gt; {
 import("chat-library").then(module =&gt; {
 module.init(); // assuming the chat-library exports a named function called init.
 });
});</code></pre>
Bạn kh&ocirc;ng thể thực hiện một lệnh <code>import</code> dựa v&agrave;o h&agrave;nh động của người d&ugrave;ng khi import được sử dụng theo c&aacute;ch tĩnh (như ta đ&atilde; học trước đ&oacute; trong kh&oacute;a học). V&igrave; vậy, code dưới đ&acirc;y kh&ocirc;ng hoạt động:
<pre class="language-js" data-content="const%20button%20%3D%20document.querySelector(%22%23button%22)%3B%0A%0Abutton.addEventListener(%22click%22%2C%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20%E2%9D%8C%20this%20does%20NOT%20work%20%E2%9D%8C%0A%C2%A0%C2%A0%C2%A0%C2%A0import%20%7Binit%7D%20from%20%22chat-library%22%0A%C2%A0%C2%A0%C2%A0%C2%A0module.init()%3B%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const button = document.querySelector("#button");

button.addEventListener("click", () =&gt; {
 // ❌ this does NOT work ❌
 import {init} from "chat-library"
 module.init();
});</code></pre>
<h2 style="text-align: justify;">V&iacute; dụ với async/await</h2>
V&igrave; <code>import()</code> trả về một promise, bạn c&oacute; thể sử dụng c&uacute; ph&aacute;p <code>async/await</code>. Đừng qu&ecirc;n đặt h&agrave;m cha l&agrave; <code>async</code>:
<pre class="language-js" data-content="const%20button%20%3D%20document.querySelector(%22%23button%22)%3B%0A%0Abutton.addEventListener(%22click%22%2C%20async%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20module%20%3D%20await%20import(%22chat-library%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0module.init()%3B%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const button = document.querySelector("#button");

button.addEventListener("click", async () =&gt; {
 const module = await import("chat-library");
 module.init();
});</code></pre>
<h3 style="text-align: justify;">V&iacute; dụ với destructuring</h3>
Bạn cũng c&oacute; thể sử dụng object destructuring ở đ&acirc;y v&igrave; n&oacute; trả về một đối tượng. V&iacute; dụ: ch&uacute;ng ta c&oacute; thể destructure h&agrave;m <code>init</code> từ đối tượng <code>module</code>:
<pre class="language-js" data-content="const%20button%20%3D%20document.querySelector(%22%23button%22)%3B%0A%0Abutton.addEventListener(%22click%22%2C%20async%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%7Binit%7D%20%3D%20await%20import(%22chat-library%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0init()%3B%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const button = document.querySelector("#button");

button.addEventListener("click", async () =&gt; {
 const {init} = await import("chat-library");
 init();
});</code></pre>
<h2 style="text-align: justify;">Xử l&yacute; lỗi</h2>
Đừng qu&ecirc;n bước xử l&yacute; lỗi! Việc th&ecirc;m module động c&oacute; thể thất bại do điều kiện mạng hoặc c&aacute;c vấn đề kh&aacute;c. V&igrave; vậy, h&atilde;y nhớ đ&oacute;ng g&oacute;i <code>async/await</code> trong khối <code>try...catch</code> hoặc th&ecirc;m <code>.catch()</code> v&agrave;o cuộc gọi promise.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Mỗi khi bạn <code>import</code> một file v&agrave;o code JavaScript, qu&aacute; tr&igrave;nh <code>import</code> sẽ diễn ra đồng bộ. Đ&acirc;y được gọi l&agrave; th&ecirc;m v&agrave;o tĩnh.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Bạn c&oacute; thể th&ecirc;m v&agrave;o động một file hoặc thư viện bằng c&aacute;ch sử dụng <code>import()</code> như một h&agrave;m.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><code>import()</code> trả về một promise. N&oacute; được xử l&yacute; với một đối tượng chứa dữ liệu được xuất.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Khi bạn sử dụng <code>default</code> export, dữ liệu được xuất c&oacute; thể được truy cập th&ocirc;ng qua kh&oacute;a <code>default</code>, trong khi dữ liệu kh&aacute;c c&oacute; thể được truy cập th&ocirc;ng qua c&aacute;c kh&oacute;a c&oacute; c&ugrave;ng t&ecirc;n với t&ecirc;n đ&atilde; sử dụng trong c&acirc;u lệnh export.</li>
</ul>

Dynamic imports