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

Ch&uacute;ng ta sẽ n&acirc;ng cấp dự &aacute;n Bản đồ trước bằng c&aacute;ch th&ecirc;m một danh s&aacute;ch thả xuống chứa c&aacute;c cửa h&agrave;ng l&acirc;n cận trong dự &aacute;n n&agrave;y.
Danh s&aacute;ch thả xuống chứa 3 v&iacute; dụ về c&aacute;c địa điểm tại Đan Mạch: Trạm trung t&acirc;m, Đường Norrebro v&agrave; S&acirc;n bay CPH. Khi người d&ugrave;ng chọn một cửa h&agrave;ng từ danh s&aacute;ch thả xuống, ch&uacute;ng ta sẽ di chuyển ghim (đ&aacute;nh dấu) đến tọa độ mới tương ứng với cửa h&agrave;ng.
<h2 style="text-align: justify;">Th&ecirc;m điểm đ&aacute;nh dấu</h2>
Để th&ecirc;m điểm đ&aacute;nh dấu, bạn cần truy cập v&agrave;o biến map được trả về bởi <code>new mapboxgl.Map({})</code>.
C&aacute;ch đơn giản nhất l&agrave; tạo đối tượng marker trong callback của <code>useEffect</code> hiện tại v&igrave; ch&uacute;ng ta c&oacute; quyền truy cập v&agrave;o biến <code>map</code> trong callback đ&oacute;:
<pre class="language-js" data-content="useEffect(()%20%3D%3E%20%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20map%20%3D%20new%20mapboxgl.Map(%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0container%3A%20'map'%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0style%3A%20'mapbox%3A%2F%2Fstyles%2Fmapbox%2Fdark-v10'%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0center%3A%C2%A0%20%5B%2012.567898%2C%2055.67583%20%5D%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0zoom%3A%209%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D)%3B%0A%C2%A0%C2%A0%C2%A0%C2%A0%2F%2F%20create%20marker%0A%C2%A0%C2%A0%C2%A0%C2%A0const%20marker%20%3D%20new%20mapboxgl.Marker()%0A%C2%A0%C2%A0%C2%A0%C2%A0.setLngLat(%5B12.567898%2C%2055.67583%5D)%0A%C2%A0%C2%A0%C2%A0%C2%A0.addTo(map)%3B%20%2F%2F%20add%20it%20to%20the%20existing%20map%0A%7D%2C%20%5B%5D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>useEffect(() =&gt; {
 const map = new mapboxgl.Map({
 container: 'map',
 style: 'mapbox://styles/mapbox/dark-v10',
 center: [ 12.567898, 55.67583 ],
 zoom: 9
 });
 // create marker
 const marker = new mapboxgl.Marker()
 .setLngLat([12.567898, 55.67583])
 .addTo(map); // add it to the existing map
}, []);</code></pre>
Điều n&agrave;y cũng hợp l&yacute; v&igrave; <code>useEffect</code> chỉ được chạy một lần v&agrave; ch&uacute;ng ta chỉ muốn tạo đối tượng đ&aacute;nh dấu một lần.
V&iacute; dụ tr&ecirc;n th&ecirc;m một điểm đ&aacute;nh dấu v&agrave;o vị tr&iacute; c&oacute; kinh độ 12.567898 v&agrave; vĩ độ 55.67583, tr&ugrave;ng với t&acirc;m của bản đồ. Lưu &yacute; l&agrave; ch&uacute;ng ta cần gọi <code>.addTo(map)</code> để th&ecirc;m điểm đ&aacute;nh dấu, điều n&agrave;y y&ecirc;u cầu ta c&oacute; quyền truy cập v&agrave;o biến <code>map</code>. V&igrave; vậy, nếu bạn khởi tạo đối tượng đ&aacute;nh dấu b&ecirc;n ngo&agrave;i <code>useEffect</code> th&igrave; biến <code>map</code> sẽ kh&ocirc;ng được x&aacute;c định.
<h2 style="text-align: justify;">Thay đổi vị tr&iacute; đ&aacute;nh dấu</h2>
Bản đồ chỉ được tạo một lần duy nhất. Điểm đ&aacute;nh dấu cũng chỉ được tạo một lần, nhưng mỗi khi người d&ugrave;ng thay đổi gi&aacute; trị từ danh s&aacute;ch thả xuống, ch&uacute;ng ta cần thay đổi vị tr&iacute; của điểm đ&aacute;nh dấu (thay v&igrave; tạo một điểm đ&aacute;nh dấu mới).
Dưới đ&acirc;y l&agrave; c&aacute;ch thực hiện trong JavaScript:
<pre class="language-js" data-content="%2F%2F%20assuming%20we%20have%20access%20to%20the%20'marker'%20variable%0A%C2%A0marker.setLngLat(%5B10%2C%2020%5D)%3B" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>// assuming we have access to the 'marker' variable
 marker.setLngLat([10, 20]);</code></pre>
