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 b&agrave;i học trước, ch&uacute;ng ta đ&atilde; t&igrave;m hiểu c&aacute;ch định nghĩa trạng th&aacute;i trong component v&agrave; sử dụng n&oacute; trong component con.
Trong b&agrave;i học n&agrave;y, ch&uacute;ng ta sẽ kh&aacute;m ph&aacute; kh&aacute;i niệm 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).
Để chia sẻ trạng th&aacute;i giữa hai component, bạn c&oacute; thể n&acirc;ng trạng th&aacute;i đ&oacute; l&ecirc;n th&agrave;nh trạng th&aacute;i của component cha chung gần nhất của ch&uacute;ng.
Điều n&agrave;y c&oacute; nghĩa l&agrave; nếu bạn c&oacute; hai component phụ thuộc v&agrave;o c&ugrave;ng một trạng th&aacute;i th&igrave; trạng th&aacute;i sẽ được x&aacute;c định trong component cha chung gần nhất của ch&uacute;ng.
Giả sử ch&uacute;ng ta muốn x&acirc;y dựng một Danh s&aacute;ch việc cần l&agrave;m; ch&uacute;ng ta sẽ cần một <code>form</code> để th&ecirc;m "todo" cũng như một danh s&aacute;ch ul để liệt k&ecirc; c&aacute;c t&aacute;c vụ.
<pre class="language-js" data-content="import%20%7BuseState%7D%20from%20%22react%22%3B%0A%0Afunction%20TodoApp()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%5Btodos%2C%20setTodos%5D%20%3D%20useState(%5B%5D)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%5Bentry%2C%20setEntry%5D%20%3D%20useState(%22%22)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0function%20handleEntryChange(event)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0setEntry(event.target.value)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0function%20handleFormSubmit(event)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0event.preventDefault()%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20add%20the%20new%20entry%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0setTodos(%5B...todos%2C%20entry%5D)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20reset%2Fempty%20the%20textbox%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0setEntry(%22%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3C%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cform%20onSubmit%3D%7BhandleFormSubmit%7D%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%22todo%22%3EEnter%20To%20do%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%22todo%22%20value%3D%7Bentry%7D%20onChange%3D%7BhandleEntryChange%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%C2%A0%C2%A0%C2%A0%C2%A0%3Cul%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%7Btodos.map((todo%2C%20index)%20%3D%3E%20%3Cli%20key%3D%7Bindex%7D%3E%7Btodo%7D%3C%2Fli%3E)%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3C%2Ful%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2F%3E%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 TodoApp() {
 const [todos, setTodos] = useState([]);
 const [entry, setEntry] = useState("");

 function handleEntryChange(event) {
 setEntry(event.target.value);
 }

 function handleFormSubmit(event) {
 event.preventDefault();
 // add the new entry
 setTodos([...todos, entry]);
 // reset/empty the textbox
 setEntry("");
 }

 return &lt;&gt;
 &lt;form onSubmit={handleFormSubmit}&gt;
 &lt;label htmlFor="todo"&gt;Enter To do: &lt;/label&gt;
 &lt;input type="text" id="todo" value={entry} onChange={handleEntryChange} /&gt;
 &lt;/form&gt;
 &lt;ul&gt;
 {todos.map((todo, index) =&gt; &lt;li key={index}&gt;{todo}&lt;/li&gt;)}
 &lt;/ul&gt;
 &lt;/&gt;;
}</code></pre>
B&acirc;y giờ h&atilde;y t&aacute;ch component n&agrave;y th&agrave;nh 2 component mới:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>&lt;TodoForm /&gt;</code> chứa <code>&lt;form&gt;</code> v&agrave; c&aacute;c component con của n&oacute;</li>
<li style="font-weight: 400;" aria-level="1"><code>&lt;TodoList /&gt;</code> chứa <code>&lt;ul&gt;</code> v&agrave; c&aacute;c component con của n&oacute;</li>
</ul>
Vấn đề l&agrave; cả hai component <code>TodoForm</code> v&agrave; <code>TodoList</code> đều phụ thuộc v&agrave;o c&ugrave;ng một trạng th&aacute;i, đ&oacute; l&agrave; <code>todos</code> v&agrave; <code>entry</code>.
Biểu mẫu cần trạng th&aacute;i <code>todos</code> để c&oacute; thể th&ecirc;m <code>entry</code> mới v&agrave;o mảng <code>todos</code>.
V&igrave; vậy, ch&uacute;ng ta phải n&acirc;ng trạng th&aacute;i v&agrave; định nghĩa trạng th&aacute;i trong component cha, đ&oacute; l&agrave; <code>&lt;TodoApp /&gt;</code>.
Sau đ&oacute;, component <code>TodoApp</code> n&agrave;y sẽ truyền trạng th&aacute;i v&agrave; phương thức <code>onChange</code> xuống cả hai component con.
Dưới đ&acirc;y l&agrave; ảnh minh họa:
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/3afce868-0ee5-4de2-8ab9-564c3a2c433e" alt="lifting-state-up" />
Như vậy, trạng th&aacute;i đ&atilde; được định nghĩa trong component cha.
Code sau khi được t&aacute;i cấu tr&uacute;c:
<pre class="language-js" data-content="%2F%2F%20TodoApp.js%0Aimport%20%7BuseState%7D%20from%20%22react%22%3B%0Aimport%20TodoForm%20from%20%22.%2FTodoForm.js%22%3B%0Aimport%20TodoList%20from%20%22.%2FTodoList.js%22%3B%0A%0Afunction%20TodoApp()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%5Btodos%2C%20setTodos%5D%20%3D%20useState(%5B%5D)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%5Bentry%2C%20setEntry%5D%20%3D%20useState(%22%22)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0function%20handleEntryChange(event)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0setEntry(event.target.value)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0function%20handleFormSubmit(event)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0event.preventDefault()%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0setTodos(%5B...todos%2C%20entry%5D)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0setEntry(%22%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3C%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3CTodoForm%20entry%3D%7Bentry%7D%20onEntryChange%3D%7BhandleEntryChange%7D%20onFormSubmit%3D%7BhandleFormSubmit%7D%20%2F%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3CTodoList%20todos%3D%7Btodos%7D%20%2F%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2F%3E%3B%0A%7D%0A%0A%2F%2F%20TodoForm.js%0Afunction%20TodoForm(props)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cform%20onSubmit%3D%7Bprops.onFormSubmit%7D%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Clabel%20htmlFor%3D%22todo%22%3EEnter%20To%20do%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%22todo%22%20value%3D%7Bprops.entry%7D%20onChange%3D%7Bprops.onEntryChange%7D%20%2F%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2Fform%3E%3B%0A%7D%0A%0A%2F%2F%20TodoList.js%0Afunction%20TodoList(props)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cul%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7Bprops.todos.map((todo%2C%20index)%20%3D%3E%20%3Cli%20key%3D%7Bindex%7D%3E%7Btodo%7D%3C%2Fli%3E)%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%3C%2Ful%3E%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>// TodoApp.js
import {useState} from "react";
import TodoForm from "./TodoForm.js";
import TodoList from "./TodoList.js";

