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

H&atilde;y xem x&eacute;t component sau:
<pre class="language-js" data-content="function%20Footer()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20text%20%3D%20%22%3Cstrong%3EAll%20rights%20reserved%20%26copy%3B%3C%2Fstrong%3E%22%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cdiv%3E%7Btext%7D%3C%2Fdiv%3E%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function Footer() {
 const text = "&lt;strong&gt;All rights reserved &copy;&lt;/strong&gt;";

 return &lt;div&gt;{text}&lt;/div&gt;;
}</code></pre>
Bạn dự đo&aacute;n component sẽ hiển thị: <code>All rights reserved &copy;</code> (in đậm); tuy nhi&ecirc;n, kết quả thực tế l&agrave;: <code>&lt;strong&gt;All rights reserved &amp;copy;&lt;/strong&gt;</code> kh&ocirc;ng in đậm v&agrave; k&yacute; hiệu bản quyền được hiển thị dưới dạng một thực thể HTML.
Điều n&agrave;y xảy ra l&agrave; v&igrave; khi bạn c&oacute; một biểu thức trong JSX, React sẽ tự động tho&aacute;t c&aacute;c thực thể HTML (chuyển đổi thực thể HTML th&agrave;nh k&yacute; tự an to&agrave;n). Đ&acirc;y l&agrave; một t&iacute;nh năng bảo mật nhằm ngăn chặn XSS injection.
<h3 style="text-align: justify;">XSS Injection l&agrave; g&igrave;?</h3>
Cross-Site Scripting (XSS) l&agrave; một lỗ hổng bảo mật trong đ&oacute; người d&ugrave;ng c&oacute; thể ch&egrave;n code của họ (HTML, CSS hoặc JavaScript) v&agrave;o trang web của bạn. Giả sử bạn muốn gửi lời ch&uacute;c mừng sinh nhật cho bạn b&egrave; tr&ecirc;n mạng x&atilde; hội. Thay v&igrave; viết: <code>Happy Birthday</code>, bạn viết:
<pre class="language-js" data-content="%3Cscript%3Ealert(%22You%20got%20hacked!%22)%3C%2Fscript%3E" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>&lt;script&gt;alert("You got hacked!")&lt;/script&gt;</code></pre>
Nếu trang mạng x&atilde; hội cho ph&eacute;p bạn viết tập lệnh của ri&ecirc;ng bạn v&agrave; hiển thị tr&ecirc;n trang, đ&acirc;y sẽ l&agrave; một lỗ hổng bảo mật nghi&ecirc;m trọng v&igrave; bạn c&oacute; thể đọc cookie của người d&ugrave;ng, mạo danh người d&ugrave;ng, chuyển hướng đến c&aacute;c trang web kh&aacute;c v&agrave; thực hiện nhiều h&agrave;nh vi kh&aacute;c.
Để ngăn chặn XSS Injection, bạn cần tho&aacute;t c&aacute;c phần tử HTML (n&oacute;i một c&aacute;ch đơn giản).
V&igrave; vậy, đoạn code ở tr&ecirc;n trở th&agrave;nh: <code>&amp;lt;script&amp;gt;alert("You got hacked!")&amp;lt;/script&amp;gt;</code>. Bằng c&aacute;ch tho&aacute;t c&aacute;c k&yacute; tự <code>&lt;</code> v&agrave; <code>&gt;</code>, tr&igrave;nh duyệt sẽ hiểu đoạn code tr&ecirc;n l&agrave; văn bản th&ocirc;ng thường thay v&igrave; một đoạn lệnh.
<h2 style="text-align: justify;">Biểu thức JSX được tho&aacute;t</h2>
C&aacute;c biểu thức trong React được tự động tho&aacute;t để ngăn chặn c&aacute;c cuộc tấn c&ocirc;ng XSS th&ocirc;ng thường. Đ&acirc;y l&agrave; một biện ph&aacute;p bảo mật tuyệt vời v&agrave; thường n&ecirc;n được giữ nguy&ecirc;n.
Tuy nhi&ecirc;n, c&oacute; c&aacute;c t&igrave;nh huống m&agrave; bạn muốn ghi đ&egrave; l&ecirc;n h&agrave;nh vi n&agrave;y v&agrave; bỏ qua biện ph&aacute;p ph&ograve;ng ngừa. V&iacute; dụ, khi bạn chắc chắn 100% rằng biểu thức bạn đ&atilde; nh&uacute;ng trong JSX được tạo bởi bạn (hoặc nh&oacute;m của bạn) m&agrave; kh&ocirc;ng được cung cấp bởi người d&ugrave;ng cuối. Sau đ&acirc;y l&agrave; c&aacute;ch thực hiện:
<pre class="language-js" data-content="function%20Footer()%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20text%20%3D%20%22%3Cstrong%3EAll%20rights%20reserved%20%26copy%3B%3C%2Fstrong%3E%22%3B%0A%0A%C2%A0%C2%A0%C2%A0%C2%A0return%20%3Cdiv%20dangerouslySetInnerHTML%3D%7B%7B__html%3A%20text%7D%7D%3E%3C%2Fdiv%3E%3B%0A%7D" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>function Footer() {
 const text = "&lt;strong&gt;All rights reserved &copy;&lt;/strong&gt;";

 return &lt;div dangerouslySetInnerHTML={{__html: text}}&gt;&lt;/div&gt;;
}</code></pre>
Để &yacute; l&agrave; ch&uacute;ng ta đ&atilde; loại bỏ biểu thức <code>{text}</code> v&agrave; th&ecirc;m một prop t&ecirc;n l&agrave; <code>dangerouslySetInnerHTML</code>, n&oacute; nhận đối tượng <code>{__html: text}</code> được đ&oacute;ng g&oacute;i bởi biểu thức <code>{}</code> (v&igrave; vậy ch&uacute;ng ta c&oacute; <code>{{}}</code>, một cho đối tượng v&agrave; một cho biểu thức).
B&ecirc;n trong đối tượng n&agrave;y, bạn phải đặt kh&oacute;a __html (hai dấu gạch dưới). Việc thiết kế <code>dangerouslySetInnerHTML</code> với cấu tr&uacute;c phức tạp như vậy nhằm mục đ&iacute;ch nhắc nhở bạn rằng việc sử dụng n&oacute; tiềm ẩn c&aacute;c rủi ro bảo mật.
Nguy&ecirc;n tắc v&agrave;ng l&agrave; kh&ocirc;ng bao giờ tin tưởng dữ liệu được cung cấp bởi người d&ugrave;ng. Nếu biểu thức m&agrave; bạn nh&uacute;ng đến từ người d&ugrave;ng cuối (v&iacute; dụ: b&igrave;nh luận, t&ecirc;n, họ, email, v.v.), bạn kh&ocirc;ng bao giờ n&ecirc;n sử dụng <code>dangerouslySetInnerHTML</code>.
Sau đ&acirc;y l&agrave; một v&iacute; dụ m&agrave; ch&uacute;ng ta c&oacute; thể sử dụng <code>dangerouslySetInnerHTML</code>:
C&aacute;c c&acirc;u hỏi trong ứng dụng flashcards cho kh&oacute;a học n&agrave;y được lấy từ một API. Những c&acirc;u hỏi n&agrave;y đ&ocirc;i khi chứa định dạng HTML (v&iacute; dụ: <code>strong</code> v&agrave; <code>em</code>). Những c&acirc;u hỏi n&agrave;y 100% do <a href="https://tek4.vn/">Tek4</a> viết v&agrave; kh&ocirc;ng bao giờ do người d&ugrave;ng cuối viết, tức đ&acirc;y l&agrave; nguồn dữ liệu m&agrave; bạn c&oacute; thể tin tưởng. V&igrave; vậy, để c&oacute; thể hiển thị định dạng HTML trong c&aacute;c c&acirc;u hỏi, component hiển thị c&acirc;u hỏi sử dụng <code>dangerouslySetInnerHTML</code>.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Cross-Site Scripting (XSS) l&agrave; một lỗ hổng bảo mật trong đ&oacute; người d&ugrave;ng c&oacute; thể ch&egrave;n code của họ (HTML, CSS hoặc JavaScript) v&agrave;o trang web của bạn.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Biểu thức JSX lu&ocirc;n được tho&aacute;t.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">Bạn kh&ocirc;ng n&ecirc;n sử dụng <code>dangerouslySetInnerHTML</code> nếu nội dung đến từ người d&ugrave;ng cuối. Kh&ocirc;ng bao giờ tin tưởng dữ liệu được cung cấp bởi người d&ugrave;ng.</li>
</ul>