Học Typescript + React cơ bản với Pokemon API (2022)

😎Xin chào, mình là Duy (Daniel), trong video này mình sẽ hướng dẫn các bạn về sử dụng Typescript + React cơ bản nhe


✨ Sản phẩm trong video

🥰 Github repo:

Mốc thời gian:
0:00 - Giới thiệu
0:13 - Typescript là gì?
0:26 - Typescript chỉ xài được với React?
0:53 - Cần chuẩn bị gì cho vifdeo này?
1:06 - Tại sao lại sử dụng Typescript?
1:30 - Giới thiệu project
2:16 - Setup Typescript + React
4:04 - Typescript cơ bản
4:21 - Type cơ bản trong TS (string,number,array,...)
9:19 - Type aliases, Interface trong TS
11:00 - Type aliases vs Interface
12:00 - Type của funciton
14:22 - Extend type
19:00 - Bắt đầu Typescript + React
21:23 - PokeAPI documentation
31:00 - Type cho props trong React
42:30 - Chức năng Loadmore
50:00 - Hiện Pokemon Detail khi nhấp vào
53:00 - Type của useState
56:00 - Sử dụng Extending Type trong React
1:11:50 - Outro

🤩 Libs/Packages mình tải trong video:
- npx create-react-app pokemon-tut --template typescript (Typescript + React)
- npm install axios (Tải axios)

🌝 PokeAPI:

👽 Liên hệ với mình tại:

Kênh của bạn này ra content không có tiêu đề quá nổi bật và thu hút nhưng nội dung rất hay.

[HoaNguyen-knci]

Hi vọng b ra thêm video về ts + react js như thế này nữa. Cảm ơn bạn nhiều

[CoffeeTran]

Tại sao giờ này mới biết đến kênh của anh chứ, có lẽ hơi trễ nhưng mà em thấy may mắn vì được tiếp cận những kiến thức một cách dễ hiểu thông qua lời nói và cách a làm video, chúc anh cuối năm - năm mới nhiều sức khoẻ và may mắn
Mong chờ những video chất lượng như này của anh trong thời gian tới
😉

[navuong]

hay quá, hướng dẫn vô cùng dễ hiểu. Mong bạn ra thêm video về Nextjs nữa <3

[JamLangThang]

thanks anh video rất dễ hiểu anh. Đang join vào dự án dùng typescript vs react mà đang quen dùng js thuần

[phucduong]

Chúc mừng năm mới mọi người. Cảm ơn anh

[luutrananhkhoa]

Chúc anh năm mới vui vẻ và thành công ạ

[phamvankhanh]

Anh cho em hỏi project trong video là anh dùng React hook đúng không ạ?
tại em đang cần tìm một video chỉ về react hook + typescript luôn
mong anh giải đáp!

[sometimesalways]

a có thường dùng enum trong typescript hk a? và ở phút 47.57 a dùng phím gì mà nó auto xuống dòng hay vậy anh?

[dack]

anh cho em xin tên extension tự tạo thẻ html với ạ như .test là tạo thẻ div á anh :3

[anhtuanle]

Anh cho e hỏi khi mà những thằng có cái interface được dùng nhiều lần thì mình mới bỏ nó vào file interface riêng hả. Còn không thì cứ tạo nó trong file gốc đk a

[quockhanhngo]

có bug "key" prop kìa anh ơi, do React.StrickMode nên useEffect chạy 2 lần. Lúc này StateList double rồi. Add key value vào thì bug ngây. Mà sao k thấy a fix ???

[ngoviethung]

Hi vọng anh sẽ tạo ra nhiều nội dung hơn ạ

[HuyTran-flej]

1:09:37 ái chà khúc này lấn cấn quá🤣, tại sao khi có điều kiện line 16 thì X lại hoạt động nhĩ

[ChloeVu-wxhm]

Đoạn 59:23, em chưa hiểu lắm vì sao type của abilities phải set undefined nữa ạ? Các dữ liệu khác như name, id, image mình cũng phải fetch api để lấy nhưng sao ko phải set thêm undefined ạ? Có phải object có nhiều cấp thì mới cần vậy ko ạ?

[hoangson]

Có thể ra 1 tutorial về mongodb và expressjs ko anh uiii

[aitrong]

chào a, a có thể show mấy cái extension trong vscode được không?

[KienNguyen-sgnf]

Dạ anh ơi ở 38:53 ak rõ ràng name nó báo lỗi liên quan đến lỗi does not exist on type 'IntrinsicAttributes & Props' mà sao anh vẫn chạy được vậy ạ và rõ ràng là terminal của anh em thấy nó không hề run gì cả nhưng mà vẫn chạy vậy là sao nhỉ. Mong được anh phản hồi ak. Cảm ơn anh rất nhiều ak

[namhoai]

s mình lm giống b nhưng đoạn setPokemons((p) => [...p, poke.data]) thì lại ra đến 100 con nhỉ, res vs poke.data trả về kúc đầu thì chỉ 20 con

[sangtran]

Nếu react18 thì đoạn setPokemons((p) => [...p, poke.data]) thì nó load tận 40con(mỗi con bị lặp lại 2 lần) nhưng khi cài xuống bản react17 thì nó load đúng