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

Về mặt l&yacute; thuyết, việc kh&ocirc;i phục dữ liệu từ localStorage cũng đơn giản như việc thay thế gi&aacute; trị khởi tạo trong <code>useState</code> bằng một cuộc gọi đến localStorage, v&iacute; dụ:
<pre class="language-js" data-content="import%20%7BuseState%7D%20from%20%22react%22%3B%0A%0A%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20do%20NOT%20use%20this%20(for%20performance%20reasons)%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%5Bstate%2C%20setState%5D%20%3D%20useState(localStorage.getItem(%22some-state%22))%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {useState} from "react";

function App() {
 // do NOT use this (for performance reasons)
 const [state, setState] = useState(localStorage.getItem("some-state"));
}</code></pre>
Đoạn code tr&ecirc;n hoạt động b&igrave;nh thường nhưng c&oacute; vấn đề về hiệu suất.
Việc gọi h&agrave;m <code>localStorage.getItem ("some-state")</code> tốn rất nhiều thời gian v&agrave; ch&uacute;ng ta chỉ cần sử dụng n&oacute; để khởi tạo trạng th&aacute;i ban đầu. Tuy nhi&ecirc;n, mỗi khi component App được hiển thị lại, d&ograve;ng lệnh <code>localStorage.getItem ("some-state")</code> sẽ chạy ngay mặc d&ugrave; ch&uacute;ng ta KH&Ocirc;NG cần gi&aacute; trị đ&oacute; nữa.
<h2 style="text-align: justify;">Lazy initial state (Trạng th&aacute;i khởi tạo trễ)</h2>
Trạng th&aacute;i khởi tạo trễ c&oacute; thể gi&uacute;p khắc phục vấn đề n&agrave;y. N&oacute; cho ph&eacute;p bạn truyền một định nghĩa h&agrave;m thay v&igrave; biểu thức, từ đ&oacute; cho ph&eacute;p React chỉ gọi h&agrave;m đ&oacute; trong lần hiển thị ban đầu.
Dưới đ&acirc;y l&agrave; c&aacute;ch triển khai:
<pre class="language-js" data-content="import%20%7BuseState%7D%20from%20%22react%22%3B%0A%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20use%20this%20%F0%9F%91%8D%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%5Bstate%2C%20setState%5D%20%3D%20useState(()%20%3D%3E%20localStorage.getItem(%22some-state%22))%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import {useState} from "react";

function App() {
 // use this 👍
 const [state, setState] = useState(() =&gt; localStorage.getItem("some-state"));
}</code></pre>
H&atilde;y so s&aacute;nh đoạn code trước/sau khi sử dụng useState để thấy sự kh&aacute;c biệt tuy rất nhỏ nhưng c&oacute; thể ảnh hưởng đến hiệu suất ứng dụng:
<pre class="language-js" data-content="%2F%2F%20before%0Aconst%20%5Bstate%2C%20setState%5D%20%3D%20useState(localStorage.getItem(%22some-state%22))%3B%0A%2F%2F%20after%0Aconst%20%5Bstate%2C%20setState%5D%20%3D%20useState(()%20%3D%3E%20localStorage.getItem(%22some-state%22))%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>// before
const [state, setState] = useState(localStorage.getItem("some-state"));
// after
const [state, setState] = useState(() =&gt; localStorage.getItem("some-state"));</code></pre>
Sự kh&aacute;c biệt giữa hai c&aacute;ch triển khai l&agrave; trước đ&oacute; ch&uacute;ng ta sử dụng biểu thức: <code>localStorage.getItem ("some-state")</code> c&ograve;n trong c&aacute;ch triển khai sau, ch&uacute;ng ta sử dụng h&agrave;m: <code>() =&gt; localStorage.getItem ("some-state")</code>.
Việc sử dụng h&agrave;m n&agrave;y cho ph&eacute;p React chỉ gọi h&agrave;m cần thiết để lấy gi&aacute; trị của trạng th&aacute;i khởi tạo 1 lần, điều n&agrave;y sẽ kh&ocirc;ng g&acirc;y ra vấn đề về hiệu suất.
V&igrave; vậy, nếu so s&aacute;nh th&igrave; phương ph&aacute;p đầu ti&ecirc;n (c&aacute;ch chậm hơn) l&agrave; sử dụng một biểu thức chạy mỗi lần (v&igrave; React kh&ocirc;ng thể tự quyết định việc bỏ qua một biểu thức). Ngược lại, phương ph&aacute;p thứ hai (c&aacute;ch nhanh hơn) l&agrave; sử dụng một h&agrave;m chỉ chạy một lần duy nhất. Khi bạn cung cấp một định nghĩa h&agrave;m, React chỉ chạy n&oacute; một lần duy nhất trong qu&aacute; tr&igrave;nh khởi tạo.
H&agrave;m được sử dụng trong v&iacute; dụ tr&ecirc;n l&agrave; một h&agrave;m mũi t&ecirc;n với gi&aacute; trị trả về ngầm định nhưng bạn c&oacute; thể sử dụng bất kỳ kiểu h&agrave;m n&agrave;o bạn muốn miễn l&agrave; n&oacute; trả về gi&aacute; trị cho trạng th&aacute;i khởi tạo. V&iacute; dụ tr&ecirc;n c&oacute; thể được viết lại như sau:
<pre class="language-js" data-content="%2F%2F%20Also%20valid%0Aconst%20%5Bstate%2C%20setState%5D%20%3D%20useState(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20localStorage.getItem(%22some-state%22)%0A%7D)%3B%0A%2F%2FAlso%20valid%0Aconst%20%5Bstate%2C%20setState%5D%20%3D%20useState(function()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20localStorage.getItem(%22some-state%22)%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>// Also valid
const [state, setState] = useState(() =&gt; {
 return localStorage.getItem("some-state")
});
//Also valid
const [state, setState] = useState(function() {
 return localStorage.getItem("some-state")
});</code></pre>
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Trạng th&aacute;i khởi tạo trễ gi&uacute;p tr&aacute;nh c&aacute;c vấn đề về hiệu suất khi việc t&iacute;nh to&aacute;n gi&aacute; trị ban đầu cho trạng th&aacute;i c&oacute; thể tốn nhiều thời gian v&agrave; t&agrave;i nguy&ecirc;n.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Trạng th&aacute;i khởi tạo trễ hoạt động bằng c&aacute;ch x&aacute;c định một h&agrave;m trả về trạng th&aacute;i khởi tạo thay v&igrave; biểu thức. Điều n&agrave;y cho ph&eacute;p React chỉ gọi h&agrave;m đ&oacute; một lần duy nhất.</li>
</ul>