👉👉👉 Ở 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:
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
—
Bạn muốn học lập trình hiệu quả hơn không?
Hãy học tại trang web thay vì Youtube. Lý do tại sao mời bạn bấm vào đây:
#hoclaptrinh #javascript #html_css #nodejs #restful_api #backend #devops
—————————————
☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh:
Công cụ đo đạc giao diện web:
Công cụ viết CV xin việc chuyên nghiệp:
☻ Tiện ích cho Visual Studio Code:
Gợi ý code: Tabnine Autocomplete AI (
Tự động đóng thẻ: Auto Close Tag (
Tự động đổi tên thẻ đóng/mở: Auto Rename Tag (
Thêm màu sắc cho các cặp ngoặc: Bracket Pair Colorizer (
Icon theme: Material Icon Theme (
Hiển thị thông tin Git (commit, author, …): Gitlens (
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn:
Xây dựng giao diện với HTML, CSS:
Xây dựng web responsive:
Lập trình Javascript cơ bản:
Lập trình Javascript nâng cao:
Xây dựng web với Node & Express:
HTML, CSS tips:
Ứng dụng cảnh báo khi sờ lên mặt:
Xem thêm tại:
☻ Chú ý :
– Không văng tục chửi bậy, bình luận có văn hóa.
– Không hỏi khi chưa xem xong video.
Sai phạm sẽ được mời khỏi kênh.
☻ F8 là nơi học lập trình để đi làm!
Tại sao bạn nên học lập trình tại đây? Ở đây chúng tôi có:
– Nội dung bài học chỉn chu và chi tiết giúp học viên hiểu từ cái gốc
– Kỹ năng sư phạm khác biệt từ người dạy giúp học viên có thêm nhiều động lực
– Hình ảnh và âm thanh chất lượng cao giúp học viên thêm hứng thú
🍺 Buy me a beer
F8 Official
(c) Sơn Đặng
Website:
Facebook cá nhân:
Nhóm Học Lập Trình Web:
Email: sondnf8@gmail.com
© 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 😍😍
1 điểm trừ duy nhất là ông bên phải màn hình k đẹp trai bằng mình 😀
video thật dễ hiểu. cảm ơn bạn
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ỉ?
nice !
function CourseItem(props) {
return (
<div>
<h2>{props.title}</h2>
<p>{props.description}</p>
<h1>{props.students_count}</h1>
<img src={props.image} alt={props.title} />
</div>
);
}
export default function App() {
return (
<div className="App">
{courses.map((course) => (
<CourseItem
title={course.title}
description={course.description}
image={course.image_url}
students_count={course.students_count}
/>
))}
</div>
);
}
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 ạ ?
anh ơi cái link api dead rồ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é!
yes sir
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.
Ae có ai bị error format khi sử dụng babel không ạ. Làm sao để khắc phục nó ạ.
Anh ơi đường link trong mô tả không còn vào được
Rất hay và chi tiết. Xâu chuỗi nhiều kiến thức liên quan. Cảm ơn F8
ko lấy đc api nữa a ơi
link api 404 mất r a ơi
Rất hay và dễ hiểu. Chúc anh luôn có nhiều sức khỏe
Link Api bị lỗi rồi anh ơi
Đang học tập trung đến đoạn " Ae đừng phá f8 nha" làm em cười quá anhh😂😂
<3
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ư <component data = {data}/> 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 ạ
cảm ơn anh, anh dạy dễ hiểu quá
Mình đóng góp 1 tí keyword props là viết tắt của properties chứ kp là đạo cụ ^^
return (
<div className="App">
{courses.map((el, index) => (
<Courses
key={index}
title={el.title}
img={el.thumbnail_cdn}
desc={el.description}
/>
))}
</div>
);
Subscribe anh do câu "bạn nào làm được cái này là đạt điểm tối đa" :))
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 ạ 😭
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.
a Sơn bị thằng anti fan nào dislike kia ko biết =))
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 =))
Anh Sơn và mọi người ơi cho em hỏi chỗ này với!!
Học bài này em liên tưởng tới thư viện prop-types, cho em hỏi tại sao description
bị undefined ạ?
““javascript
const postDefaultValue = {
img: '#',
title: 'Default title',
description: 'Default description',
published: 'Default published'
};
const { img, title, description, published } = postDefaultValue;
console.log({ title }); //Default title
const Post = ({ img, title, description, published } = postDefaultValue) => {
console.log({ postDefaultValue }); // { img: '#', …params } – có giá trị của object default
console.log({ description }); // undefined
return (
<li className="post__list">
<img src={img} />
<h2 className="post__title">{title}</h2>
<p className="post__desc">{description}</p>
<p className="post__published">{published}</p>
</li>
);
};
““
anh giữ sức khoẻ anh ơi, nhìn anh bùn ngủ thật sự
Anh làm 1 video về bằng cấp trong ngành đi
Anh ơi sao anh k create react app về làm cho tiện ạ
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 :))
Tối nay ra video mới về react chứ ad
Cám ơn anh đã chia sẻ kiến thức, mong anh ra thêm nhiều video nữa 🤓
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
a son qua dinh?
video quá chất lượng luôn ạ 😍
mong ông ra video còn hơn là xem phim bộ nữa á, quá đã
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 😀
em xin nộp link JSFiddle (thay dấu [] bằng dấu /):
[]luubadao[]soa5pf8r[]2[]