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

Khi bạn mở file <code>src/App.test.js</code>, bạn sẽ thấy đoạn code sau:
<pre class="language-js" data-content="import%20%7B%20render%2C%20screen%20%7D%20from%20'%40testing-library%2Freact'%3B%0Aimport%20App%20from%20'.%2FApp'%3B%0A%0Atest('renders%20learn%20react%20link'%2C%20()%20%3D%3E%20%7B%0A%C2%A0%C2%A0render(%3CApp%20%2F%3E)%3B%0A%C2%A0%C2%A0const%20linkElement%20%3D%20screen.getByText(%2Flearn%20react%2Fi)%3B%0A%C2%A0%C2%A0expect(linkElement).toBeInTheDocument()%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 App from './App';

test('renders learn react link', () =&gt; {
 render(&lt;App /&gt;);
 const linkElement = screen.getByText(/learn react/i);
 expect(linkElement).toBeInTheDocument();
});</code></pre>
H&atilde;y c&ugrave;ng ph&acirc;n t&iacute;ch chương tr&igrave;nh.
<h2 style="text-align: justify;">Mục ti&ecirc;u</h2>
File kiểm thử n&agrave;y được sử dụng để kiểm thử component <code>&lt;App /&gt;</code>. Ch&uacute;ng ta kiểm tra xem n&oacute; c&oacute; hiển thị văn bản <code>learn react</code> trong nội dung hay kh&ocirc;ng.
<h2 style="text-align: justify;">Ph&acirc;n t&iacute;ch code</h2>
Ch&uacute;ng ta bắt đầu bằng việc th&ecirc;m component cần kiểm thử: <code>import App from './App';</code>.
<h3 style="text-align: justify;">Tạo kiểm thử:</h3>
Sau đ&oacute;, ch&uacute;ng ta tạo kiểm thử đầu ti&ecirc;n bằng c&aacute;ch sử dụng h&agrave;m <code>test(description, callback)</code>. H&agrave;m <code>test()</code> được cung cấp bởi <code>jest</code>.
<pre class="language-js" data-content="test('renders%20learn%20react%20link'%2C%20()%20%3D%3E%20%7B%20...%20%7D)" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>test('renders learn react link', () =&gt; { ... })</code></pre>
tạo một kiểm thử với nội dung m&ocirc; tả <code>renders learn react link</code>. Khi kiểm thử thất bại hoặc th&agrave;nh c&ocirc;ng, bạn sẽ thấy dấu ☑️ hoặc ❌ b&ecirc;n cạnh m&ocirc; tả. Bạn n&ecirc;n cung cấp c&aacute;c nội dung m&ocirc; tả c&oacute; &yacute; nghĩa, đặc biệt khi bạn c&oacute; h&agrave;ng chục v&agrave; h&agrave;ng trăm kiểm thử.
<h3 style="text-align: justify;">Hiển thị component:</h3>
Sau đ&oacute;, trong h&agrave;m callback của kiểm thử n&agrave;y, ch&uacute;ng ta hiển thị component <code>&lt;App /&gt;</code> với code sau:
<pre class="language-js" data-content="render(%3CApp%20%2F%3E)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>render(&lt;App /&gt;);</code></pre>
Ngo&agrave;i ra ta cũng c&oacute; thể hiển thị c&aacute;c prop. V&iacute; dụ:
<pre class="language-js" data-content="render(%3CApp%20%2F%3E)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>render(&lt;App /&gt;);</code></pre>
Phương thức <code>render</code> được cung cấp bởi <code>react-testing-library</code>. V&igrave; vậy, ch&uacute;ng ta phải th&ecirc;m n&oacute; từ <code>@testing-library/react</code>.
<h3 style="text-align: justify;">T&igrave;m kiếm chuỗi:</h3>
Sau đ&oacute;, ch&uacute;ng ta sử dụng h&agrave;m <code>screen.getByText()</code> để t&igrave;m kiếm chuỗi learn react tr&ecirc;n trang m&agrave; ch&uacute;ng ta đ&atilde; hiển thị <code>&lt;App /&gt;</code>.
<code>screen.getByText()</code> nhận một chuỗi hoặc biểu thức ch&iacute;nh quy. Trong v&iacute; dụ n&agrave;y, ch&uacute;ng ta truyền biểu thức ch&iacute;nh quy <code>/learn react/i</code>, n&oacute; sẽ t&igrave;m kiếm chuỗi <code>learn react</code> m&agrave; kh&ocirc;ng ph&acirc;n biệt chữ hoa chữ thường. V&igrave; vậy, chuỗi <code>Learn REACT</code> cũng hợp lệ.
Đối tượng <code>screen</code> được cung cấp bởi <code>react-testing-library</code>. V&igrave; vậy, để th&ecirc;m <code>render</code> v&agrave; <code>screen</code>, bạn cần viết c&acirc;u lệnh import sau: <code>import { render, screen } from '@testing-library/react';</code>.
<h3 style="text-align: justify;">Kiểm tra kết quả:</h3>
Bước cuối c&ugrave;ng l&agrave; kiểm tra xem văn bản c&oacute; được t&igrave;m thấy trong component đ&atilde; hiển thị hay kh&ocirc;ng.
Đ&acirc;y l&agrave; l&uacute;c ch&uacute;ng ta sử dụng <code>expect(linkElement).toBeInTheDocument();</code>.
H&agrave;m <code>expect()</code> được cung cấp bởi <code>jest</code>. H&agrave;m <code>toBeInTheDocument()</code> được cung cấp bởi <code>react-testing-library</code>.
<h2 style="text-align: justify;">react-testing-library</h2>
<code>Jest</code> cung cấp một số c&acirc;u lệnh x&aacute;c minh (assertion) cơ bản. Tuy nhi&ecirc;n, đ&ocirc;i khi ch&uacute;ng l&agrave; kh&ocirc;ng đủ để kiểm thử một ứng dụng React. <code>react-testing-library</code> bổ sung cho <code>jest</code> bằng c&aacute;ch cung cấp những c&acirc;u lệnh x&aacute;c minh mới như <code>toBeInTheDocument</code>

Cú pháp kiểm thử cơ bản