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

React Dev Tools l&agrave; một c&ocirc;ng cụ ph&aacute;t triển d&agrave;nh cho nh&agrave; ph&aacute;t triển m&agrave; bạn c&oacute; thể c&agrave;i đặt tr&ecirc;n tr&igrave;nh duyệt. C&ocirc;ng cụ n&agrave;y gi&uacute;p bạn t&igrave;m hiểu v&agrave; gỡ lỗi ứng dụng React.
Đ&acirc;y l&agrave; phần mở rộng c&oacute; sẵn cho c&aacute;c tr&igrave;nh duyệt nha:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">React Dev Tools cho Chrome</li>
<li style="font-weight: 400;" aria-level="1">React Dev Tools cho Firefox</li>
<li style="font-weight: 400;" aria-level="1">React Dev Tools cho Edge</li>
</ul>
H&atilde;y tiến h&agrave;nh c&agrave;i đặt cho tr&igrave;nh duyệt bạn muốn. Hiện tại c&ocirc;ng cụ chưa khả dụng tr&ecirc;n Safari.
Lưu &yacute; rằng plugin chỉ hoạt động khi bạn đang duyệt một trang web sử dụng React.
Phần mở rộng n&agrave;y sẽ hữu &iacute;ch khi ứng dụng trở n&ecirc;n lớn hơn v&igrave; n&oacute; cung cấp kh&aacute; nhiều t&iacute;nh năng tiện lợi. H&atilde;y c&ugrave;ng t&igrave;m hiểu về những t&iacute;nh năng đ&oacute;.
<h2 style="text-align: justify;">Phi&ecirc;n bản ph&aacute;t triển/sản xuất của React</h2>
Khi bạn đang duyệt một trang web sử dụng React, phần mở rộng sẽ hiển thị th&ocirc;ng b&aacute;o sau:
<pre class="language-js" data-content="This%20page%20is%20using%20the%20production%20build%20of%20React.%20%E2%9C%85%0AOpen%20the%20developer%20tools%2C%20and%20%22Components%22%20and%20%22Profiler%22%20tabs%20will%20appear%20to%20the%20right." data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>This page is using the production build of React. ✅
Open the developer tools, and "Components" and "Profiler" tabs will appear to the right.</code></pre>
hoặc:
<pre class="language-js" data-content="This%20page%20is%20using%20the%20production%20build%20of%20React.%20%E2%9C%85%0AOpen%20the%20developer%20tools%2C%20and%20%22Components%22%20and%20%22Profiler%22%20tabs%20will%20appear%20to%20the%20right." data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>This page is using the production build of React. ✅
Open the developer tools, and "Components" and "Profiler" tabs will appear to the right.</code></pre>
Đ&acirc;y l&agrave; th&ocirc;ng b&aacute;o nhắc nhở nếu bạn kh&ocirc;ng sử dụng phi&ecirc;n bản sản xuất của React khi triển khai trang web. Lưu &yacute; rằng nếu bạn sử dụng create-react-app th&igrave; bạn kh&ocirc;ng cần phải lo lắng về điều n&agrave;y.
Ngo&agrave;i ra, trong kh&oacute;a học n&agrave;y, <a href="https://tek4.vn/">Tek4</a> sử dụng phi&ecirc;n bản ph&aacute;t triển để hiển thị những cảnh b&aacute;o từ thư viện React khi bạn học React. V&igrave; vậy, đ&acirc;y l&agrave; một ngoại lệ. Th&ocirc;ng thường, tất cả c&aacute;c trang web sản xuất n&ecirc;n sử dụng phi&ecirc;n bản sản xuất của React.
<h2 style="text-align: justify;">Duyệt Components</h2>
Khi bạn đang duyệt một trang web sử dụng React, nhấp chuột phải ở bất kỳ nơi n&agrave;o tr&ecirc;n trang v&agrave; chọn Inspect Element hoặc Inspect v&agrave; sau đ&oacute; chuyển đến tab Components ở cuối danh s&aacute;ch c&aacute;c tab.
Lưu &yacute; rằng theo mặc định, phần mở rộng chỉ hiển thị c&aacute;c component v&agrave; ẩn c&aacute;c phần tử mặc định của tr&igrave;nh duyệt như <code>&lt;div&gt;</code>, <code>&lt;p&gt;</code>, <code>&lt;h1&gt;</code>, v.v.
H&agrave;nh vi n&agrave;y c&oacute; thể được thay đổi bằng c&aacute;ch nhấp v&agrave;o biểu tượng b&aacute;nh răng ở g&oacute;c phải tr&ecirc;n c&ugrave;ng của phần mở rộng, sau đ&oacute; chọn tab Components v&agrave; bật/tắt quy tắc đầu ti&ecirc;n dưới phần Hide components where.
<h2 style="text-align: justify;">T&oacute;m tắt</h2>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">React Dev Tools gi&uacute;p dễ d&agrave;ng gỡ lỗi ứng dụng React.</li>
<li style="font-weight: 400;" aria-level="1">Phần mở rộng chỉ hoạt động tr&ecirc;n c&aacute;c trang web sử dụng React.</li>
<li style="font-weight: 400;" aria-level="1">C&ocirc;ng cụ cũng cho biết bạn đang sử dụng phi&ecirc;n bản ph&aacute;t triển hay phi&ecirc;n bản sản xuất của React.</li>
<li style="font-weight: 400;" aria-level="1">Bạn c&oacute; thể duyệt c&aacute;c component, kiểm tra v&agrave; chỉnh sửa trạng th&aacute;i trong ứng dụng.</li>
</ul>