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

Kh&aacute;i niệm cốt l&otilde;i thứ 4 của Redux l&agrave; gửi h&agrave;nh động (dispatching actions).
Ch&uacute;ng ta kh&ocirc;ng được ph&eacute;p thay đổi trạng th&aacute;i được lưu trữ trong cửa h&agrave;ng bằng c&aacute;ch thủ c&ocirc;ng. Thay v&agrave;o đ&oacute;, ch&uacute;ng ta phải y&ecirc;u cầu cửa h&agrave;ng thực hiện thay đổi bằng c&aacute;ch gửi một h&agrave;nh động.
Ch&uacute;ng ta đ&atilde; học rằng c&aacute;c h&agrave;nh động l&agrave; c&aacute;c đối tượng với cấu tr&uacute;c sau:
<pre class="language-js" data-content="%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0type%3A%20%22counter%2Fincrement%22%2C%20%2F%2F%20example%20of%20an%20action%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>{
 type: "counter/increment", // example of an action
}</code></pre>
Trong chương sau, bạn sẽ thấy ch&uacute;ng ta cũng c&oacute; thể cung cấp một <code>payload</code>. V&iacute; dụ: tăng gi&aacute; trị l&ecirc;n 5 hoặc 10.
Để gửi h&agrave;nh động, bạn phải sử dụng h&agrave;m <code>store.dispatch(action)</code>:
<pre class="language-js" data-content="store.dispatch(%7Btype%3A%20%22counter%2Fincrement%22%7D)%3B%0A%2F%2F%20another%20example%0Astore.dispatch(%7Btype%3A%20%22counter%2Freset%22%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>store.dispatch({type: "counter/increment"});
// another example
store.dispatch({type: "counter/reset"});</code></pre>
Gọi phương thức <code>store.dispatch()</code> sẽ y&ecirc;u cầu cửa h&agrave;ng gọi <code>reducer</code> để t&iacute;nh to&aacute;n trạng th&aacute;i mới. Nếu trạng th&aacute;i đ&atilde; thay đổi, giao diện người d&ugrave;ng sẽ được k&iacute;ch hoạt để cập nhật (điều n&agrave;y sẽ được thảo luận trong chương react-redux).
<h2 style="text-align: justify;">Gửi h&agrave;nh động khi nhấp chuột</h2>
Bạn c&oacute; thể gửi h&agrave;nh động ở bất kỳ đ&acirc;u trong code. Một trường hợp sử dụng phổ biến l&agrave; gửi h&agrave;nh động khi nhấp chuột v&agrave;o n&uacute;t. Đ&acirc;y l&agrave; điều m&agrave; ch&uacute;ng ta đ&atilde; l&agrave;m trong ứng dụng đếm:
<pre class="language-js" data-content="const%20addButton%20%3D%20document.querySelector(%22%23add-button%22)%3B%0A%0AaddButton.addEventListener(%22click%22%2C%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0store.dispatch(%7B%20type%3A%20%22counter%2Fincrement%22%20%7D)%3B%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const addButton = document.querySelector("#add-button");

addButton.addEventListener("click", () =&gt; {
 store.dispatch({ type: "counter/increment" });
});</code></pre>
<h2 style="text-align: justify;">Chương tr&igrave;nh ho&agrave;n chỉnh</h2>
<pre class="language-js" data-content="import%20%7B%20createStore%20%7D%20from%20%22redux%22%3B%0A%0Aconst%20initialState%20%3D%20%7B%20value%3A%200%20%7D%3B%0A%0Aconst%20counterReducer%20%3D%20(state%20%3D%20initialState%2C%20action)%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0if%20(action.type%20%3D%3D%3D%20%22counter%2Fincrement%22)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0value%3A%20state.value%20%2B%201%20%2F%2F%20important%3A%20do%20NOT%20mutate%20the%20state.%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20state%3B%20%2F%2F%20return%20the%20state%20as%20is%20(in%20all%20other%20cases)%0A%7D%3B%0A%0Aconst%20store%20%3D%20createStore(counterReducer)%3B%0A%0Aconst%20addButton%20%3D%20document.querySelector(%22%23add-button%22)%3B%0A%0AaddButton.addEventListener(%22click%22%2C%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0store.dispatch(%7B%20type%3A%20%22counter%2Fincrement%22%20%7D)%3B%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import { createStore } from "redux";

const initialState = { value: 0 };

const counterReducer = (state = initialState, action) =&gt; {
 if (action.type === "counter/increment") {
 return {
 value: state.value + 1 // important: do NOT mutate the state.
 };
 }

 return state; // return the state as is (in all other cases)
};

const store = createStore(counterReducer);

const addButton = document.querySelector("#add-button");

