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 l&agrave;m việc với Class component, việc xử l&yacute; sự kiện trở n&ecirc;n phức tạp hơn một ch&uacute;t do ngữ cảnh của từ kh&oacute;a <code>this</code>.
H&atilde;y bắt đầu bằng một v&iacute; dụ viết lại tr&igrave;nh xử l&yacute; <code>onClick</code> từ functional component th&agrave;nh class component:
<pre class="language-js" data-content="function%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0function%20handleButtonClick()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Button%20clicked%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cbutton%20onClick%3D%7BhandleButtonClick%7D%3EAdd%201%3C%2Fbutton%3E%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function App() {
 function handleButtonClick() {
 console.log("Button clicked");
 }

 return &lt;button onClick={handleButtonClick}&gt;Add 1&lt;/button&gt;;
}</code></pre>
Ch&uacute;ng ta c&oacute; thể viết lại n&oacute; th&agrave;nh một Class component:
<pre class="language-js" data-content="function%20App()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0function%20handleButtonClick()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Button%20clicked%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cbutton%20onClick%3D%7BhandleButtonClick%7D%3EAdd%201%3C%2Fbutton%3E%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function App() {
 function handleButtonClick() {
 console.log("Button clicked");
 }

 return &lt;button onClick={handleButtonClick}&gt;Add 1&lt;/button&gt;;
}</code></pre>
Ch&uacute;ng ta đ&atilde; tạo một phương thức thực thể l&agrave; <code>handleButtonClick</code> v&agrave; sau đ&oacute; thay đổi <code>onClick={handleButtonClick}</code> th&agrave;nh <code>onClick={this.handleButtonClick}</code>.
Đoạn code tr&ecirc;n hoạt động; tuy nhi&ecirc;n, nếu bạn cố gắng gọi <code>this.setState()</code> b&ecirc;n trong <code>handleButtonClick</code>, bạn sẽ nhận được một lỗi th&ocirc;ng b&aacute;o rằng <code>setState</code> kh&ocirc;ng tồn tại tr&ecirc;n <code>undefined</code>.
V&igrave; vậy, ngay cả khi bạn cố gắng truy cập v&agrave;o <code>this.props</code>, bạn sẽ nhận được một lỗi cho biết <code>props</code> kh&ocirc;ng tồn tại tr&ecirc;n <code>undefined</code>.
Điều n&agrave;y xảy ra v&igrave; từ kh&oacute;a <code>this</code> b&ecirc;n trong <code>handleButtonClick</code> kh&ocirc;ng trỏ đến thực thể hiện tại của lớp nữa. Thay v&agrave;o đ&oacute;, n&oacute; c&oacute; gi&aacute; trị l&agrave; <code>undefined</code>.
Điều n&agrave;y xảy ra do c&aacute;ch ngữ cảnh <code>this</code> hoạt động trong JavaScript. Cụ thể, trong React, React gọi h&agrave;m <code>handleButtonClick</code> từ b&ecirc;n ngo&agrave;i lớp (khi người d&ugrave;ng nhấp v&agrave;o n&uacute;t) n&ecirc;n ngữ cảnh của <code>this</code> bị mất điều khiển, do đ&oacute; <code>this</code> c&oacute; gi&aacute; trị l&agrave; <code>undefined</code>.
C&oacute; một số c&aacute;ch để khắc phục vấn đề n&agrave;y. <a href="https://tek4.vn/">Tek4</a> sẽ tập trung v&agrave;o hai phương ph&aacute;p ch&iacute;nh m&agrave; bạn c&oacute; thể sử dụng:
<h2 style="text-align: justify;">1. R&agrave;ng buộc this trong constructor</h2>
Để khắc phục vấn đề n&agrave;y, bạn c&oacute; thể ghi đ&egrave; <code>constructor</code> v&agrave; sau đ&oacute; r&agrave;ng buộc (bind) <code>this</code> với tr&igrave;nh xử l&yacute; sự kiện m&agrave; bạn đ&atilde; tạo:
<pre class="language-js" data-content="import%20React%20from%20%22react%22%3B%0A%0Aclass%20App%20extends%20React.Component%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0constructor(props)%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0super(props)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20bind%20this%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0this.handleButtonClick%20%3D%20this.handleButtonClick.bind(this)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0handleButtonClick()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Button%20clicked%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0render()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cbutton%20onClick%3D%7Bthis.handleButtonClick%7D%3EAdd%201%3C%2Fbutton%3E%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import React from "react";

class App extends React.Component {
 constructor(props) {
 super(props);
 // bind this
 this.handleButtonClick = this.handleButtonClick.bind(this);
 }

 handleButtonClick() {
 console.log("Button clicked");
 }

