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

Để c&agrave;i đặt g&oacute;i react v&agrave;o dự &aacute;n, bạn cần c&agrave;i đặt bằng tr&igrave;nh quản l&yacute; g&oacute;i (npm hoặc yarn).
Ch&uacute;ng ta sẽ sử dụng Tr&igrave;nh quản l&yacute; G&oacute;i Node (npm) trong suốt kh&oacute;a học n&agrave;y.
<pre class="language-c" data-content="npm%20install%20react" data-language="c" data-ace-language="c_cpp" data-name-language="C" data-main-file="main.c"><code>npm install react</code></pre>
Trong kh&oacute;a học n&agrave;y, tất cả c&aacute;c g&oacute;i bạn cần đ&atilde; được c&agrave;i đặt sẵn, v&igrave; vậy bạn chỉ cần import (th&ecirc;m) g&oacute;i v&agrave;o file JavaScript.
Nếu bạn muốn thiết lập một dự &aacute;n React cục bộ tr&ecirc;n m&aacute;y t&iacute;nh th&igrave; h&atilde;y sử dụng Vite.
<a href="https://tek4.vn/">TEK4.VN</a> sẽ giới thiệu c&ocirc;ng cụ n&agrave;y trong chương ph&iacute;a sau. <a href="https://tek4.vn/">TEK4.VN</a> sẽ bắt đầu bằng phần giải th&iacute;ch c&aacute;c kh&aacute;i niệm từng bước để đảm bảo bạn hiểu React một c&aacute;ch đầy đủ. Gi&uacute;p bạn dễ d&agrave;ng nắm bắt những kh&aacute;i niệm phức tạp hơn. Tuy nhi&ecirc;n, bạn sẽ cần phải ki&ecirc;n nhẫn v&agrave; ki&ecirc;n tr&igrave; học tập để đạt được hiệu quả cuối c&ugrave;ng!
<h2 style="text-align: justify;">Th&ecirc;m React v&agrave;o file JavaScript</h2>
React kh&ocirc;ng phải l&agrave; một phần của tr&igrave;nh duyệt, v&igrave; vậy bạn phải th&ecirc;m React v&agrave;o c&aacute;c file JavaScript cần sử dụng. Mỗi file JavaScript l&agrave; một m&ocirc;-đun độc lập, đ&oacute; l&agrave; c&aacute;c biến v&agrave; h&agrave;m v&agrave; việc import trong một file/m&ocirc;-đun kh&ocirc;ng ảnh hưởng đến c&aacute;c file/m&ocirc;-đun kh&aacute;c.
Dưới đ&acirc;y l&agrave; c&aacute;ch th&ecirc;m React (sau khi đ&atilde; c&agrave;i đặt React):
<pre class="language-js" data-content="import%20React%20from%20%22react%22%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>import React from "react";</code></pre>
Đ&acirc;y được gọi l&agrave; default import v&igrave; dạng n&agrave;y tu&acirc;n theo c&uacute; ph&aacute;p sau: <code>import Something from "package-name"</code>.
<code>Named export</code> được th&ecirc;m v&agrave;o như sau: <code>import {Something} from "package-name"</code>.
Để &yacute; đoạn code tr&ecirc;n th&ecirc;m React v&agrave;o file JavaScript từ <code>"react"</code>.&nbsp;
Đ&acirc;y được gọi l&agrave; bare import v&igrave; bạn kh&ocirc;ng th&ecirc;m v&agrave;o từ đường dẫn file. V&iacute; dụ th&ecirc;m từ đường dẫn file: <code>import Something from "./file"</code>. Th&ecirc;m từ đường dẫn file lu&ocirc;n bắt đầu bằng <code>./</code>.
Khi chạy c&aacute;c tr&igrave;nh tổng hợp m&atilde; nguồn như webpack, Parcel hoặc Vite th&igrave; bare import được xử l&yacute; từ thư mục <code>node_modules</code>.
N&oacute; sẽ t&igrave;m kiếm trong <code>node_modules/react/</code> để x&aacute;c định c&aacute;ch th&ecirc;m g&oacute;i đ&oacute;.
Đ&acirc;y l&agrave; l&yacute; do tại sao bạn cần c&agrave;i đặt react đầu ti&ecirc;n để react được tải về trong thư mục <code>node_modules</code>.
Kiểu th&ecirc;m v&agrave;o n&agrave;y sẽ kh&ocirc;ng hoạt động với thẻ <code>&lt;script type="module"&gt;</code>. Trong chương 30, bạn sẽ được giới thiệu về Vite. Giả sử bạn muốn ngay lập tức bắt đầu l&agrave;m việc với React v&agrave; kh&ocirc;ng muốn đợi đến chương 30, bạn c&oacute; thể sử dụng c&aacute;c tr&igrave;nh bi&ecirc;n dịch code trực tuyến như CodeSandbox v&agrave; StackBlitz.
<h2 style="text-align: justify;">Đối tượng React</h2>
Khi bạn th&ecirc;m React v&agrave;o file JavaScript, bạn nhận được một đối tượng React chứa c&aacute;c phương thức v&agrave; thuộc t&iacute;nh.
Ch&uacute;ng ta sẽ t&igrave;m hiểu về c&aacute;c phương thức một c&aacute;ch từng bước. H&atilde;y bắt đầu với một trong c&aacute;c thuộc t&iacute;nh, đ&oacute; l&agrave; phi&ecirc;n bản.
[___NOTE_Phương thức l&agrave; một h&agrave;m bạn cần gọi với dấu ngoặc đơn, trong khi thuộc t&iacute;nh l&agrave; một gi&aacute; trị thường được t&iacute;nh to&aacute;n trước._NOTE___]
React cung cấp phi&ecirc;n bản hiện tại bằng thuộc t&iacute;nh version; sau đ&acirc;y l&agrave; c&aacute;ch bạn đọc phi&ecirc;n bản, giả định rằng bạn đ&atilde; th&ecirc;m React:
<pre class="language-js" data-content="console.log(React.version)%3B%20%2F%2F%2218.1.0%22" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>console.log(React.version); //"18.1.0"</code></pre>
<h2 style="text-align: justify;">K&iacute;ch thước của React</h2>
Mỗi khi bạn th&ecirc;m một phụ thuộc trong m&atilde; nguồn, bạn đang th&ecirc;m code v&agrave;o ứng dụng.
Bạn sẽ được cung cấp th&ocirc;ng tin về k&iacute;ch thước của c&aacute;c g&oacute;i được đề cập trong kh&oacute;a học n&agrave;y.
Nếu bạn đ&atilde; c&agrave;i đặt VSCode tr&ecirc;n m&aacute;y t&iacute;nh, h&atilde;y c&agrave;i đặt tiện &iacute;ch Import Cost để hiển thị k&iacute;ch thước của việc th&ecirc;m phụ thuộc.
Khi th&ecirc;m v&agrave;o file, React c&oacute; k&iacute;ch thước l&agrave; 6KB.
<h2 style="text-align: justify;">T&oacute;m tắt:</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">C&agrave;i đặt react: <code>npm install react</code></li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Th&ecirc;m React v&agrave;o c&aacute;c file cần thiết: <code>import React from "react"</code></li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">C&aacute;ch lấy phi&ecirc;n bản React hiện tại: <code>React.version</code></li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Khi th&ecirc;m v&agrave;o file, React c&oacute; k&iacute;ch thước l&agrave; 6KB.</li>
</ul>

Cài đặt và bắt đầu học React