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 chương n&agrave;y, ch&uacute;ng ta sẽ t&igrave;m hiểu c&aacute;ch cập nhật trạng th&aacute;i v&agrave; c&aacute;ch React &amp; ReactDOM tự động cập nhật lại Component v&agrave; hiển thị c&aacute;c cập nhật tr&ecirc;n tr&igrave;nh duyệt.
<h2 style="text-align: justify;">Giới thiệu nhanh về Sự kiện</h2>
Kh&oacute;a học n&agrave;y c&oacute; một số chương d&agrave;nh ri&ecirc;ng cho sự kiện trong React.
Tuy nhi&ecirc;n, hiện tại b&acirc;y giờ <a href="https://tek4.vn/">Tek4</a> chỉ muốn giới thiệu nhanh về Sự kiện cơ bản nhất m&agrave; bạn c&oacute; thể thực hiện trong React để cập nhật trạng th&aacute;i khi người d&ugrave;ng nhấp chuột v&agrave;o n&uacute;t <code>&lt;button&gt;</code>.
V&igrave; vậy trong dự &aacute;n n&agrave;y, ch&uacute;ng ta chỉ l&agrave;m việc với sự kiện nhấp tr&ecirc;n phần tử <code>&lt;button&gt;</code>.
Để th&ecirc;m một sự kiện nhấp v&agrave;o <code>&lt;button&gt;</code>, ch&uacute;ng ta phải th&ecirc;m thuộc t&iacute;nh <code>onClick</code> (viết hoa chữ c&aacute;i đầu) v&agrave; g&aacute;n n&oacute; cho h&agrave;m mũi t&ecirc;n: <code>() =&gt;</code>
<pre class="language-js" data-content="function%20Welcome()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cbutton%20onClick%3D%7B()%20%3D%3E%20console.log(%22button%20was%20clicked%22)%7D%3EClick%20me%3C%2Fbutton%3E%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function Welcome() {
 return &lt;button onClick={() =&gt; console.log("button was clicked")}&gt;Click me&lt;/button&gt;
}</code></pre>
Đoạn lệnh tr&ecirc;n sẽ in ra <code>button was clicked</code> mỗi khi bạn nhấp chuột v&agrave;o n&uacute;t.
H&atilde;y ph&acirc;n t&iacute;ch c&uacute; ph&aacute;p <code>onClick={() =&gt; console.log("button was clicked")}</code>:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>onClick={}</code> thuộc t&iacute;nh JSX với một biểu thức động.</li>
<li style="font-weight: 400;" aria-level="1"><code>onClick</code> th&ecirc;m một tr&igrave;nh lắng nghe sự kiện</li>
<li style="font-weight: 400;" aria-level="1"><code>() =&gt; console.log("button was clicked")</code> l&agrave; một h&agrave;m mũi t&ecirc;n. V&igrave; phần th&acirc;n của h&agrave;m mũi t&ecirc;n chỉ c&oacute; 1 d&ograve;ng, ch&uacute;ng ta c&oacute; thể bỏ qua <code>{}</code>. Bạn cũng c&oacute; thể viết: <code>() =&gt; {console.log("button was clicked")}</code></li>
</ul>
<h2 style="text-align: justify;">Thay đổi trạng th&aacute;i</h2>
Trạng th&aacute;i l&agrave; một biến m&agrave; ch&uacute;ng ta c&oacute; thể cập nhật v&agrave;o thời điểm n&agrave;o đ&oacute; trong tương lai.
V&iacute; dụ, khi người d&ugrave;ng nhấp v&agrave;o n&uacute;t hoặc khi bạn nhận dữ liệu từ API.
Hiện tại, ch&uacute;ng ta sẽ tiếp tục với một v&iacute; dụ đơn giản để hiểu r&otilde; hơn về c&aacute;c kh&aacute;i niệm cụ thể m&agrave; bạn đang học.
Trong chương n&agrave;y, ch&uacute;ng ta sẽ cập nhật trạng th&aacute;i khi n&uacute;t được nhấp.
Để cập nhật trạng th&aacute;i, bạn lu&ocirc;n phải sử dụng h&agrave;m 'set' nhận được từ useState.
V&igrave; vậy nếu ta tạo một trạng th&aacute;i gọi l&agrave; <code>seconds</code> th&igrave; ta sẽ sử dụng h&agrave;m <code>setSeconds(newValue)</code> đ&atilde; được destructure. H&atilde;y sử dụng Component <code>Stopwatch</code> giống như trước đ&acirc;y:
<pre class="language-js" data-content="import%20%7BuseState%7D%20from%20%22react%22%3B%0A%0Afunction%20Stopwatch()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20hooks%20have%20to%20be%20at%20the%20top%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20%5Bseconds%2C%20setSeconds%5D%20%3D%20useState(0)%3B%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%3Ch2%3E%7Bseconds%7D%3C%2Fh2%3E%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7B%2F*%20increment%20seconds%20state%20by%201%2C%20when%20you%20click%20on%20the%20button*%2F%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%3Cbutton%20onClick%3D%7B()%20%3D%3E%20setSeconds(seconds%20%2B%201)%7D%3EClick%20to%20add%201%3C%2Fbutton%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 Stopwatch() {
 // hooks have to be at the top
 const [seconds, setSeconds] = useState(0);

 return (&lt;&gt;
 &lt;h2&gt;{seconds}&lt;/h2&gt;
 {/* increment seconds state by 1, when you click on the button*/}
 &lt;button onClick={() =&gt; setSeconds(seconds + 1)}&gt;Click to add 1&lt;/button&gt;
 &lt;/&gt;);
}</code></pre>
Đoạn code cập nhật trạng th&aacute;i bằng c&aacute;ch gọi setSeconds() v&agrave; truyền v&agrave;o đ&oacute; gi&aacute; trị mới của trạng th&aacute;i.
Gi&aacute; trị mới của trạng th&aacute;i l&agrave; <code>seconds + 1</code>, tương đương với: gi&aacute; trị hiện tại + 1.
Điều đ&oacute; xảy ra l&agrave; v&igrave; <code>seconds</code> lưu giữ gi&aacute; trị hiện tại của trạng th&aacute;i, v&igrave; vậy <code>seconds + 1</code> sẽ tăng gi&aacute; trị đ&oacute; l&ecirc;n 1.
C&oacute; một c&aacute;ch hiệu quả hơn để cập nhật trạng th&aacute;i trong v&iacute; dụ n&agrave;y, nhưng phương ph&aacute;p đ&oacute; sẽ được thảo luận trong chương 32 (Cập nhật trạng th&aacute;i bằng hàm).
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1"><code>onClick={() =&gt; console.log("Hello World")}</code> l&agrave; một sự kiện nhấp hoạt động tr&ecirc;n <code>&lt;button&gt;</code> v&agrave; in ra "Hello World"</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Bạn lu&ocirc;n phải sử dụng h&agrave;m 'set' nhận được từ useState (v&iacute; dụ: setSeconds, setCount)</li>
</ul>