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 chương trước, ch&uacute;ng ta đ&atilde; thực hiện lưu trữ trạng th&aacute;i của component trong localStorage.
Trong chương n&agrave;y, ch&uacute;ng ta sẽ t&igrave;m hiểu c&aacute;ch kh&ocirc;i phục trạng th&aacute;i từ localStorage, c&oacute; nghĩa l&agrave; gi&aacute; trị khởi tạo m&agrave; ta cung cấp cho <code>useState</code> sẽ đến từ localStorage.
Điều n&agrave;y cho ph&eacute;p bạn lưu trữ thiết lập cho chế độ tối. V&igrave; vậy, nếu người d&ugrave;ng chọn chế độ tối v&agrave; quay trở lại trang web trong tương lai, trang sẽ vẫn ở chế độ tối v&igrave; ch&uacute;ng ta đ&atilde; lưu trữ gi&aacute; trị đ&oacute; trong localStorage.
Ch&uacute;ng ta sẽ c&ugrave;ng t&igrave;m hiểu c&aacute;ch đọc gi&aacute; trị được lưu trữ trong localStorage, c&aacute;ch l&agrave;m c&oacute; ch&uacute;t kh&aacute;c biệt t&ugrave;y thuộc v&agrave;o kiểu dữ liệu được lưu trữ.
<h2 style="text-align: justify;">Chuỗi</h2>
Đọc chuỗi từ localStorage l&agrave; lựa chọn đơn giản nhất v&igrave; localStorage lưu trữ mọi thứ dưới dạng chuỗi.
<pre class="language-js" data-content="localStorage.getItem(%22key-here%22)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>localStorage.getItem("key-here");</code></pre>
<h2 style="text-align: justify;">Số</h2>
Bởi v&igrave; localStorage lu&ocirc;n trả về chuỗi, ch&uacute;ng ta cần chuyển đổi chuỗi th&agrave;nh số một c&aacute;ch thủ c&ocirc;ng:
<pre class="language-js" data-content="let%20value%20%3D%20localStorage.getItem(%22key-here%22)%3B%0Avalue%20%3D%20Number.parseInt(value%2C%2010)%3B%20%2F%2F%20convert%20to%20number" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>let value = localStorage.getItem("key-here");
value = Number.parseInt(value, 10); // convert to number</code></pre>
Bạn cũng c&oacute; thể sử dụng <code>Number.parseFloat (value, 10)</code> nếu muốn hiển thị phần thập ph&acirc;n (v&iacute; dụ: <code>12.5</code>).
Số 10 ch&iacute;nh l&agrave; đối số thứ hai, gọi l&agrave; cơ số.
<h2 style="text-align: justify;">Boolean</h2>
Gi&aacute; trị boolean c&oacute; thể l&agrave; <code>true</code> hoặc <code>false</code>. Khi được lưu v&agrave;o localStorage, ch&uacute;ng sẽ l&agrave; <code>"true"</code> hoặc <code>"false"</code>&nbsp;(v&igrave; ch&uacute;ng được chuyển đổi th&agrave;nh chuỗi).
C&aacute;ch chuyển đổi chuỗi trở lại th&agrave;nh boolean đơn giản nhất l&agrave; so s&aacute;nh mục trong localStorage với chuỗi <code>"true"</code>; sau đ&acirc;y l&agrave; l&yacute; do:
<pre class="language-js" data-content="%22true%22%20%3D%3D%3D%20%22true%22%20%2F%2F%20true%20(means%20original%20value%20was%20true)%0A%22false%22%20%3D%3D%3D%20%22true%22%20%2F%2F%20false%20(means%20original%20value%20was%20false)" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>"true" === "true" // true (means original value was true)
"false" === "true" // false (means original value was false)</code></pre>
Dưới đ&acirc;y l&agrave; c&aacute;ch viết khi đọc từ localStorage:
<pre class="language-js" data-content="const%20value%20%3D%20localStorage.getItem(%22key-here%22)%20%3D%3D%3D%20%22true%22%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const value = localStorage.getItem("key-here") === "true";</code></pre>
Bằng c&aacute;ch so s&aacute;nh với chuỗi <code>"true"</code>, bạn đang chuyển đổi gi&aacute; trị từ chuỗi th&agrave;nh kiểu boolean.
<h2 style="text-align: justify;">Gi&aacute; trị mặc định</h2>
Khi bạn đọc một kh&oacute;a chưa được lưu trữ trong localStorage, kết quả sẽ trả về gi&aacute; trị <code>null</code>.
Bạn c&oacute; thể đặt gi&aacute; trị mặc định cho biến theo nhiều c&aacute;ch như c&acirc;u lệnh <code>if</code>, to&aacute;n tử ba ng&ocirc;i hoặc to&aacute;n tử coalescing nullish (<code>??</code>). Dưới đ&acirc;y l&agrave; một số v&iacute; dụ g&aacute;n gi&aacute; trị mặc định l&agrave; mảng rỗng:
<pre class="language-js" data-content="%2F%2F%20using%20an%20if%20condition%0Alet%20value%20%3D%20%5B%5D%3B%20%2F%2F%20default%20value%0Aif%20(localStorage.getItem(%22key-here%22))%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0value%20%3D%20localStorage.getItem(%22key-here%22)%3B%0A%7D%0A%0A%2F%2F%20OR%3A%20using%20the%20ternary%20operator%0Aconst%20value%20%3D%20localStorage.getItem(%22key-here%22)%20!%3D%3D%20null%20%3F%20localStorage.getItem(%22key-here%22)%20%3A%20%5B%5D%3B%0A%0A%2F%2F%20OR%3A%20using%20the%20nullish%20coalescing%20operator%0Aconst%20value%20%3D%20localStorage.getItem(%22key-here%22)%20%3F%3F%20%5B%5D%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>// using an if condition
let value = []; // default value
if (localStorage.getItem("key-here")) {
 value = localStorage.getItem("key-here");
}

// OR: using the ternary operator
const value = localStorage.getItem("key-here") !== null ? localStorage.getItem("key-here") : [];

// OR: using the nullish coalescing operator
const value = localStorage.getItem("key-here") ?? [];</code></pre>
Ch&uacute;ng ta cần đặt gi&aacute; trị mặc định cho mảng nếu mong đợi localStorage trả về mảng. Điều n&agrave;y đảm bảo rằng việc gọi <code>.map()</code> hoặc c&aacute;c phương thức mảng kh&aacute;c sẽ kh&ocirc;ng g&acirc;y lỗi nếu <code>localStorage.getItem()</code> trả về <code>null</code>.
<h2 style="text-align: justify;">L&agrave;m thế n&agrave;o để kh&ocirc;i phục từ localStorage?</h2>
Chi tiết sẽ được tr&igrave;nh b&agrave;y trong b&agrave;i học tiếp theo, khi ch&uacute;ng ta t&igrave;m hiểu về lazy initial state (trạng th&aacute;i khởi tạo trễ).
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Đọc chuỗi từ localStorage l&agrave; lựa chọn đơn giản nhất v&igrave; localStorage lưu trữ mọi thứ dưới dạng chuỗi</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Đối với số, ch&uacute;ng ta cần chuyển đổi từ chuỗi sang số bằng c&aacute;ch sử dụng <code>Number.parseInt ("string", 10)</code></li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Đối với gi&aacute; trị boolean, ch&uacute;ng ta cần so s&aacute;nh với chuỗi <code>"true"</code> để&nbsp; chuyển đổi th&agrave;nh gi&aacute; trị boolean tương ứng.</li>
</ul>

Khôi phục trạng thái từ localStorage