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

B&acirc;y giờ ch&uacute;ng ta đ&atilde; biết c&aacute;ch truyền h&agrave;m dưới dạng props trong React, h&atilde;y xem x&eacute;t component React sau:
<pre class="language-js" data-content="%2F%2F%20index.js%0Aimport%20%7BuseState%7D%20from%20%22react%22%3B%0A%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%5Bname%2C%20setName%5D%20%3D%20useState(%22%22)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0function%20handleNameChange(event)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0setName(event.target.value)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cdiv%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Ch2%3EHello%20%7Bname%7D%3C%2Fh2%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cform%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Clabel%20htmlFor%3D%22name%22%3EName%3A%20%3C%2Flabel%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cinput%20type%3D%22text%22%20id%3D%22name%22%20value%3D%7Bname%7D%20onChange%3D%7BhandleNameChange%7D%20%2F%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3C%2Fform%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2Fdiv%3E%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>// index.js
import {useState} from "react";

function App() {
 const [name, setName] = useState("");

 function handleNameChange(event) {
 setName(event.target.value);
 }

 return &lt;div&gt;
 &lt;h2&gt;Hello {name}&lt;/h2&gt;
 &lt;form&gt;
 &lt;label htmlFor="name"&gt;Name: &lt;/label&gt;
 &lt;input type="text" id="name" value={name} onChange={handleNameChange} /&gt;
 &lt;/form&gt;
 &lt;/div&gt;
}</code></pre>
Ch&uacute;ng ta muốn t&aacute;i cấu tr&uacute;c component th&agrave;nh:
<pre class="language-js" data-content="%2F%2F%20index.js%0Aimport%20%7BuseState%7D%20from%20%22react%22%3B%0Aimport%20NameForm%20from%20%22.%2FNameForm.js%22%3B%0A%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%5Bname%2C%20setName%5D%20%3D%20useState(%22%22)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0function%20handleNameChange(event)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0setName(event.target.value)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cdiv%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Ch2%3EHello%20%7Bname%7D%3C%2Fh2%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3CNameForm%20%2F%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2Fdiv%3E%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>// index.js
import {useState} from "react";
import NameForm from "./NameForm.js";

function App() {
 const [name, setName] = useState("");

 function handleNameChange(event) {
 setName(event.target.value);
 }

 return &lt;div&gt;
 &lt;h2&gt;Hello {name}&lt;/h2&gt;
 &lt;NameForm /&gt;
 &lt;/div&gt;
}</code></pre>
Để &yacute; đoạn code đ&atilde; t&aacute;i cấu tr&uacute;c component <code>&lt;form&gt;</code> th&agrave;nh component <code>NameForm</code>.
Lưu &yacute; rằng đoạn code n&agrave;y sẽ kh&ocirc;ng hoạt động v&igrave; ch&uacute;ng ta cần truyền c&aacute;c sự kiện <code>name</code> v&agrave; <code>onChange</code> cho component <code>NameForm</code>. H&atilde;y tiếp tục đọc b&agrave;i viết để t&igrave;m hiểu c&aacute;ch l&agrave;m điều đ&oacute;.
<h2 style="text-align: justify;">1. Truyền "value" v&agrave; "onChange"</h2>
Component <code>NameForm</code> cần hiển thị một hộp văn bản v&agrave; cập nhật gi&aacute; trị của n&oacute; mỗi khi c&oacute; thay đổi; do đ&oacute;, n&oacute; cần thiết lập c&aacute;c prop <code>value</code> v&agrave; <code>onChange</code>.
Để l&agrave;m điều đ&oacute;, ch&uacute;ng ta bắt đầu bằng c&aacute;ch truyền ch&uacute;ng từ component <code>App</code> xuống:
<pre class="language-js" data-content="%2F%2F%20index.js%0Aimport%20NameForm%20from%20%22.%2FNameForm.js%22%3B%0A%0Afunction%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%5Bname%2C%20setName%5D%20%3D%20useState(%22%22)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0function%20handleNameChange(event)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0setName(event.target.value)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cdiv%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Ch2%3EHello%20%7Bname%7D%3C%2Fh2%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3CNameForm%20name%3D%7Bname%7D%20onNameChange%3D%7BhandleNameChange%7D%20%2F%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2Fdiv%3E%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>// index.js
import NameForm from "./NameForm.js";

