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

H&atilde;y xem x&eacute;t component <code>&lt;Button /&gt;</code> m&agrave; ch&uacute;ng ta đ&atilde; định nghĩa trong Dự &aacute;n I.
<pre class="language-js" data-content="export%20default%20function%20Button(props)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cbutton%20className%3D%22ui-button%22%20type%3D%7Bprops.type%7D%20disabled%3D%7Bprops.disabled%7D%3E%7Bprops.children%7D%3C%2Fbutton%3E%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>export default function Button(props) {
 return &lt;button className="ui-button" type={props.type} disabled={props.disabled}&gt;{props.children}&lt;/button&gt;;
}</code></pre>
Tạo file <code>Button.js</code> trong thư mục <code>src/</code>. Tiếp theo, tạo file <code>Button.test.js</code> trong thư mục đ&oacute;. Lời khuy&ecirc;n l&agrave; h&atilde;y tạo file kiểm thử trong c&ugrave;ng thư mục với component cần kiểm thử. Một trong những lợi &iacute;ch của việc n&agrave;y l&agrave; c&acirc;u lệnh <code>import</code> sẽ được đơn giản h&oacute;a. L&yacute; do sẽ được giải th&iacute;ch chi tiết trong b&agrave;i học n&agrave;y.
C&oacute; nhiều kh&iacute;a cạnh của component m&agrave; ch&uacute;ng ta c&oacute; thể kiểm thử. Ở đ&acirc;y ch&uacute;ng ta sẽ tập trung v&agrave;o hai kh&iacute;a cạnh:
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Khi hiển thị <code>&lt;Button /&gt;</code>, component n&ecirc;n hiển thị một phần tử <code>button</code> với lớp <code>ui-button</code>.</li>
<li style="font-weight: 400;" aria-level="1">Khi hiển thị <code>&lt;Button disabled /&gt;</code>, component n&ecirc;n hiển thị một phần tử <code>button</code> với thuộc t&iacute;nh <code>disabled</code> được thiết lập.</li>
</ol>
<h3 style="text-align: justify;">Kiểm thử từ b&ecirc;n ngo&agrave;i</h3>
Mặc d&ugrave; component n&agrave;y kh&ocirc;ng c&oacute; trạng th&aacute;i, một thực h&agrave;nh tốt l&agrave; kiểm thử n&oacute; từ b&ecirc;n ngo&agrave;i. Mục ti&ecirc;u của bạn kh&ocirc;ng phải l&agrave; kiểm thử n&oacute; b&ecirc;n trong. Bạn kh&ocirc;ng cần biết hoặc quan t&acirc;m đến c&aacute;ch trạng th&aacute;i hoặc logic hoạt động b&ecirc;n trong component. Bạn n&ecirc;n cố gắng kiểm tra c&aacute;c giao tiếp của component với b&ecirc;n ngo&agrave;i. V&iacute; dụ: khi hiển thị component <code>&lt;Button&gt;Login&lt;/Button&gt;</code>, ta mong đợi thấy phần tử <code>&lt;button className="ui-button"&gt;Login&lt;/button&gt;</code>.
<h2 style="text-align: justify;">npm test</h2>
Khi bạn đang viết file kiểm thử, bạn c&oacute; thể chạy <code>npm test</code> v&agrave; <code>jest</code> sẽ tự động chạy lại file kiểm thử khi bạn thay đổi n&oacute;.
<h2 style="text-align: justify;">Button.test.js</h2>
Trong <code>Button.test.js</code>, ch&uacute;ng ta cần th&ecirc;m component <code>Button</code> cũng như c&aacute;c phương thức <code>screen</code> v&agrave; <code>render</code>:
<pre class="language-js" data-content="import%20%7B%20render%2C%20screen%20%7D%20from%20%22%40testing-library%2Freact%22%3B%0Aimport%20Button%20from%20%22.%2FButton.js%22%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import { render, screen } from "@testing-library/react";
import Button from "./Button.js";</code></pre>
<h3 style="text-align: justify;">Kiểm thử đầu ti&ecirc;n</h3>
Tiếp theo, ch&uacute;ng ta sẽ tạo kiểm thử đầu ti&ecirc;n:
<pre class="language-js" data-content="it(%22should%20render%20a%20button%20element%20with%20a%20'ui-button'%20class%22%2C%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0render(%3CButton%20%2F%3E)%3B%0A%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>it("should render a button element with a 'ui-button' class", () =&gt; {
 render(&lt;Button /&gt;);

});</code></pre>
Sau khi hiển thị <code>&lt;Button /&gt;</code>, ch&uacute;ng ta cần t&igrave;m phần tử <code>button</code>. Ch&uacute;ng ta c&oacute; thể sử dụng phương thức <code>screen.getByRole</code>:
<pre class="language-js" data-content="const%20buttonElement%20%3D%20screen.getByRole(%22button%22)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const buttonElement = screen.getByRole("button");</code></pre>
Sau đ&oacute;, ch&uacute;ng ta cần x&aacute;c minh rằng <code>buttonElement</code> đ&atilde; được t&igrave;m thấy bằng c&aacute;ch sử dụng:
<pre class="language-js" data-content="expect(buttonElement).toBeInTheDocument()%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>expect(buttonElement).toBeInTheDocument();</code></pre>
v&agrave; kiểm tra xem lớp <code>ui-button</code> c&oacute; được t&igrave;m thấy trong <code>classList</code> của phần tử hay kh&ocirc;ng.
<pre class="language-js" data-content="expect(buttonElement.classList.contains(%22ui-button%22)).toBe(true)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>expect(buttonElement.classList.contains("ui-button")).toBe(true);</code></pre>
Hoặc bạn c&oacute; thể kiểm tra thuộc t&iacute;nh <code>className</code> (chuỗi).
Kết hợp tất cả lại:
<pre class="language-js" data-content="import%20%7B%20render%2C%20screen%20%7D%20from%20%22%40testing-library%2Freact%22%3B%0Aimport%20Button%20from%20%22.%2FButton.js%22%3B%0A%0Ait(%22should%20render%20a%20button%20element%20with%20a%20'ui-button'%20class%22%2C%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0render(%3CButton%20%2F%3E)%3B%0A%C2%A0%C2%A0const%20buttonElement%20%3D%20screen.getByRole(%22button%22)%3B%0A%C2%A0%C2%A0expect(buttonElement).toBeInTheDocument()%3B%0A%C2%A0%C2%A0expect(buttonElement.classList.contains(%22ui-button%22)).toBe(true)%3B%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import { render, screen } from "@testing-library/react";
import Button from "./Button.js";

