Props là gì? | Dùng props khi nào? | Khái niệm Props
Вставка
- Опубліковано 23 лип 2024
- 👉 Xem Lộ Trình Học: fullstack.edu.vn/learning-paths
👉 Đăng Ký Học Offline Tại F8: short.f8team.dev/dang-ky-hoc-...
Props là gì? | Dùng props khi nào? | Khái niệm Props
Ở bài tập trước có thể anh em dễ dàng nhận ra các components có thể tái sử dụng, tuy nhiên việc tái sử dụng này chưa mang nhiều ý nghĩa. Hôm nay chúng ta học khái niệm props để việc tái sử dụng trở nên có ý nghĩa nha anh em 😍😍
👉 API lấy dữ liệu làm bài tập: api-gateway.fullstack.edu.vn/...
Phân đoạn trong video:
00:00 - Chữa bài tập
03:17 - React elements & React components
04:19 - Props với React elements
06:38 - Props với React components
14:19 - Prop "key" là prop đặc biệt
16:01 - Props có thể là bất cứ kiểu dữ liệu gì
19:10 - Destructuring với props
#hoclaptrinh #hoclaptrinhmienphi #javascript #reactjs #frontend #backend #devops #f8
-------
☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: s.net.vn/D8kL
Công cụ viết CV xin việc chuyên nghiệp: mycv.vn
--------------
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: fullstack.edu.vn/courses/less...
Xây dựng giao diện với HTML, CSS: fullstack.edu.vn/courses/html...
Xây dựng web responsive: fullstack.edu.vn/courses/resp...
Lập trình Javascript cơ bản: fullstack.edu.vn/courses/java...
Lập trình Javascript nâng cao: fullstack.edu.vn/courses/java...
Làm việc với Terminal & Ubuntu: fullstack.edu.vn/courses/wind...
Xây Dựng Website với ReactJS: fullstack.edu.vn/courses/reactjs
Xây dựng web với Node & Express: fullstack.edu.vn/courses/nodejs
HTML, CSS tips: fullstack.edu.vn/courses/html...
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu.vn/courses/tool...
Xem thêm tại: fullstack.edu.vn/courses
-------------------------------------
F8 Official
(c) Sơn Đặng
Website: fullstack.edu.vn
Facebook cá nhân: / sondnf8
Nhóm Học Lập Trình Web: / f8official
Email: contact@fullstack.edu.vn
© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức. - Наука та технологія
👉👉👉 Props là cách viết ngắn gọn của properties, dùng để truyền các thuộc tính vào cho component nhé anh em. Nói props là "đạo cụ" là mình đang dịch nghĩa đen của từ "props" ấy. Sorry anh em chỗ này nha 😍😍
đã học qua react rồi nhung xem video của anh vẫn mang rất nhiều giá trị, cảm ơn anh vì những cống hiến của mình 🥰🥰
Xem của người khác thì mơ hồ không hiểu, còn học hỏi từ anh thì được hiểu rõ hơn về props, đây là sự thật : )
Cám ơn anh đã chia sẻ kiến thức, mong anh ra thêm nhiều video nữa 🤓
Rất hay và dễ hiểu. Chúc anh luôn có nhiều sức khỏe
Rất hay và chi tiết. Xâu chuỗi nhiều kiến thức liên quan. Cảm ơn F8
Mỗi ngày hóng chờ video của a.
Thực sự mình đã học ở các Bootscamp, udemy, frontendmaster, và mình thực sự học hỏi thêm đc nhiều điều từ những bài học của F8. Cảm ơn bạn rất nhiều vì đã đầu tư những video này.
Cảm ơn bạn nha, hi vọng giúp được mọi người phần nào đó 😍😍
true story.
video quá chất lượng luôn ạ 😍
mong ông ra video còn hơn là xem phim bộ nữa á, quá đã
cảm ơn anh, anh dạy dễ hiểu quá
quả intro xịn sò ghê ko biết a sơn thuê hay tự làm vậy
quá đỉnh anh ơi, em cảm ơn anh nhiều ạ
video thật dễ hiểu. cảm ơn bạn
công nhận học chỗ khác hiểu mù mờ vào clip của a Sơn coi cái như kiểu dc thông mũi bằng kit test covid =))
Đợi mãi
Hay quá ạ ! 😍😍
video xịn quá ^^
Hóng video
26 phút luôn quá đã
Đang học tập trung đến đoạn " Ae đừng phá f8 nha" làm em cười quá anhh😂😂
lâu lâu cứ phải vào f5 xem có video mới ko mặc dù đã bật thông báo :))
Sao mở web để học mà nó trắng xoá không có chữ nào vậy ạ
hay quá anh
Món ăn tinh thần mỗi ngày
A có list ra trước các tiêu đề các videos sẽ ra ko ạ? Cho e xin list lên trang chủ React hoặc google đọc trước :D
Mọi ng cho mình hỏi khi coppy mảng object sang VScode Ctrl+S thì nó format thành 1 dòng và có lỗi ',' expected . javascript . Fix như thế nào được ạ 😭
Mong a ra video dài dài như v.
anh giữ sức khoẻ anh ơi, nhìn anh bùn ngủ thật sự
props dùng để truyền attr vào trong components giống attr của html. Thứ 2 là để pass data từ cha xuống con.
fan cứng của f8
Subscribe anh do câu "bạn nào làm được cái này là đạt điểm tối đa" :))
Hay qua
Anh làm 1 video về bằng cấp trong ngành đi
Bạn này dạy có tâm quá. Cảm ơn đóng góp của bạn cho cộng đồng. Chúc bạn gặp nhiều sức khoẻ nhé!
Anh ơi đường link trong mô tả không còn vào được
nice !
Video sau chắc là hướng dẫn về Stage rồi hihi
Mình đóng góp 1 tí keyword props là viết tắt của properties chứ kp là đạo cụ ^^
Tối nay ra video mới về react chứ ad
Bao giờ F8 ra khóa về js pro thế nhỉ.
Alo Anh ơi sao không có file API trên nữa Anh nhỉ?
anh ơi cái link api dead rồi ạ
yes sir
API a lưu ntn vậy a :v
❤️❤️
a Sơn bị thằng anti fan nào dislike kia ko biết =))
Ae có ai bị error format khi sử dụng babel không ạ. Làm sao để khắc phục nó ạ.
ước gì có 10 anh Sơn Đặng
mn cho e hỏi chút. phần Destructuring bên js viết kiểu const [a,b] = array thì được nhưng trong props thì phải viết đúng tên như trong component child mới được ạ. kiểu như thì trong component phải dùng data để đặt trong destructuring funtction component({data}) còn đổi tên khác kiểu function component({b}) thì lại lỗi ạ
này thuộc về quy ước syntax bạn nhé. Array indexes theo thứ tự từ trái qua phải [1,2,3,4,...]. Còn component nhận prop là một object mà object thì giá trị hoặc phương thức sẽ theo các key property, method nên khi destruturing thì phải theo key bạn nhé
a Sơn có đề cập trong bài giảng là nếu trích xuất giá trị từ object phải nhập đúng key của object đó
link api 404 mất r a ơi
ko lấy đc api nữa a ơi
cái key shorcut của phím tắt để nó bôi đên qua bên phải của text trong vscode là gì vậy ạ ?
Alt Shift >
@@Misskieutra cảm ơn bn
Anh ơi sao anh k create react app về làm cho tiện ạ
E đã từng học rồi phải ko? A làm video cho số đông anh phải nghĩ cho người chưa học bao giờ nữa em ạ 😍😍
@@F8VNOfficial à vâng em hiểu rồi ạ, em trc cũng hóng video của anh về react, song em cx xem video của nhiều ng khác, em thấy nhiều ng create react app từ đầu, còn anh em thấy a code trong html. A cho e xin lỗi ạ
A ơi cho e hỏi chút. Trên các gr fb thì có một bài viết e đọc là trên f8 kiến thức a dạy chỉ để pr cho khoá học off thôi chứ để đi làm thì trên f8 chưa đủ . E củng chưa học ở đâu ngoài f8 nên củng ko biết ntn. dù sao củng củng hộ a
Cho e hỏi luôn là kiến thức off vs trên f8 có khác nhau ko ạ
a son qua dinh?
1 điểm trừ duy nhất là ông bên phải màn hình k đẹp trai bằng mình :D
0:14 á đù, trước giờ cứ nghĩ nó là viết tắt của properties.
sau khi google lại thì mình thấy điều mình nghĩ là đúng: “Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another.
Đúng là properties bạn ơi, mình dịch nghĩa từ "props" thôi, sr đoạn này thế là mình nói gây hiểu nhầm rồi. Nó viết ngắn gọn của properties nha anh em.
@@F8VNOfficial ok ok.
@@F8VNOfficial mình hay bắt bẻ vầy không biết có phiền bạn không nhỉ.
Thanh niên ko nghe cho rõ, đoạn sau ảnh đã nói là 1 object để bọc các thuộc tính (properties) thì props ở đây cũng hiểu là properties rồi, chỗ đó ảnh dịch nghĩa đen ra cho vui thôi
function CourseItem(props) {
return (
{props.title}
{props.description}
{props.students_count}
);
}
export default function App() {
return (
{courses.map((course) => (
))}
);
}