D&ograve;ng lệnh n&agrave;y sẽ thay đổi vị tr&iacute; của điểm đ&aacute;nh dấu th&agrave;nh kinh độ, vĩ độ: 10, 20.
Nhưng điều n&agrave;y c&oacute; nghĩa l&agrave; trong to&agrave;n bộ component, ch&uacute;ng ta cần c&oacute; quyền truy cập v&agrave;o biến <code>marker</code> để gọi <code>setLngLat</code> khi người d&ugrave;ng chọn một gi&aacute; trị từ danh s&aacute;ch thả xuống.
Với đoạn code tr&ecirc;n, biến <code>marker</code> chỉ c&oacute; thể được truy cập trong phạm vi của <code>useEffect</code>.
L&agrave;m thế n&agrave;o c&oacute; thể truy cập biến <code>marker</code> trong to&agrave;n bộ component?
<h3 style="text-align: justify;">Đặt biến marker l&agrave;m biến trạng th&aacute;i</h3>
C&oacute; một số giải ph&aacute;p khả thi; một trong số đ&oacute; l&agrave; tạo biến <code>let marker</code> ở đầu component v&agrave; sau đ&oacute; g&aacute;n lại gi&aacute; trị cho n&oacute; sau khi ch&uacute;ng ta tạo điểm đ&aacute;nh dấu. C&aacute;ch n&agrave;y hoạt động dựa tr&ecirc;n cơ chế closure, nhưng <a href="https://tek4.vn/">Tek4</a> đề xuất phương ph&aacute;p sau:
Coi điểm đ&aacute;nh dấu như một trạng th&aacute;i của component.
V&igrave; biến marker ban đầu được khởi tạo l&agrave; undefined n&ecirc;n ch&uacute;ng ta thiết lập gi&aacute; trị của marker bằng kết quả nhận được từ <code>new mapboxgl.Marker()</code>, sau đ&oacute; biến n&agrave;y sẽ c&oacute; thể được truy cập v&agrave; sử dụng trong component.
V&igrave; vậy, ch&uacute;ng ta bắt đầu bằng c&aacute;ch định nghĩa trạng th&aacute;i cho biến <code>marker</code>:
<pre class="language-js" data-content="const%20%5Bmarker%2C%20setMarker%5D%20%3D%20useState()%3B%20%2F%2F%20default%20value%20is%20undefined" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const [marker, setMarker] = useState(); // default value is undefined</code></pre>
Sau khi ta tạo <code>marker</code>, ch&uacute;ng ta gọi <code>setMarker</code>:
<pre class="language-js" data-content="const%20marker%20%3D%20new%20mapboxgl.Marker()%0A.setLngLat(%5B12.567898%2C%2055.67583%5D)%0A.addTo(map)%3B%0A%0AsetMarker(marker)%3B%20%2F%2F%20make%20it%20available%20throughout%20the%20component" data-language="js" data-ace-language="javascript" data-name-language="Javascript" data-main-file="main.js"><code>const marker = new mapboxgl.Marker()
.setLngLat([12.567898, 55.67583])
.addTo(map);

setMarker(marker); // make it available throughout the component</code></pre>
Đoạn code n&agrave;y cho ph&eacute;p bạn sử dụng biến <code>marker</code> trong to&agrave;n bộ component.

Tìm cửa hàng gần nhất