it("should render a button element with a 'ui-button' class", () =&gt; {
 render(&lt;Button /&gt;);
 const buttonElement = screen.getByRole("button");
 expect(buttonElement).toBeInTheDocument();
 expect(buttonElement.classList.contains("ui-button")).toBe(true);
});</code></pre>
<h3 style="text-align: justify;">Kiểm thử thứ hai</h3>
Đối với kiểm thử thứ hai, ch&uacute;ng ta sẽ th&ecirc;m <code>it("...", callback)</code>:
<pre class="language-js" data-content="it(%22should%20have%20a%20disabled%20attribute%20when%20it%20receives%20a%20disabled%20prop%22%2C%20()%20%3D%3E%20%7B%0A%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>it("should have a disabled attribute when it receives a disabled prop", () =&gt; {

});</code></pre>
Trong đ&oacute;, ch&uacute;ng ta cần hiển thị component <code>Button</code> với trường thuộc t&iacute;nh <code>disabled</code>:
<pre class="language-js" data-content="render(%3CButton%20disabled%20%2F%3E)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>render(&lt;Button disabled /&gt;);</code></pre>
Sau đ&oacute;, ch&uacute;ng ta sẽ t&igrave;m phần tử <code>button</code> như ch&uacute;ng ta đ&atilde; l&agrave;m trước đ&oacute; v&agrave; x&aacute;c minh rằng n&oacute; c&oacute; trường thuộc t&iacute;nh <code>disabled</code> được thiết lập th&agrave;nh <code>true</code>:
<pre class="language-js" data-content="const%20buttonElement%20%3D%20screen.getByRole(%22button%22)%3B%0Aexpect(buttonElement.disabled).toBe(true)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const buttonElement = screen.getByRole("button");
expect(buttonElement.disabled).toBe(true);</code></pre>
<code>.toBe()</code> l&agrave; một c&acirc;u lệnh x&aacute;c minh được cung cấp bởi <code>jest</code>.
Kết hợp tất cả lại, bạn sẽ c&oacute; code sau trong <code>Button.test.js</code>:
<pre class="language-js" data-content="import%20%7B%20render%2C%20screen%20%7D%20from%20%22%40testing-library%2Freact%22%3B%0Aimport%20Button%20from%20%22.%2FButton.js%22%3B%0A%0Ait(%22should%20render%20a%20button%20element%20with%20a%20'ui-button'%20class%22%2C%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0render(%3CButton%20%2F%3E)%3B%0A%C2%A0%C2%A0const%20buttonElement%20%3D%20screen.getByRole(%22button%22)%3B%0A%C2%A0%C2%A0expect(buttonElement).toBeInTheDocument()%3B%0A%C2%A0%C2%A0expect(buttonElement.classList.contains(%22ui-button%22)).toBe(true)%3B%0A%7D)%3B%0A%0Ait(%22should%20have%20a%20disabled%20attribute%20when%20it%20receives%20a%20disabled%20prop%22%2C%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0render(%3CButton%20disabled%20%2F%3E)%3B%0A%C2%A0%C2%A0const%20buttonElement%20%3D%20screen.getByRole(%22button%22)%3B%0A%C2%A0%C2%A0expect(buttonElement.disabled).toBe(true)%3B%0A%7D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import { render, screen } from "@testing-library/react";
import Button from "./Button.js";

