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

Create React App (hoặc CRA) từng l&agrave; một c&ocirc;ng cụ ti&ecirc;u chuẩn để tạo ứng dụng React trang đơn. Tuy nhi&ecirc;n, dự &aacute;n n&agrave;y đ&atilde; dừng ph&aacute;t triển v&agrave; đ&atilde; trở n&ecirc;n lỗi thời. Do đ&oacute;, một giải ph&aacute;p hiện đại hơn l&agrave; Vite.
<h2 style="text-align: justify;">Template React của Vite</h2>
Vitejs.dev được coi một lựa chọn thay thế tuyệt vời cho CRA. Bạn sẽ được giới thiệu cả hai c&ocirc;ng cụ trong kh&oacute;a học n&agrave;y. <a href="https://tek4.vn/">Tek4</a> khuyến nghị sử dụng Vite v&igrave; đ&acirc;y l&agrave; giải ph&aacute;p hiện đại v&agrave; nhanh ch&oacute;ng hơn.
Hướng dẫn bắt đầu với Vite được cung cấp ở cuối b&agrave;i học n&agrave;y.
Bạn n&ecirc;n bắt đầu sử dụng Vite (hoặc create-react-app nếu muốn) song song với kh&oacute;a học n&agrave;y để c&oacute; thể luyện tập viết ứng dụng React b&ecirc;n ngo&agrave;i kh&oacute;a học.
<h2 style="text-align: justify;">Tương lai của Vite v&agrave; create-react-app</h2>
Nếu bạn truy cập v&agrave;o t&agrave;i liệu ch&iacute;nh thức của React để xem c&aacute;ch bắt đầu một dự &aacute;n React mới, bạn sẽ nhận được khuyến nghị sử dụng một framework React ph&ugrave; hợp với m&ocirc;i trường sản xuất. CRA kh&ocirc;ng được đề cập v&agrave; Vite bị ẩn trong phần Deep dive &gt; Can I use React without a framework?.
V&igrave; React chỉ l&agrave; một thư viện chịu tr&aacute;ch nhiệm quản l&yacute; giao diện người d&ugrave;ng, React khuyến nghị sử dụng c&aacute;c framework React như Next, Remix v&agrave; Gatsby. Tuy nhi&ecirc;n, h&atilde;y lưu &yacute; rằng việc học c&aacute;ch sử dụng React như một thư viện độc lập trước khi sử dụng c&aacute;c framework React l&agrave; rất quan trọng. Điều n&agrave;y tương tự như việc t&igrave;m hiểu nguy&ecirc;n l&yacute; hoạt động của hộp số trước khi học l&aacute;i xe &ocirc; t&ocirc;. V&igrave; vậy, tr&aacute;i với khuyến nghị của React, <a href="https://tek4.vn/">Tek4</a> đề xuất bạn n&ecirc;n sử dụng Vite song song với kh&oacute;a học n&agrave;y v&agrave; sử dụng cho dự &aacute;n đầu ti&ecirc;n. Dự &aacute;n đầu ti&ecirc;n sẽ kh&ocirc;ng ho&agrave;n hảo, nhưng đ&oacute; l&agrave; một trải nghiệm học tập.
Khi bạn muốn triển khai ứng dụng trong m&ocirc;i trường sản xuất, bạn c&oacute; thể tiếp tục sử dụng Vite hoặc chuyển sang một framework đầy đủ t&iacute;nh năng hơn. H&atilde;y nhớ rằng việc học một framework y&ecirc;u cầu phải t&igrave;m hiểu c&aacute;c kh&aacute;i niệm mới. Bạn cần nghi&ecirc;n cứu chi tiết nếu c&aacute;c kh&aacute;i niệm n&agrave;y li&ecirc;n quan đến y&ecirc;u cầu cụ thể của trang web (v&iacute; dụ: kết xuất ph&iacute;a m&aacute;y chủ, lưu trữ, truy xuất dữ liệu, v.v.).
<h2 style="text-align: justify;">C&agrave;i đặt</h2>
Để bắt đầu với Vite, bạn cần đảm bảo rằng NodeJS đ&atilde; được c&agrave;i đặt tr&ecirc;n m&aacute;y t&iacute;nh.
Sau đ&oacute;, mở cửa sổ terminal v&agrave; chạy lệnh sau:
<pre class="language-c" data-content="npm%20create%20vite%40latest" data-language="c" data-ace-language="c_cpp" data-name-language="C" data-main-file="main.c"><code>npm create vite@latest</code></pre>
Lệnh n&agrave;y sẽ mở một c&acirc;u hỏi tương t&aacute;c y&ecirc;u cầu bạn chọn <code>react</code> (hoặc <code>react-ts</code> nếu bạn muốn c&oacute; hỗ trợ TypeScript).
Trong b&agrave;i học tiếp theo, ch&uacute;ng ta sẽ kh&aacute;m ph&aacute; c&aacute;c tập lệnh l&agrave;m việc với Vite.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Create React App (hoặc CRA) từng l&agrave; một ti&ecirc;u chuẩn để tạo ứng dụng React trang đơn. Tuy nhi&ecirc;n, hiện tại dự &aacute;n n&agrave;y đ&atilde; dừng ph&aacute;t triển.</li>
<li style="font-weight: 400;" aria-level="1">Vite (vitejs.dev) l&agrave; một lựa chọn thay thế tuyệt vời, hiện đại hơn v&agrave; nhanh hơn CRA.</li>
<li style="font-weight: 400;" aria-level="1">Mặc d&ugrave; t&agrave;i liệu ch&iacute;nh thức của React kh&ocirc;ng khuyến nghị việc sử dụng Vite cho ứng dụng sản xuất, bạn c&oacute; thể sử dụng n&oacute; cho mục đ&iacute;ch học tập. H&atilde;y chắc chắn sử dụng n&oacute; trước khi chuyển sang một giải ph&aacute;p n&acirc;ng cao hơn.</li>
<li style="font-weight: 400;" aria-level="1">Bắt đầu dự &aacute;n mới với Vite bằng c&aacute;ch chạy lệnh: <code>npm create vite@latest</code></li>
</ul>

create-react-app và Vite