addButton.addEventListener("click", () =&gt; {
 store.dispatch({ type: "counter/increment" });
});</code></pre>
<h2 style="text-align: justify;">Tổng kết</h2>
T&oacute;m tắt c&aacute;ch thức hoạt động của Redux:
Cửa h&agrave;ng chứa trạng th&aacute;i ứng dụng v&agrave; một h&agrave;m reducer.
Khi bạn cần thực hiện thay đổi đối với giao diện người d&ugrave;ng, bạn phải gửi một h&agrave;nh động đến cửa h&agrave;ng.
Cửa h&agrave;ng sẽ t&iacute;nh to&aacute;n trạng th&aacute;i mới bằng c&aacute;ch sử dụng h&agrave;m reducer v&agrave; h&agrave;nh động nhận được.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Ch&uacute;ng ta kh&ocirc;ng được ph&eacute;p thay đổi trạng th&aacute;i được lưu trữ trong cửa h&agrave;ng bằng c&aacute;ch thủ c&ocirc;ng. Thay v&agrave;o đ&oacute;, ch&uacute;ng ta phải y&ecirc;u cầu cửa h&agrave;ng thực hiện thay đổi bằng c&aacute;ch gửi một h&agrave;nh động.</li>
<li style="font-weight: 400;" aria-level="1">Để gửi h&agrave;nh động, bạn phải sử dụng h&agrave;m <code>store.dispatch(action)</code>.</li>
<li style="font-weight: 400;" aria-level="1">Gọi phương thức <code>store.dispatch()</code> sẽ y&ecirc;u cầu cửa h&agrave;ng gọi reducer để t&iacute;nh to&aacute;n trạng th&aacute;i mới. Nếu trạng th&aacute;i đ&atilde; thay đổi, giao diện người d&ugrave;ng sẽ được k&iacute;ch hoạt để cập nhật (điều n&agrave;y sẽ được thảo luận trong chương react-redux).</li>
<li style="font-weight: 400;" aria-level="1">T&oacute;m tắt c&aacute;ch thức hoạt động của Redux:</li>
<ul>
<li style="font-weight: 400;" aria-level="2">Cửa h&agrave;ng chứa trạng th&aacute;i ứng dụng v&agrave; một h&agrave;m <code>reducer</code>.</li>
<li style="font-weight: 400;" aria-level="2">Khi bạn cần thay đổi giao diện người d&ugrave;ng, bạn phải gửi một h&agrave;nh động đến cửa h&agrave;ng.</li>
<li style="font-weight: 400;" aria-level="2">Cửa h&agrave;ng sẽ t&iacute;nh to&aacute;n trạng th&aacute;i mới bằng c&aacute;ch sử dụng h&agrave;m <code>reducer</code> v&agrave; h&agrave;nh động nhận được.</li>
</ul>
</ul>
&nbsp;
Trong chương n&agrave;y, bạn đ&atilde; học về c&aacute;c kh&aacute;i niệm cốt l&otilde;i của Redux.
Trong chương tiếp theo, ch&uacute;ng ta sẽ t&igrave;m hiểu về Redux Toolkit (<code>@reduxjs/toolkit</code>), đ&acirc;y l&agrave; thư viện Redux được sử dụng trong cấu tr&uacute;c mẫu Redux của <code>create-react-app</code> (sẽ được thảo luận trong chương react-redux).
V&igrave; vậy, sau chương n&agrave;y, bạn sẽ kh&ocirc;ng cần <code>import</code> từ <code>redux</code> nữa. Đ&acirc;y l&agrave; l&yacute; do tại sao b&agrave;i tạp kh&ocirc;ng y&ecirc;u cầu bạn thực h&agrave;nh <code>{createStore}</code> from <code>"redux"</code>.
Ngo&agrave;i ra, ch&uacute;ng ta đ&atilde; bỏ qua phương thức <code>store.subscribe()</code> l&agrave; do c&aacute;ch sử dụng n&oacute; sẽ ho&agrave;n to&agrave;n kh&aacute;c khi l&agrave;m việc với Redux trong một ứng dụng React!
<h2 style="text-align: justify;">C&ocirc;ng cụ ph&aacute;t triển Redux</h2>
Nếu bạn th&iacute;ch sử dụng Redux v&agrave; c&oacute; kế hoạch sử dụng n&oacute; trong tương lai, bạn c&oacute; thể c&agrave;i đặt extension Redux dev tools cho tr&igrave;nh duyệt.
V&igrave; trạng th&aacute;i được cập nhật theo c&aacute;ch dễ dự đo&aacute;n (v&agrave; kh&ocirc;ng thể sửa đổi) bằng c&aacute;c h&agrave;nh động được gửi, extension n&agrave;y c&oacute; thể cung cấp t&iacute;nh năng th&uacute; vị gọi l&agrave; "Time Travel" cho ph&eacute;p bạn h&igrave;nh dung trạng th&aacute;i ứng dụng tại mọi thời điểm (sau mỗi h&agrave;nh động gửi đi)!

Thực hiện dispatch một action