 render() {
 return &lt;button onClick={this.handleButtonClick}&gt;Add 1&lt;/button&gt;;
 }
}</code></pre>
<code>.bind(this)</code> đang truyền ngữ cảnh hiện tại của lớp (thực thể hiện tại) cho <code>handleButtonClick</code> để ngữ cảnh kh&ocirc;ng bị mất điều khiển khi React gọi tr&igrave;nh xử l&yacute; sự kiện.
Ưu điểm của phương ph&aacute;p n&agrave;y l&agrave; nếu bạn c&oacute; nhiều <code>onClick={this.handleButtonClick}</code>, tất cả đều hoạt động v&igrave; <code>handleButtonClick</code> sẽ nhận gi&aacute; trị <code>this</code> ch&iacute;nh x&aacute;c.
Nhược điểm l&agrave; code hơi d&agrave;i d&ograve;ng, đặc biệt khi bạn c&oacute; nhiều tr&igrave;nh xử l&yacute; sự kiện. Bạn cũng buộc phải ghi đ&egrave; <code>constructor</code>, điều n&agrave;y c&oacute; nghĩa l&agrave; bạn phải nhớ nhận <code>props</code> l&agrave;m đối số v&agrave; sau đ&oacute; gọi super(props).
Bạn cũng c&oacute; thể viết lại phương ph&aacute;p n&agrave;y bằng c&uacute; ph&aacute;p mới. Tuy nhi&ecirc;n, cho d&ugrave; sử dụng c&aacute;ch l&agrave;m th&igrave; code vẫn hơi kh&oacute; đọc:
<pre class="language-js" data-content="import%20React%20from%20%22react%22%3B%0A%0Aclass%20App%20extends%20React.Component%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20bind%20this%0A%C2%A0%C2%A0%C2%A0%C2%A0handleButtonClick%20%3D%20this.handleButtonClick.bind(this)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0handleButtonClick()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Button%20clicked%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0render()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cbutton%20onClick%3D%7Bthis.handleButtonClick%7D%3EAdd%201%3C%2Fbutton%3E%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import React from "react";

class App extends React.Component {
 // bind this
 handleButtonClick = this.handleButtonClick.bind(this);

 handleButtonClick() {
 console.log("Button clicked");
 }

 render() {
 return &lt;button onClick={this.handleButtonClick}&gt;Add 1&lt;/button&gt;;
 }
}</code></pre>
<h2 style="text-align: justify;">2. Sử dụng arrow function (phạm vi từ vựng)</h2>
Một phương ph&aacute;p kh&aacute;c l&agrave; sử dụng arrow function (h&agrave;m mũi t&ecirc;n) v&igrave; ch&uacute;ng c&oacute; phạm vi từ vựng. Điều n&agrave;y c&oacute; nghĩa l&agrave; ch&uacute;ng kh&ocirc;ng c&oacute; gi&aacute; trị <code>this</code> ri&ecirc;ng, thay v&agrave;o đ&oacute;, ch&uacute;ng duy tr&igrave; c&ugrave;ng một gi&aacute; trị <code>this</code>.
<pre class="language-js" data-content="import%20React%20from%20%22react%22%3B%0A%0Aclass%20App%20extends%20React.Component%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20bind%20this%0A%C2%A0%C2%A0%C2%A0%C2%A0handleButtonClick%20%3D%20this.handleButtonClick.bind(this)%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0handleButtonClick()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0console.log(%22Button%20clicked%22)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0render()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cbutton%20onClick%3D%7Bthis.handleButtonClick%7D%3EAdd%201%3C%2Fbutton%3E%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import React from "react";

class App extends React.Component {
 // bind this
 handleButtonClick = this.handleButtonClick.bind(this);

 handleButtonClick() {
 console.log("Button clicked");
 }

 render() {
 return &lt;button onClick={this.handleButtonClick}&gt;Add 1&lt;/button&gt;;
 }
}</code></pre>
Ch&uacute; &yacute; ta sử dụng <code>() =&gt; this.handleButtonClick()</code> thay v&igrave; <code>this.handleButtonClick</code>.
Đừng qu&ecirc;n dấu <code>()</code> sau <code>handleButtonClick</code>; nguy&ecirc;n nh&acirc;n l&agrave; v&igrave; ch&uacute;ng ta đang truyền một định nghĩa h&agrave;m. V&igrave; vậy, b&ecirc;n trong định nghĩa h&agrave;m n&agrave;y, bạn phải gọi <code>handleButtonClick()</code>.
Ưu điểm của kỹ thuật n&agrave;y l&agrave; n&oacute; ngắn gọn v&agrave; dễ sử dụng. Bạn kh&ocirc;ng cần ghi đ&egrave; <code>constructor</code>.
Nhược điểm l&agrave; nếu bạn c&oacute; nhiều <code>onClick={this.handleButtonClick}</code>, bạn cần cập nhật tất cả ch&uacute;ng th&agrave;nh <code>onClick={() =&gt; this.handleButtonClick()}</code>.
T&oacute;m lại, đ&acirc;y l&agrave; v&iacute; dụ minh họa một trong những l&yacute; do khiến React chuyển sang sử dụng functional component với hook. Kh&aacute;i niệm <code>this</code> c&oacute; thể g&acirc;y kh&oacute; khăn v&agrave; nhầm lẫn cho&nbsp; nhiều nh&agrave; ph&aacute;t triển. Nhưng như bạn đ&atilde; thấy, với hook, ch&uacute;ng ta sẽ kh&ocirc;ng bao giờ gặp vấn đề n&agrave;y.
Trong b&agrave;i tập tiếp theo, bạn sẽ thấy rằng component được viết bằng hook nhỏ gọn hơn nhiều so với component được viết bằng lớp.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Để sử dụng <code>this</code> trong tr&igrave;nh xử l&yacute; sự kiện (v&iacute; dụ: <code>this.setState</code> hoặc <code>this.props</code>), bạn phải:</li>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="2">r&agrave;ng buộc gi&aacute; trị của <code>this</code> trong constructor&nbsp;</li>
<li style="font-weight: 400; text-align: justify;" aria-level="2">hoặc sử dụng một h&agrave;m mũi t&ecirc;n để duy tr&igrave; phạm vi từ vựng.</li>
</ul>
</ul>

Events