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

Giải ph&aacute;p cho Dự &aacute;n V như sau: bạn c&oacute; component <code>App</code> với component con <code>StoreFront</code>.
Component <code>StoreFront</code> lưu giữ trạng th&aacute;i của <code>name</code>, <code>description</code> v&agrave; <code>validation</code> v&agrave; định nghĩa 4 phương thức: <code>onNameChange</code>, <code>onDescriptionChange</code>, <code>onFormSubmit</code> v&agrave; <code>onDeleteClick</code>.
Component <code>StoreFront</code> hiển thị 3 phần tử:
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1"><code>AddProductForm</code></li>
<li style="font-weight: 400;" aria-level="1">Một phần tử div (theo điều kiện: hiển thị <code>&lt;p&gt;Add your first product&lt;/p&gt;</code> dựa tr&ecirc;n điều kiện <code>products.length === 0</code>)</li>
<li style="font-weight: 400;" aria-level="1"><code>ProductsList</code></li>
</ol>
<code>AddProductForm</code> v&agrave; <code>ProductsList</code> nhận c&aacute;c biến/phương thức cần thiết dưới dạng props.
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/0993f3d0-4ec6-4924-bbea-cb530bc2ade4" alt="project-v-updated" />
Một điều quan trọng cần nhớ l&agrave; <code>state</code> đ&atilde; được di chuyển l&ecirc;n component cha chung gần nhất, component <code>StoreFront</code>.
Ch&uacute;ng ta kh&ocirc;ng định nghĩa trạng th&aacute;i trong component <code>App</code> v&igrave; bạn chỉ n&ecirc;n di chuyển trạng th&aacute;i l&ecirc;n component cha chung gần nhất.
V&igrave; ch&uacute;ng ta cần c&aacute;c biến trạng th&aacute;i đ&oacute; trong <code>AddProductForm</code> v&agrave; <code>ProductsList</code> n&ecirc;n component cha chung gần nhất l&agrave; <code>StoreFront</code>.
<h2 style="text-align: justify;">Nhắc lại lợi &iacute;ch của việc di chuyển trạng th&aacute;i l&ecirc;n component cha</h2>
H&atilde;y nhớ rằng việc di chuyển trạng th&aacute;i l&ecirc;n component cha mang lại hai lợi &iacute;ch sau:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Component cha chung trở th&agrave;nh nguồn dữ liệu duy nhất. Điều n&agrave;y gi&uacute;p dễ d&agrave;ng việc t&igrave;m kiếm v&agrave; sửa lỗi, v&igrave; bạn biết chỉ c&oacute; một nơi duy nhất m&agrave; trạng th&aacute;i sẽ được thay đổi.</li>
<li style="font-weight: 400;" aria-level="1">C&oacute; một vị tr&iacute; quản l&yacute; trạng th&aacute;i chung gi&uacute;p duy tr&igrave; t&iacute;nh nhất qu&aacute;n trong ứng dụng. Nếu bạn tạo một số logic x&aacute;c thực cho <code>entry</code>, bạn chỉ cần thực hiện một lần duy nhất trong component cha chung.</li>
</ul>
Bạn c&oacute; thể giải b&agrave;i tập theo một số c&aacute;ch kh&aacute;c nhau. Hiện tại, Tek4 khuy&ecirc;n bạn n&ecirc;n sử dụng giải ph&aacute;p được cung cấp trong b&agrave;i học n&agrave;y do những lợi &iacute;ch đề cập ở tr&ecirc;n.
Tuy nhi&ecirc;n, h&atilde;y nhớ rằng c&aacute;c biểu mẫu trong React thường sử dụng nhiều đoạn code tr&ugrave;ng lặp, nhưng ch&uacute;ng ta c&oacute; thể giảm thiểu code bằng c&aacute;ch sử dụng thư viện hỗ trợ biểu mẫu (v&iacute; dụ: react-hook-form).
<h2 style="text-align: justify;">Tổng kết</h2>
H&atilde;y c&ugrave;ng nh&igrave;n lại h&agrave;nh tr&igrave;nh v&agrave; xem x&eacute;t những chủ đề React m&agrave; bạn đ&atilde; học cho đến nay:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">H&agrave;m thuần t&uacute;y</li>
<li style="font-weight: 400;" aria-level="1">Closures</li>
<li style="font-weight: 400;" aria-level="1">Sự kiện</li>
<li style="font-weight: 400;" aria-level="1">JSX n&acirc;ng cao</li>
<li style="font-weight: 400;" aria-level="1">C&uacute; ph&aacute;p destructure mảng n&acirc;ng cao</li>
<li style="font-weight: 400;" aria-level="1">Cải thiện UI Kit&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Hook (useState)</li>
<li style="font-weight: 400;" aria-level="1">Trạng th&aacute;i</li>
<li style="font-weight: 400;" aria-level="1">Thay đổi trạng th&aacute;i c&oacute; điều kiện</li>
<li style="font-weight: 400;" aria-level="1">Kết xuất c&oacute; điều kiện</li>
<li style="font-weight: 400;" aria-level="1">T&iacute;nh bất biến</li>
<li style="font-weight: 400;" aria-level="1">Thao t&aacute;c bất biến với mảng</li>
<li style="font-weight: 400;" aria-level="1">Trạng th&aacute;i với Mảng</li>
<li style="font-weight: 400;" aria-level="1">Thao t&aacute;c bất biến với đối tượng</li>
<li style="font-weight: 400;" aria-level="1">Trạng th&aacute;i với Đối tượng</li>
<li style="font-weight: 400;" aria-level="1">Biểu mẫu</li>
<li style="font-weight: 400;" aria-level="1">Khả năng tiếp cận</li>
<li style="font-weight: 400;" aria-level="1">Trạng th&aacute;i n&acirc;ng cao</li>
<li style="font-weight: 400;" aria-level="1">Sự kiện DOM</li>
<li style="font-weight: 400;" aria-level="1">Cấu tr&uacute;c thư mục</li>
<li style="font-weight: 400;" aria-level="1">Sự kiện t&ugrave;y chỉnh</li>
<li style="font-weight: 400;" aria-level="1">Di chuyển trạng th&aacute;i l&ecirc;n component cha</li>
<li style="font-weight: 400;" aria-level="1">DOM ảo</li>
</ul>

Tổng kết dự án