function App() {
 const [name, setName] = useState("");

 function handleNameChange(event) {
 setName(event.target.value);
 }

 return &lt;div&gt;
 &lt;h2&gt;Hello {name}&lt;/h2&gt;
 &lt;NameForm name={name} onNameChange={handleNameChange} /&gt;
 &lt;/div&gt;
}</code></pre>
Một số điều cần lưu &yacute;:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>name={name}</code> truyền biến trạng th&aacute;i <code>name</code> xuống</li>
<li style="font-weight: 400;" aria-level="1"><code>onNameChange={handleNameChange}</code> truyền h&agrave;m <code>handleNameChange</code> (như ch&uacute;ng ta đ&atilde; thấy trong chương trước)</li>
<li style="font-weight: 400;" aria-level="1"><code>onNameChange</code> tu&acirc;n theo quy ước đặt t&ecirc;n như được tr&igrave;nh b&agrave;y trong chương trước.</li>
<li style="font-weight: 400;" aria-level="1">Để &yacute; trạng th&aacute;i được tạo v&agrave; duy tr&igrave; trong component cha.</li>
<li style="font-weight: 400;" aria-level="1">Component <code>App</code> l&agrave; stateful component v&igrave; n&oacute; quản l&yacute; trạng th&aacute;i.</li>
</ul>
<h2 style="text-align: justify;">2. Sử dụng "value" v&agrave; "onChange"</h2>
B&acirc;y giờ trong component <code>NameForm</code>, ch&uacute;ng ta c&oacute; thể sử dụng 2 prop n&agrave;y:
<pre class="language-js" data-content="%2F%2FNameForm.js%0Aexport%20default%20function%20NameForm(props)%20%7B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cform%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Clabel%20htmlFor%3D%22name%22%3EName%3A%20%3C%2Flabel%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cinput%20type%3D%22text%22%20id%3D%22name%22%20value%3D%7Bprops.name%7D%20onChange%3D%7Bprops.onNameChange%7D%20%2F%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2Fform%3E%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>//NameForm.js
export default function NameForm(props) {

 return &lt;form&gt;
 &lt;label htmlFor="name"&gt;Name: &lt;/label&gt;
 &lt;input type="text" id="name" value={props.name} onChange={props.onNameChange} /&gt;
 &lt;/form&gt;
}</code></pre>
Một số điều cần lưu &yacute;:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Component l&agrave; stateless v&igrave; n&oacute; KH&Ocirc;NG quản l&yacute; trạng th&aacute;i. Mặc d&ugrave; c&oacute; một hộp văn bản, component n&agrave;y c&oacute; một tr&igrave;nh xử l&yacute; <code>onChange</code> gọi <code>props.onNameChange</code> thuộc về component cha của n&oacute;.</li>
<li style="font-weight: 400;" aria-level="1">Component cha xử l&yacute; trạng th&aacute;i.</li>
<li style="font-weight: 400;" aria-level="1"><code>value={name}</code> đ&atilde; thay đổi th&agrave;nh <code>value={props.name}</code> v&igrave; <code>name</code> kh&ocirc;ng c&ograve;n l&agrave; trạng th&aacute;i nội bộ nữa m&agrave; l&agrave; một prop nhận được từ component cha.</li>
<li style="font-weight: 400;" aria-level="1">C&aacute;ch l&agrave;m tương tự &aacute;p dụng cho <code>onChange</code>.</li>
</ul>
<h2 style="text-align: justify;">Kết luận</h2>
Bạn c&oacute; nhận thấy rằng <code>App</code> l&agrave; stateful component v&agrave; <code>NameForm</code> l&agrave; stateless component kh&ocirc;ng?
V&igrave; vậy, trạng th&aacute;i chỉ được quản l&yacute; trong component cha <code>App</code>.
Đ&acirc;y l&agrave; v&iacute; dụ cơ bản nhất về lifting state up (n&acirc;ng trạng th&aacute;i của component con l&ecirc;n th&agrave;nh trạng th&aacute;i của component cha), hiện nay chưa c&oacute; b&agrave;i giải th&iacute;ch chi tiết về c&aacute;i t&ecirc;n n&agrave;y, nhưng bạn kh&ocirc;ng cần lo lắng về điều đ&oacute;.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Khi t&aacute;i cấu tr&uacute;c một biểu mẫu th&agrave;nh component con, biểu mẫu c&oacute; thể trở th&agrave;nh stateless component v&agrave; trạng th&aacute;i sẽ được quản l&yacute; bởi component cha.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Để l&agrave;m được điều đ&oacute;, bạn phải truyền <code>value</code> v&agrave; <code>onChange</code> từ component cha xuống component con v&agrave; sau đ&oacute; sử dụng ch&uacute;ng như <code>props.value</code> v&agrave; <code>props.onChange</code>.</li>
</ul>

Cải tiến component Form