React hooks: 03 - Dùng useState() qua ví dụ đơn giản (2020)
HTML-код
- Опубликовано: 9 фев 2025
- Một ví dụ đơn giản nhưng rất chi tiết về cách sử dụng useState() hook trong functional component của react. Đây là một video trong chuỗi react hooks của mình.
Trong video này, mình cùng code với các bạn để chia sẻ một vài ý:
Kinh nghiệm khi code: làm logic trước, UI sau.
Phân tích trước khi đi vào code.
StrictMode nó làm cho component bị render() 2 lần, bạn có biết?
Sử dụng useState() để quản lý backgroundColor của box.
Dùng localStorage để lưu dữ liệu và init sau khi reload trình duyệt.
Dùng initialState dạng callback để tối ưu số lần gọi code dư thừa.
🌐 Link tham khảo
Slide useState lab: drive.google.c...
Introduction to react hooks: reactjs.org/do...
React hooks API reference: reactjs.org/do...
React hooks FAQ: reactjs.org/do...
StrictMode: reactjs.org/do...
#react_hooks #react #usestate #easyfrontend
-----
💻 Easy Frontend 🎉
Nơi kiến thức lập trình web frontend (html/css/javascript/reactjs) được chia sẻ một cách đơn giản, dễ hiểu mà đặc biệt là vui 😊 Với những tài liệu (tutorial) được biên soạn một cách kĩ lưỡng để giúp các bạn developer mới có thể nắm bắt vấn đề một cách nhanh chóng và hiệu quả. Từ đó nâng dần khả năng coding của các bạn lên theo thời gian.
❤️ Ủng hộ mình làm videos thì đóng góp tại đây nhé:
Ủng hộ tôi: unghotoi.com/e...
MoMo/ZaloPay: 0901 309 729
Kết nối với mình:
🎉Facebook: / nvhauesmn
💻Github: github.com/pau...
💼 LinkedIn: / haunguyenmn
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
Cảm ơn tất cả các bạn đã xem video của mình nhé! ❤️
Hi vọng qua video này, các bạn học được tư duy cách code của mình.
Hãy chia sẻ điều bạn học được qua video này bên dưới nhé! 😉
dễ hiểu quá anh ơi. anh làm video về useCallBack nữa anh nhé
Thanh Tùng okie Tùng nhé hihi, cảm ơn bạn đã gợi ý cái hook đó cho mình nha 😍
@Lion hi Lion ơi, về tailwindcss thì a chưa sử dụng trong dự án thực tế nè, nhưng a nghĩ nếu team em thích styles này thì cứ thử nghiệm cho một dự án nhỏ xem sao rồi quyết định nhé Lion hihi 😉
xem video của anh có 1 tiếng mà em hiểu được sâu hơn , trước e cũng học nhưng chỉ hiểu được sơ sơ
Giảng hay quá anh, xúc tích, trọng tâm, còn chỉ thêm mẹo các thứ nữa, tuyệt vời!
hihi cảm ơn Huy nhiều nhé! 😍Rất vui vì video hữu ích cho Huy nè hehe
bài của anh rất hay vừa đưa kiến thức vừa đưa kinh nghiệm thực tế
Bùi tuấn Dũng Yeah cảm ơn em nhiều nhé Dũng, rất vui vì video hữu ích với em nè 😉
dạ, em cảm ơn anh rất nhiều, anh giảng rất hay và dễ hiểu ạ
bài giảng của anh rất dễ hiểu và đầy đủ ạ, em cảm ơn
Yeahhhh cảm ơn em nhiều nhé em ơiiiii 😍
Nhờ anh mà em khai sáng được nhiều điều về React Hook, bớt lúng túng hơn khi tiếp cận Function Component. Chúc anh nhiều sức khỏe. Cảm ơn anh!
Cảm ơn em đã phản hồi cho anh biết nhé Chiến, a rất vui khi videos của anh giúp được em nè!
Chúc em nhiều sức khoẻ và học tập tốt nhé 🙂
Cảm ơn nhiều nhé, ko những kiến thức về hook mà rất nhiều tip, trick khác trong video để cải thiện coding
Wohoo ngon lành, cảm ơn Châu nhiều nhé, rất vui video hữu ích vs bạn nè 😉
Bài của bác dạy rất hay và dễ hiểu. Mong chờ bác ra thêm video về series Hook này để anh em mở mang được kiến thức sử dụng khi làm việc. Cảm ơn bác rất nhiều !!!
Lịch Lê Cảm ơn Lịch rất nhiều vì đã chia sẻ cho mình biết nhé, mình đang làm videos usestate lab về todo list với option list, cho mọi người thấy nhiều tình huống sử dụng hơn hehe hi vọng mai lại tiếp tục có video mới 😉
Bạn chia sẻ rất dễ hiểu, kiến thức mới rất hay! Cảm ơn bạn!
Yeahhhh cảm ơn bạn nhiều nhé, rất vui vì bạn thích nó nè! Tiếp tục đồng hành với mình trong những videos hooks tiếp theo nữa nhen, hiện nó có 16 videos về hooks rồi á 🙂
@@EasyFrontend Nhất định rồi :) vì mình đang cần làm website bán hàng bằng React nên sẽ học hỏi từ bạn thật nhiều :) Cảm ơn bạn vì nhiều kiến thức mới và chia sẻ rất có tâm! Chúc bạn luôn khỏe mạnh, may mắn và hạnh phúc!
Em rất hi vọng anh duy trì những chuỗi video bổ ích như thế này
Wohoooooo cảm ơn em nhiều nhé Nghiêm ơi 😍
Anh giảng chi tiết dễ hiểu lắm chúc anh ra đc nhiều video hơn nữa ạ ❤❤ Cảm ơn anh nhiều
hehee cảm ơn em nhiều nhiều nhé ❤️
kênh quá có tâm, mong anh chia sẻ nhiều video nhé
hihi cảm ơn em nhiều nhé Anh! ❤️ Sáng mai lại có thêm một bài tập ví dụ về useState() nữa nhen 😉
Cảm ơn anh nhiều, thật sự dễ hiểu và dạy có tâm ghê
hihi cảm ơn em nhiều nhé Điện ơi 😍
Cảm ơn a !!! Video dễ hiểu lắm ạ !
cám ơn anh, rất dễ hiểu
*Mùa dịch ở nhà xem video của a là hết ý*
haha cảm ơn em nhiều nha Tiến. Video này em code theo có gặp khó khắn gì hk Tiến? 🙂
Video rất hay. Mong anh sớm ra thêm video ạ 😍😍😍
hihi cảm ơn em nhiều nhé! 😍 Hẹn em sáng mai lại tiếp tục thực hành useState() nữa nha 😉
@@EasyFrontend tks anh ạ. E nhảy sang luôn học react native.em đang đọc docs và làm theo ví dụ nên thấy kiến thức về react hook của anh bổ trợ cbo em rất nhiều ạ
Quanh Ng Yeahhhh rất vui vì kiến thức của mình hỗ trợ được cho bạn nè, nếu có gì cần trao đổi thêm, cứ thoải mái ping mình nhé 🙂
Video sịn lắm luôn á a 😍😍
hehe ngon lành hehe 🥰
Cảm ơn anh ạ. Xem anh dễ hiểu quá!.😍😍
hehee cảm ơn em nhiều nhé Thái ơiiii 😍
Hay quá mong muốn anh ra nhiều clip hay. Ntn
cảm ơn thầy, video rất dễ hiểu.
Yeahhh cảm ơn e nhé Lợi hehe 😉
@@EasyFrontend em hi vọng thầy sẽ làm nhiều video như này để giúp những bạn developer có thể dễ dàng tiếp thu kiến thức mới
@@congloibui3363 Yayyy a vẫn đang tiếp tục làm videos cho mn tham khảo nhé Lợi hehe, chúc em thật nhiều sức khoẻ nhen 😍
quá hay anh ơi !
thanks annh nhiều nha
hâhha cảm ơn em nhiều nha Tôm ơiiiii 😍
@@EasyFrontend a ơi a làm 1 video để trả lời cho câu hỏi " how react update DOM" được không ? E học Nodejs API giờ tính mò sang React để tập tành call APIs nên hơi gà mờ. Bữa giờ e cứ nghĩ hàm render() là hàm xong cuối cùng và nó cho ra UI Update lên DOM luôn nhưng sau khi nghe xong về lifecycle của a thì hình như không phải thế. Saurender thì còn có những hàm khác nữa. Em có tím hiểu để trả lời cho câu hỏi "HOW REACT UPDATE DOM",thì được biết còn có virtua DOM gì gì đó nữa...Luồng chạy các Component khi update ntn nữa ...huhu.. CẢM ƠN ANH NHIỀU
@@aoatom8244 hi Tôm, anh có một video về react life cycle component, em vào kênh của anh, xem series của reactjs rồi xem thử nhen hihi 😉
Anh chỉnh âm lượng lớn thêm một xíu là Ok. Còn bài giảng thì rất hay ạ :3
Càn Long Nguyễn Yesss, cảm ơn Long. Xin lỗi em, video này hơi bị failed phần âm thanh hihi, a có chỉnh lại ở mấy video sau òi hihi 🙂
rất hay, rất rõ ràng
Tuấn Lường Viết hihi cảm ơn bạn nhiều nhé ❤️
Rất cám ơn anh về playlist React này ❤️
Thiện Đỗ Phước ❤️ Cảm ơn e nhiều nhé Thiện! Hi vọng series này có thể giúp ích được cho bạn 🙂
Cảm ơn a! Video hay quá ạ..
Hay quá a . Trong video này e học được chia cho dễ nhìn css hehe . Bộ lần để dính chung ko có cách line hehe
hehe cool e Huy, e có hiểu được tư duy code, logic trước, UI sau không Huy? 🙂
Được a ạ
Nguyễn Văn Huy yeahhhh e thử áp dụng, sau một thời gian cho a xin KQ của phương pháp này nhen, code có tốt hơn hk? hiệu quả hơn hk? 🙂
hay qua anh oi
hehe cảm ơn em nhiều nhé Moon ơi 😍
Anh day hay lắm, mà e khoái nhất mấy cái dzụ phím tắt với auto import trong vs code , bữa giờ xài lâu lâu rồi mà không biết
khà khà ngon lành Van ơi!!! 😍 Code theo anh cái series này là em thấy được những phím tắt mà anh hay dùng luôn òi á hehee
Phần React Hooks anh giảng ở trên ytb chi tiết hơn cả trên Udemy nữa, em học trên udemy xong ra ngoài này xem nữa ^^ Giờ mới biết anh lưu vào local storage, xem ở udemy thấy anh reload vẫn giữ lại giá trị mà anh không nói lưu ở đâu
hahaa cảm ơn em, đúng òi phần hooks trên Udemy a nhớ là có recommend mn qua RUclips coi cho đầy đủ hen hehe, tại copy qua Udemy hơi kì hihi
hay quá anh ơi
hihi cảm ơn em, e đã code thử được chưa? Có bugs gì không Dũng? 🙂
@@EasyFrontend dạ ngon lành cành đào anh ạ :v cảm ơn anh nhiều
Dung Duong hehe quá đẹp nè, nếu có gì chưa rõ thì thoải mái trao đổi vs a nha 👍
cảm ơn a
Hay quá hehe
hihi cảm ơn Hiệp nhé. Bạn có code theo được hk Hiệp? 🙂
@@EasyFrontend video của anh rất hữu ích ạ, em cx chỉ mới bắt đầu học reactjs, anh nói rất dễ hiểu keke
Hiệp Nguyễn Văn hehee cảm ơn e nha Hiệp hehee, có gì hk rõ thì cứ trao đổi thêm vs a nha hehee
@@EasyFrontend Dạ vâng anh ơi hehe
Xem video của a có ngày lên master
haha lên được thì lên luôn Hiếu ơi 😍
đã click vào quảng cáo. Cảm ơn a nha
Yeahhhh cảm ơn em nhé Sang ơi 😍
thanks a rat nhieu
Yeahhh cảm ơn em nhiều nhé Ninja hehe 😍
cảm ơn a ạ
hihi cảm ơn em nhé Nam. E có code theo video được hk Nam?
@@EasyFrontend dạ e có ạ
hay qua a oi
hehe cảm ơn em nhé Dũng 🥰
Hi a Hậu cho em hỏi LocalStorage hiện tại 2022 trong react có hỗ trợ nữa không ạ. Em làm như video nhưng LocalStorage trong VScode lại báo error: 'LocalStorage' is not defined.eslintno-undef
hi Sang, em để ý là localStorage nhen, viết đúng hoa thường nha Sang
@@EasyFrontend aw cám ơn a, em mới vừa để ý.
Hi bạn, video rất hữu ích cho mình, thank bạn nhiều ! Cũng cho mình hỏi là nên sử dụng kiểu file style external là .sass hay là .scss tối ưu hơn ? Thanks
hi Lau ơi, mình thì chỉ toàn dùng SCSS nè, còn SASS thì mình chưa thấy sử dụng trong dự án hihi, đơn giản vì viết đc như CSS, copy qua lại cũng dễ, còn compile thì sass hay scss gì cũng compile đc nên hk sao nhé Lau 😉
@@EasyFrontend ok bạn, mình đã hiểu, thanks bạn nha
tks anh nhé
hihi cảm ơn em nhiều nhé Quang ❤️
Chào a! Thanks a ạ! A chia sẻ rất hay. A cho e hỏi là sao a dùng const cho tất cả các biến vậy a. Theo e được biết thì const dùng cho hằng số và mình k update dc giá trị mà a! Thanks á
Sang Nguyễn hi Sang, cảm ơn em nhiều nhé. 😍
Mình dùng const khi nó là:
- Hằng số
- Hoặc em ko muốn thay đổi nó.
Điều này nó giúp em đảm bảo được giá trị em tạo ra ko bị mutate lung tung nè.
Còn let em dùng khi nào có nhu cầu thay đổi giá trị thôi nhé 😉 Khi em dùng let mà ko có thay đổi giá trị thì sẽ thấy warning là nên chuyển sang cónt hehe
Easy Frontend sao e vẫn thấy a set lại giá trị của nó khi dùng const mà a. E vẫn chưa hiểu lắm a à
@@SangNguyen-gq7wq hmm cụ thể là code chỗ nào, em ghi ra luôn giúp anh được ko? 🙂
Awesome video !!!!!
Glad you enjoyed it ❤️
Anh cho em hỏi ngoài lề tí. Em muốn mỗi lần mình click thì sẽ cho thg random đó vào cái Set() để khi click thì nó sẽ không lặp lại màu á anh. Nhưng mà em add thì nó chỉ thêm được 1 giá trị. Là do useState nó render mỗi lần mình click đúng không a
hi Tuấn, cái này lâu quá anh hk nhớ rõ nữa
có gì em share codesandbox qua messenger a xem thử sau hen
Em đã coi phần useEffect của thấy, nhưng không biết là làm thế nào sử dụng useEffect để lưu lại màu khi reload lại trinh duyệt? Thầy có thể gợi ý cho em tí không ạ
hi Thọ, em có thể lưu xuống local storage nha, rồi khi reload, lúc khởi tạo em lấy value từ local storage lên nha
Nay tiếng hơi nhỏ thì phải :D vẫn hay
Khải Lâm Yeah đúng òi á Lâm, hình như đợt này cái mic nó hơi nhỏ, a sẽ chú ý ở video sau hihi Em code theo được chưa Lâm? Có dễ theo dõi hk? 🙂
@@EasyFrontend dễ hiểu mà anh, đúng phần em đang cần học, mong video ra nhiều để em đỡ khổ hehe
Khải Lâm hehe cảm ơn e Lâm, a vẫn đang làm tiếp nè hehee
A ơi cho em hỏi. Khi nào dùng .JS và khi nào dùng .JSX vậy ạ
hi em, với code trong reactjs thì em dùng .js hay .jsx đều được nhé
js: ý nghĩa là file javascript
jsx: ý nghĩa là jsx
Mà trong react của mình, một component nó return về jsx, nên jsx dùng nó sẽ chính xác và hợp lý hơn là js.
Nên anh khuyến khích dùng jsx nhé! 🙂
Nhưng nếu em vẫn xài js thì nó vẫn okie hen.
ban lam video react query di ban
yeah mình có dự định làm react-query, cơ mà bận quá mình chưa làm đc á hihi
Anh ơi em có cài cái extension Reacjs code snippets rồi nhưg khi ấn rsfp rồi tab nó ko ra sẵn components được anh ạ
à cái này anh hk rõ òi, chắc em thử restart vscode xem sao em nhen
Hi anh! em có một project tạo cách đây gần 2 tháng check file src/index không có React.StrictMode mà sao khi click button add to cart vẫn add 2 lần anh nhỉ?
Rất mong nhận được reply của anh. Logic code khi add thì chắc chắn không sai ạ
Thi thoảng mới có bug này chứ không phải lần click nào cũng add 2 lần ạ
hi Tuyền, trong trường hợp này thì chỉ có một cách duy nhất anh phải kiếm tra logic của em thôi à.
Nếu được, em ping anh bên Facebook, rồi share cho anh cách em xử lý nút add nha.
Để xem a có thấy được gì lạ không nha Tuyền? 🙂
@@EasyFrontend Dạ tốt quá anh ạ. Anh check inbox fb nha anh
yêu màu hồng à anh giai ơi.
hahaaa à màu này là màu huyền thoại trong khoá học FE của mình, vì cái design là toàn màu này, nên xài riết quen tay ko để ý đó Dũng =))) Bạn có ghét màu hồng hk Dũng? 🙂
@@EasyFrontend cứ anh thích là em theo anh luôn à.😁😁😁.serie này bao nhiêu bài ạ anh.
Anh cho em hỏi giá trị trong biến const không thể thay đổi, tại sao color vẫn có thể thay đổi nhỉ, em chưa hiểu rõ chỗ này.
hehe câu hỏi hay nè, mà An ơi, em để ý là mình ko thể thay đổi color trực tiếp được (tại const mà), nhưng em có thể thay đổi bằng cách gọi ông thần setColor(), rồi khi gọi ổng sẽ tự update bên dưới và trả về một cái color mới cho em hen 😉
Tức là ở component, color là const, nên ko thay đổi được.
Nhưng bên trong hook useState() nó là cái có thể thay đổi được, và khi cần nó sẽ thay đổi hen 😉
Thanks a
Tks a
hehe thanks e Trọng. ❤️
Cho hỏi có cần khai báo propTypes không vậy bác ơi ? Mình thấy code có propTypes vẫn chạy và ko có vẫn chạy, không biết mục đích khai báo là làm gì nhỉ ?
Yeah một câu hỏi hay nè bạn Tuyền.
1. Bạn nên dùng PropTypes nhé.
2. Nó giúp mình kiểm tra loại dữ liệu truyền vào của props có đúng như mình khai báo hay ko? Từ đó phát hiện bugs sớm mà fix dưới local.
3. Ko có PropTypes code vẫn chạy bình thường nhưng tìm ẩn bugs có thể xảy ra, dĩ nhiên PropTypes ko giúp được hoàn toàn ko có bugs, nhưng ít nhất những trường hợp truyền nhầm loại dữ liệu thì cũng đỡ được phần nào hehe.
4. Nó giúp mình biết component có những props gì. Tưởng tượng bạn mới vào một team, đọc code một component, làm sao bạn biết component đó có những props gì? Đọc hết code của component đó chăng? Yess, phải vậy đó, nên sẽ mất thời gian, nên nếu có khai báo thì chỉ cần nhìn vào là biết ngay. Quá khoẻ đúng ko nào? 🙂
Giờ thì bạn thấy nên dùng PropTypes chưa? 😉
4:05 sao a ko viết hoa chữ "I" đầu thành "Index.jsx" mà là "index.jsx" zậy a, e chỉ thấy a viết ColorBox.scss thui á, ko biết nó có chuẩn đặt tên file nào ko :v
hi em, index.* là một loại default entry nè.
index.html -> default file của trình duyệt, khi vào một cái đường dẫn, nó sẽ auto đi tìm file index.html để hiển thị lên.
index.js, index.ts, index.tsx --> file mặc định của folder hiện tại
chứ mình ko có dùng Index (viết hoa chữ cái I nha)
anh có biết sr hướng dẫn học react nào giống như 100 ngày code angular của anh Tiêp trân không ạ. chỉ em với.
hi em, hiện thì anh hk có biết nè e ơi 🙂
em không dùng được scss. bị lỗi này( Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. ). ai giúp em với ạ. đọc trên stackoverflow nhưng làm theo không dc
hi Trung ơi, do CRA chỉ tương thích với node-sass v4 nè hehe, em chạy lệnh này giúp anh nha: npm install node-sass@^4
a ơi , cho e hỏi cái extension nào hỗ trợ autop import vậy ạ?
Mong a trả lời ạ
hi Huy, cái auto import thì vscode bản thân nó có rồi nè.
Nhưng nếu nó ko works, em thử cái ext này xem marketplace.visualstudio.com/items?itemName=NuclleaR.vscode-extension-auto-import
Hoặc em thử thế này.
Nếu muôn import B vào A.
Thì hãy mở file B lên khoảng 3s.
Sau đó quay lại A, gõ thử xem nó có suggestion auto import ko nhen hehe
@@EasyFrontend tks a ạ
❤️
❤️ cảm ơn bạn nhiều nhé!
Cho mình xin hỏi, bạn có học được gì mới từ video hk nhỉ? 🙂
@@EasyFrontend hì..dạ e làm React lâu rồi ạ..nhưng vẫn thích xem video ủng hộ a.
Nhiệt tình và khá chất lượng ạ !!! ❤️
Văn Nguyễn Trời!!! Mình quá may mắn. Cảm ơn bạn đã ủng hộ mình nhiệt tình nhen, hi vọng các videos của mình hữu ích để bù đắp lại sự ủng hộ của mn nè hihi ❤️
Hi anh! Vì sao initialColor luôn thay đổi mà để vào callback function thì nó chỉ console ra 1 lần thôi vậy anh?
à vì callback fn trong useState chỉ chạy 1 lần đầu em nha
@@EasyFrontend Em cảm ơn nhé
Anh ơi cho em hỏi . sao em đổi đuôi file App , colorBox sang js mà nó vẫn chạy bình thường thế
à đuôi file nào nó cũng chạy đc em nhen, js hay jsx đều okie em nha
2 cái đuôi file này có khác nhau điểm nào ko anh . trước giờ em toàn để đuôi js nhưng chỗ e chuẩn bị thực tập dùng jsx .
@@EasyFrontend vs cả cái vscode của em ko tự động fortmat code trong đuôi file . jsx
âm thanh của video này hơi nhỏ so với những video trước a ơi
à okie em nhen, sr em, hùi đó làm videos chưa có kinh nghiệm nên hơi failed tí hihi
anh có thể cho em hỏi cách nào mình lấy đc tên màu và in ra giữa cái box màu tương ứng k ạ ?
hi Đức, em để ý là mình có một cái state color, em có thể dùng cái state để hiển thị lên nhen.
Ví dụ: Em thêm một thẻ p bên trong thẻ div.color-box, với nội dung là cái text color hen.
{color}
Dạng thế này nha Đức 😉
@@EasyFrontend ồ e thanks 😂
anh ơi - làm về Optimizing Performance ReactJS đi anh..
hehe cái này thì chỉ có một số case đb, render hơi nặng mới cần optimize thôi nè, hmm hơi advanced tí, em có đang gặp case nào bị hk em hen?
Nếu mỗi component mình đều code file css rồi import thì nó có ảnh hưởng đến tốc độ load trang không ạ ?
hi Bình, theo mình thì nó ko ảnh hưởng nhé, thẩm chí nó còn nhanh hơn là gộp.
Ví dụ bạn viết styles vào hết 1 file, như vậy khi load trang bạn phải load nguyên cái file css bự đó, mà thực sự bạn chỉ cần 1/10 cái file đó là đủ.
Còn trường hợp bạn chia theo component, thì rõ ràng cái component xài thì nó mới load cái css tương ứng lên. Nên ban đầu nó ko cần load hết một nùi css, mà chỉ load những cái cần xài. Như vậy sẽ tốt hơn nè 🙂
@@EasyFrontend ôi anh cảm ơn anh nhiều ạ. Em thích cách dạy của anh tỉ mỉ ở chi tiết nhỏ giúp newbie như em có đc tips hay.
Ở chỗ *Math.trunc()* thì em sử dụng *Math.floor()* có được không ạ?
à được nhé Trì ơi, nhưng em nhớ phân biệt rõ giúp anh là 2 hàm này có chức năng khác nhau nhen 😉
em có sử dụng 2 useState() cho 2 component khác nhau, nhưng khi chạy lại có lỗi 'props is not iterable'. A có thể giải thích cho e về lỗi này đc ko ạ? e cảm ơn
à nó báo lỗi vậy tức em dùng hàm của array trong khi props đó ko phải kiểu dữ liệu array em nha 😉
@@EasyFrontend em cảm ơn a em fix đc r ạ
e mới từ class qua, cho e hỏi là index.jsx khác gì tạo index.js v anh ?
hi em, à cơ bản nó chỉ khác cái extension thôi nè 😉
Tại component nó là jsx nên mình dùng .jsx cho nó chính xác, còn js thì nó vẫn chạy được nha 🙂
à ra thế, coi video của a hiễu dc 1 đống thứ về react mà trc giờ chưa biết kakaka, tks a nhiều
Chau Minh hahaa ngon lành, a rất vui vì điều đó, học tốt nha em! 🙂
anh ơi cho em hỏi tại sao các file components anh lại để đuổi jsx ạ ?
Hi Hoàng, cơ bản thì js hay jsx gì nó cũng chạy.
Mà anh thì prefer xài jsx, vì cơ bản component nó sử dụng syntax của jsx nè. 🙂
@@EasyFrontend em cảm ơn ạ
cái auto import của e nó ko hiện thì phải làm sao vậy a???
à thỉnh thoảng a cũng bị hehe, một là import tay, hai là em restart vscode xem đc ko nhé 😉
Anh ơi em hơi thắc mắc rằng vì sao anh sử dụng Math.trunc thay vì dùng Math.floor hoặc parseInt vậy anh. Em vẫn chưa hiểu rõ lắm sự khác biệt giữa những hàm này
Mạnh Cường hi Cường, vậy đầu tiên em search google giúp anh để biết mỗi hàm nó làm gì trước nha, sau đó e sẽ tự so sánh được nè 😉
@@EasyFrontend dạ vâng anh
kiếm cái tai nghe xịn xò thu âm cho rõ a ạ . em thấy hơi bé
Yeah cảm ơn em nhé Xuân, anh có bị một vài video âm thanh ko tốt 🙂 Anh có cố gắng khắc phục ở mấy videos sau, với anh cũng order cái micro cài áo luôn òi, hi vọng các videos sau này sẽ tốt hơn. Cảm ơn em đã cho anh biết nhé Xuân 😍
@@EasyFrontend tuyệt vời a ơi :)
lamf sao hiện đc các option terminal v a?
à cái anh đang dùng là zsh, cài thêm zsh theme là sẽ có em nha.
theme anh đang dùng là powerline10k 🙂
github.com/romkatv/powerlevel10k
@@EasyFrontend e có cài theo video của a nhưng chỉ đc trong terminal của ubuntu à, còn của vscode thì mình lm sao a
@@mersy4405 à vậy em tìm cách set font family cho terminal của vscode nữa em nha, a quên mất cái link òi hehe
sao tool của em không có gợi ý import vậy anh
à vscode thỉnh thoảng nó hơi lag lag á em, hông chịu gợi ý hihi
đuôi file .js khác gì với .jsx ạ
à nó chỉ là loại file thôi em nha. Em dùng cái nào cũng được, nhưng khuyến khích dùng jsx cho component và js cho non-component nha Huy
@@EasyFrontend dạ cảm ơn anh nhiều ^^
em ko dùng đc setitem với getitem anh ơi , ko hiểu bị sao nua
Nó có báo lỗi gì ko e hen?
@@EasyFrontend ko lỗi gì cả anh , anh có bao giờ gặp trường hợp ko dùng đc các lệnh react , js do máy tính của mình chưa .
bạn em nó cũng đi làm rồi nó bảo do máy em nó bị làm sao chứ máy nó vẫn dùng đc đoạn code đấy bt
mặc dù em đã cài lại win , cài lại VS CODE , extendsion node js
cho em hỏi sao cái useState nó không tự import được như anh nhỉ?
Chào bạn, bạn gõ chậm chậm thử nhen, vì có thể máy nó load chậm nên chưa hiển thị kịp nè. Hoặc sau khi gõ xong, dùng Ctrl + Space để nó gợi ý import nhen 🙂
Vì sao sử dụng strict mode nó lại render UI ra 2 lần vậy ạ
à dem đọc cái comment này nhé :)
github.com/facebook/react/issues/15074#issuecomment-471197572
Anh có nhận đệ tử không anh ơi ^^
haha hk dám em ơi =))))
Em thấy anh copy đc cả cái icon vào html, a làm cách nào vậy ạ?
hi Công, em chỉ cần copy emoji rồi paste zô thôi nhen, còn trên MacOS nó có thể mở emoji lên và chèn trực tiếp vào được nè 😉
@@EasyFrontend em cảm ơn ạ
video này âm lượng hơi nhỏ ạ
hihi cảm ơn em nha, sr em, hùi trước làm thiếu kinh nghiệm trong mảng âm thanh ánh sáng, giờ đỡ rồi nè hihi
xem bài 7 rồi mà chưa cmt bài 3 :D
lol fan cứng, điểm danh từng bài luôn hở Hồ ? =)))
sao file lại là jsx ko phải js vậy ạ
hi Hoàng, cơ bản thì cái nào cũng đc em nhen. Nhưng anh prefer jsx em nhé, vì reactjs sử dụng jsx syntax em nhen 😉 còn file logic thì dùng js hehe
@@EasyFrontend dạ em đang cày mấy cái video của anh xong hooks rồi em qua redux ạ
@@lou_hoang4719 okie em nhen hihi 😉
Uncaught TypeError: Failed to execute 'getItem' on 'Storage': 1 argument required, but only 0 present .Em bị lỗi này khi làm theo video của a ở chỗ localstorage.getItem . Console vẫn ra kết quả như của a ạ . E có tìm trên stackoverflows nhưng k hiểu ạ
hi em, cái này có vẻ em quên truyền tham số cho hàm, em kiểm tra lại code giúp anh nha