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

Khả năng tiếp cận l&agrave; g&igrave; v&agrave; tại sao bạn n&ecirc;n quan t&acirc;m đến n&oacute;?
Accessibility (Khả năng tiếp cận) l&agrave; qu&aacute; tr&igrave;nh thiết kế v&agrave; tạo ra c&aacute;c ứng dụng web c&oacute; thể được sử dụng bởi mọi người.
Đ&acirc;y l&agrave; một thực h&agrave;nh th&uacute;c đẩy khả năng truy cập v&agrave; tương t&aacute;c dễ d&agrave;ng cho tất cả mọi người v&igrave; trang web của bạn c&oacute; thể được sử dụng bởi bất kỳ đối tượng n&agrave;o (bao gồm cả những người c&oacute; khiếm khuyết th&acirc;n thể).
Bạn thường thấy từ "accessibility" được viết tắt th&agrave;nh <code>a11y</code>, đ&oacute; l&agrave; từ bắt đầu bằng "a", kết th&uacute;c bằng "y" v&agrave; c&oacute; 11 k&yacute; tự ở giữa (<code>ccessibilit</code>).
Ch&uacute;ng ta đ&atilde; thấy một v&iacute; dụ về Khả năng tiếp cận khi bạn được khuyến nghị chỉ n&ecirc;n sử dụng tr&igrave;nh xử l&yacute; <code>onClick</code> tr&ecirc;n phần tử <code>&lt;button&gt;</code> để phần mềm hỗ trợ c&ocirc;ng nghệ c&oacute; thể hiểu th&ocirc;ng qua ngữ nghĩa (&yacute; nghĩa của code HTML) rằng c&oacute; một h&agrave;nh động tr&ecirc;n phần tử n&agrave;y khi được nhấp chuột.
Khả năng tiếp cận chủ yếu li&ecirc;n quan đến HTML v&agrave; v&igrave; c&aacute;c component React cuối c&ugrave;ng sẽ hiển thị HTML l&ecirc;n DOM, bạn cần &aacute;p dụng những thực h&agrave;nh tốt nhất về Khả năng tiếp cận trong React.
<h2 style="text-align: justify;">Khả năng tiếp cận của biểu mẫu</h2>
<h3 style="text-align: justify;">onSubmit</h3>
Sự kiện <code>onSubmit</code> được k&iacute;ch hoạt tr&ecirc;n một phần tử <code>form</code>. Nếu bạn mong đợi người d&ugrave;ng điền v&agrave; gửi biểu mẫu th&igrave; việc triển khai phương thức <code>onSubmit</code> quan trọng hơn sự kiện <code>click</code> tr&ecirc;n n&uacute;t v&igrave; sự kiện <code>submit</code> cho ph&eacute;p người d&ugrave;ng điều khiển biểu mẫu bằng b&agrave;n ph&iacute;m (bằng c&aacute;ch nhấn <code>Enter</code> khi ho&agrave;n th&agrave;nh).
<h3 style="text-align: justify;">G&aacute;n nh&atilde;n dữ liệu đầu v&agrave;o</h3>
Việc g&aacute;n <code>label</code> cho mỗi trường nhập liệu (ngoại trừ n&uacute;t), v&ugrave;ng văn bản v&agrave; hộp chọn trong biểu mẫu l&agrave; rất quan trọng v&igrave; nh&atilde;n l&agrave;m cho biểu mẫu c&oacute; khả năng tiếp cận tốt hơn, với hai l&yacute; do sau:
<ol style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Người d&ugrave;ng sử dụng chuột v&agrave; người khuyết tật vận động c&oacute; thể nhấp chuột v&agrave;o nh&atilde;n để truy cập v&agrave;o phần tử điều khiển biểu mẫu li&ecirc;n quan. Điều n&agrave;y c&oacute; nghĩa l&agrave; tạo khu vực nhấp chuột lớn hơn cho trường nhập liệu/v&ugrave;ng văn bản/hộp chọn v&igrave; nhấp chuột v&agrave;o nh&atilde;n hoặc phần tử điều khiển sẽ k&iacute;ch hoạt phần tử đ&oacute;.</li>
<li style="font-weight: 400;" aria-level="1">Người khuyết tật thị gi&aacute;c sử dụng tr&igrave;nh đọc m&agrave;n h&igrave;nh để đọc nh&atilde;n li&ecirc;n kết với một phần tử biểu mẫu khi di chuyển tới phần tử đ&oacute;. Tr&igrave;nh đọc sẽ đọc nội dung của nh&atilde;n m&ocirc; tả trường nhập liệu/v&ugrave;ng văn bản/hộp chọn.</li>
</ol>
<h3 style="text-align: justify;">C&ograve;n về thuộc t&iacute;nh placeholder?</h3>
Thuộc t&iacute;nh <code>placeholder</code> kh&ocirc;ng thay thế được <code>label</code> v&igrave; gi&aacute; trị của n&oacute; bị ẩn khi người d&ugrave;ng bắt đầu g&otilde; v&agrave;o trong phần tử.
Vậy l&agrave;m thế n&agrave;o để th&ecirc;m nh&atilde;n v&agrave;o biểu mẫu? Bạn c&oacute; thể t&igrave;m hiểu chi tiết trong b&agrave;i học tiếp theo.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Accessibility (Khả năng tiếp cận) l&agrave; qu&aacute; tr&igrave;nh thiết kế v&agrave; tạo ra c&aacute;c ứng dụng web c&oacute; thể được sử dụng bởi mọi người.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Accessibility l&agrave; một thực h&agrave;nh th&uacute;c đẩy khả năng truy cập v&agrave; tương t&aacute;c dễ d&agrave;ng cho tất cả mọi người v&igrave; trang web của bạn c&oacute; thể được sử dụng bởi bất kỳ đối tượng n&agrave;o (bao gồm cả những người c&oacute; khiếm khuyết th&acirc;n thể).</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Bạn mong đợi người d&ugrave;ng gửi một biểu mẫu? H&atilde;y triển khai <code>onSubmit</code> tr&ecirc;n biểu mẫu thay v&igrave; sự kiện <code>click</code> tr&ecirc;n n&uacute;t.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Th&ecirc;m <code>label</code> cho mỗi trường nhập liệu/v&ugrave;ng văn bản/lựa chọn.</li>
</ul>