it("should render a button element with a 'ui-button' class", () =&gt; {
 render(&lt;Button /&gt;);
 const buttonElement = screen.getByRole("button");
 expect(buttonElement).toBeInTheDocument();
 expect(buttonElement.classList.contains("ui-button")).toBe(true);
});

it("should have a disabled attribute when it receives a disabled prop", () =&gt; {
 render(&lt;Button disabled /&gt;);
 const buttonElement = screen.getByRole("button");
 expect(buttonElement.disabled).toBe(true);
});</code></pre>
Bạn sẽ cần mất một thời gian để quen với tất cả c&aacute;c c&acirc;u lệnh x&aacute;c minh cơ bản. Tuy nhi&ecirc;n, h&atilde;y nhớ rằng điều quan trọng kh&ocirc;ng phải l&agrave; ghi nhớ ch&uacute;ng m&agrave; l&agrave; biết nơi t&igrave;m kiếm ch&uacute;ng.
Kiểm thử component React được thực hiện với <code>jest</code> v&agrave; <code>react-testing-library</code>.&nbsp;
Để t&igrave;m hiểu chi tiết hơn về chủ đề n&agrave;y, bạn c&oacute; thể xem li&ecirc;n kết sau:
<a href="https://create-react-app.dev/docs/running-tests">create-react-app.dev/docs/running-tests</a>.
Ngo&agrave;i ra bạn cũng n&ecirc;n xem qua t&agrave;i liệu về <a href="https://jestjs.io/docs/getting-started">jest</a> v&agrave; <a href="https://testing-library.com/docs/react-testing-library/intro/">react-testing-library</a>.
Khi đọc c&aacute;c trang t&agrave;i liệu n&agrave;y, bạn kh&ocirc;ng cần l&agrave;m theo hướng dẫn c&agrave;i đặt v&igrave; ch&uacute;ng đ&atilde; được thiết lập sẵn bởi <code>create-react-app</code>.

Tạo kiểm thử đầu tiên