function TodoApp() {
 const [todos, setTodos] = useState([]);
 const [entry, setEntry] = useState("");

 function handleEntryChange(event) {
 setEntry(event.target.value);
 }

 function handleFormSubmit(event) {
 event.preventDefault();
 setTodos([...todos, entry]);
 setEntry("");
 }

 return &lt;&gt;
 &lt;TodoForm entry={entry} onEntryChange={handleEntryChange} onFormSubmit={handleFormSubmit} /&gt;
 &lt;TodoList todos={todos} /&gt;
 &lt;/&gt;;
}

// TodoForm.js
function TodoForm(props) {
 return &lt;form onSubmit={props.onFormSubmit}&gt;
 &lt;label htmlFor="todo"&gt;Enter To do: &lt;/label&gt;
 &lt;input type="text" id="todo" value={props.entry} onChange={props.onEntryChange} /&gt;
 &lt;/form&gt;;
}

// TodoList.js
function TodoList(props) {
 return &lt;ul&gt;
 {props.todos.map((todo, index) =&gt; &lt;li key={index}&gt;{todo}&lt;/li&gt;)}
 &lt;/ul&gt;;
}</code></pre>
Lưu &yacute; rằng về mặt l&yacute; thuyết, bạn c&oacute; thể để trạng th&aacute;i <code>entry</code> trong component <code>TodoForm</code>. Khi đề cập đến việc n&acirc;ng trạng th&aacute;i l&ecirc;n component cha, rất kh&oacute; để đưa ra lời khuy&ecirc;n &aacute;p dụng cho mọi t&igrave;nh huống.
Tuy nhi&ecirc;n, việc c&oacute; trạng th&aacute;i chung trong component cha chung gần nhất mang lại một số lợi &iacute;ch nhất định (mặc d&ugrave; code c&oacute; thể d&agrave;i hơn một ch&uacute;t). Cụ thể:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Component cha chung trở th&agrave;nh nguồn dữ liệu duy nhất. Điều n&agrave;y gi&uacute;p dễ d&agrave;ng việc t&igrave;m kiếm v&agrave; sửa lỗi, v&igrave; bạn biết chỉ c&oacute; một nơi duy nhất m&agrave; trạng th&aacute;i sẽ được thay đổi.</li>
<li style="font-weight: 400;" aria-level="1">C&oacute; một vị tr&iacute; quản l&yacute; trạng th&aacute;i chung gi&uacute;p duy tr&igrave; t&iacute;nh nhất qu&aacute;n trong ứng dụng. Nếu bạn tạo một số logic x&aacute;c thực cho <code>entry</code>, bạn chỉ cần thực hiện một lần duy nhất trong component cha chung.</li>
</ul>
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Để chia sẻ một trạng th&aacute;i giữa hai component, bạn c&oacute; thể n&acirc;ng trạng th&aacute;i chung l&ecirc;n th&agrave;nh trạng th&aacute;i của component cha chung gần nhất của ch&uacute;ng.</li>
</ul>
[___NOTE_
Ch&uacute;ng ta n&acirc;ng trạng th&aacute;i chung l&ecirc;n th&agrave;nh trạng th&aacute;i của component cha v&igrave; ch&uacute;ng ta muốn dữ liệu được truyền từ component cha xuống component con.
Khi dữ liệu được truyền xuống, ứng dụng trở n&ecirc;n dễ d&agrave;ng kiểm so&aacute;t v&agrave; việc t&igrave;m kiếm v&agrave; c&ocirc; lập lỗi trở n&ecirc;n dễ d&agrave;ng hơn.
Quy ước đặt t&ecirc;n <code>onSubjectEvent</code> l&agrave; rất quan trọng v&igrave; n&oacute; gợi nhớ rằng prop l&agrave; một h&agrave;m sự kiện.
H&atilde;y nhớ rằng c&oacute; nhiều c&aacute;ch để giải quyết c&ugrave;ng một b&agrave;i tập trong React. React kh&ocirc;ng &eacute;p buộc bạn phải sử dụng một c&aacute;ch duy nhất. Trong suốt kh&oacute;a học n&agrave;y, Tek4 đưa ra những đề xuất v&igrave; khi bắt đầu với một framework mới, bạn c&oacute; thể gặp kh&oacute; khăn trong việc đưa ra quyết định ri&ecirc;ng của m&igrave;nh. Khi l&agrave;m việc với c&aacute;c c&ocirc;ng ty lớn hoặc trong c&aacute;c dự &aacute;n lớn hơn, bạn sẽ biết đến những phương ph&aacute;p tiếp cận kh&aacute;c nhau m&agrave; bạn c&oacute; thể &aacute;p dụng.
_NOTE___]

Chia sẻ trạng thái giữa các component