8. Cài đặt và sử dụng Material UI (Emotion, Fonts, Icons…vv) | ReactJS + Material UI | TrungQuanDev
#trungquandev #reactjs #nodejs #mongodb
➡️ Video của ngày hôm nay mình và các bạn sẽ cùng nhau triển khai Material UI vào trong con dự án ReactJS mà chúng ta đã tạo từ Vite nhé. Video này ngoài việc cài đặt ra thì mình cũng có giải thích đầy đủ về Emotion và Default Styled Components của thằng MUI, cũng như cấu hình Fonts và Icons sẵn luôn cho con project của chúng ta nhé.
🍀 Download toàn bộ Source Code khoá này nếu bạn muốn: 🤝
---
👉 Đầu tiên cần làm rõ một điều: “Mình Không Bán Source Code”.
👉 Bộ code này dành cho các bạn đang học khóa MERN Stack Pro miễn phí trên kênh và đồng thời muốn kết hợp tham khảo code từ mình.
👉 Hoặc đơn giản hơn là bạn hiểu được công sức mà mình đã bỏ ra nên bạn muốn donate ủng hộ mình 1 hoặc 2 ly cà phê nhỏ.
👉 Đây là một bộ Source Code giá trị "Như Đi Làm Thực Tế" và "Cực Kì Chất Lượng". Chứ không phải mấy kiểu dạy code Cơ Bản Basic linh tinh không áp dụng gì nhiều vào thực tế như nhiều nơi khác.
👉 Có rất nhiều bạn đã học và để lại Comment - Feedback dưới mọi video trong khóa MERN Stack Pro này rồi, bạn hãy xem là sẽ hiểu ngay nhé.
---
🍀 Download Full Source Code for this Course here and support me: 🤝
• 🎁 on Ko-fi: ko-fi.com/s/e41c325ca4
• 🎁 on Buy Me a Coffee: www.buymeacoffee.com/codetq/e...
👉 Video hướng dẫn Install Source Code: • Hướng dẫn cài đặt đầy ...
---
🌱 Tham gia hội viên kênh để ủng hộ mình nhé! Cảm ơn bạn 💌 : www.youtube.com/@trungquandev...
🌐 Full Playlist của khoá MERN Stack Pro này: • [FULL STACK] MERN PRO ...
🌐 Trang Landing Page giới thiệu chính thức của toàn khóa (Pro + Advanced): trungquandev.com/khoa-hoc-lap...
🌳 Một kênh khác từ mình, chủ yếu tiếng Anh, luyện skill bằng cách code những project thú vị: / @code-tq
---
🎤 Mình trên các nền tảng Podcasts:
🎵 Spotify: podcasters.spotify.com/pod/sh...
🎵 Apple: podcasts.apple.com/vn/channel...
🎵 Castbox: castbox.fm/ch/5746721
---
👋🏼 Join những cộng đồng lập trình văn minh lịch sự dưới đây nhé:
🔗 Discord: Cộng Đồng Lập Trình Việt Nam 🇻🇳 : / discord
🔗 Page: TrungQuanDev - Một lập trình viên: / trungquandev
🔗 Group: Cộng đồng Lập Trình Web • Front-end & Back-end Việt Nam: / laptrinhwebvietnam
🔗 Blog: trungquandev.com
🔗 CV: cv.trungquandev.com
---
🎒 Danh sách một vài món đồ trong góc làm việc của mình:
🌐 Bàn phím cơ Meletrix Zoom75: shope.ee/4AZxyEgM1T
🌐 Switch WS Morandi: shope.ee/7f9gHaQlnN
🌐 Máy ảnh & Quay phim Sony ZV-1: shope.ee/409eX1GvD8
---
📝 Video Chapters - nội dung chi tiết:
00:00 Giới thiệu
01:49 Nội dung học phần hiện tại
02:02 Cài đặt Material UI vào dự án React
03:18 Hiểu về 2 thứ: Emotion và Styled-Components
06:22 Lưu ý cài đặt thư viện chuẩn Version (Quan Trọng)
09:47 Cấu hình chuẩn Fonts cho trang web
18:45 Sử dụng Material Icons
---
📝 Link tài liệu liên quan để các bạn tham khảo mà trong video mình có sử dụng đến:
- mui/styled-engine
mui.com/material-ui/guides/st...
- Lựa chọn fonts của google ở đây:
fonts.google.com/
- Google Material Web Icons
mui.com/material-ui/icons/
fonts.google.com/icons?icon.s...
📝 Một số lệnh cài thư viện của video hôm nay để các bạn copy cho tiện nhé:
yarn add @mui/material@^5.13.0
yarn add @emotion/react@^11.11.0
yarn add @emotion/styled@^11.11.0
yarn add @mui/icons-material@^5.11.16
---
| 💻 ☕️ TRUNGQUANDEV - MỘT LẬP TRÌNH VIÊN 💝 |
Пікірлер: 31
🔔Note: Nếu bạn nào cài cái đám icons bằng yarn giống mình nhưng lỗi network thì chuyển qua npm nhé, cụ thể: +++ Thay vì yarn add @mui/icons-material@^5.11.16 +++ Thì dùng npm install @mui/icons-material@^5.11.16 - Các bạn xem video và nếu hứng thú thì có thể join Discord hoặc group Facebook của mình để cùng nhau chia sẻ thêm nhiều kiến thức bổ ích nhé: 🍀 🔗Discord: Kiến Thức Lập Trình: discord.gg/ycSbhP6gDu 🔗Fanpage: Trung Quân DEV: facebook.com/trungquandev 🔗Group: Cộng đồng Lập Trình Web • Front-end & Back-end Việt Nam: facebook.com/groups/laptrinhwebvietnam
nice video, keep going!
Hay quá anh!
bài này vẫn phải push lên github luôn đúng không anh, mình làm giống các bước như các video trước hay để sau mới push vậy ạk
@trungquandev
6 ай бұрын
Em nên tập thói quen là trước khi bắt đầu bài học thì checkout sang branch mới và kết thúc thì push lên github tạo pull request rồi merge code vào nhánh chính nhé. Đấy là thói quen tốt và về sau đi làm cũng sẽ như vậy cả. Còn trong các video của bộ này thì anh chỉ hướng dẫn làm một lần và thường xuyên nhắc các bạn tự làm chứ video nào mà anh cũng quay đoạn đó thì thừa lắm :)))
Nếu mà mình tạo 1 project mới thì mình có cần phải nhớ từng bước một set up cái gì k a tại vì e thấy nhiều quá ạ.
@trungquandev
7 ай бұрын
- Đụng tới cái gì cần thì mình cài cái đó em nhé, không cần phải học thuộc đâu :)) - Học lập trình tuyệt đối đừng giữ cái tư duy "học thuộc lòng" mà nên thực hành nhiều rồi "tự nhiên" ghi nhớ thôi. Chưa kể vấn đề điển hình là: "hôm nay cách setup một cái nó như thế này, chỉ cần ngày mai nó thay đổi version cái là cách setup lại khác rồi" - Mới video số 8 này chưa có gì là nhiều cả đâu nha, thực tế đi làm còn nhiều lắm, về sau a còn dạy nữa. Giữ tâm lý thoải mái lên.
@MinhTungHuynh04
7 ай бұрын
@@trungquandev dạ e cảm ơn a ạ trc h e làm project cứ băn khoăn vấn đề này mãi 😁
Anh ơi, hướng dẫn cài luôn bootrap với tailwind luôn đi anh.
@trungquandev
Жыл бұрын
hả em :))) Khoá này thì ae mình quẩy Material UI thôi nha. React + Taildwind thì a sẽ làm khoá khác React + Bootstrap thì dễ lắm, trước cái khoá cũ của khoá này a cũng làm rồi đó em :))
Đăng ký gấp :D
@trungquandev
6 ай бұрын
Cứ học hết được 83 video bộ này đi để có Base chuẩn chỉnh và tốt đã rồi cũng mới đăng ký học nâng cao anh dạy trực tiếp chuyên sâu hơn nha.
cho em hỏi : sao của em bên app.jsx mỗi lần ctrl+s code bị nhảy anh nhỉ
@trungquandev
17 күн бұрын
@@hoanghai9355 check lại đám vscode extension của em, kiểu gì cũng đang cài một cái nào đó auto format code. Trên kênh của anh có video về extension trong vscode rồi, em tìm trong kênh rồi cài cho chuẩn nhé.
ANTD vẫn xịn xò hơn
sao em cài package này không được nhỉ yarn add @mui/icons-material@^5.11.16. Nó cứ báo lỗi
@trungquandev
11 ай бұрын
Chụp ảnh full lỗi gửi vào trong nhóm discord nhé em ơi, lỗi mà không show là lỗi gì thì debug bằng sức mạnh tâm linh quá =)))
@nghialenguyenduy8386
11 ай бұрын
@@trungquandev Dạ em cớ gửi rồi ạ. Anh vào fix giúp em ạ. Em cảm ơn
anh cho em xin theme với icon ở vscode anh đang dùng với ạ
@trungquandev
4 ай бұрын
- Theme: Atom One Dark - Icon: vscode-icons Em cứ search trong phần extension của vscode là thấy nha.
@tinhuynh3509
4 ай бұрын
em cảm ơn @@trungquandev
@tinhuynh3509
4 ай бұрын
Theme em cài màu không đậm như của anh ạ
@trungquandev
4 ай бұрын
@@tinhuynh3509 nó còn phụ thuộc màn hình em đang dùng nữa, anh dùng màn 4k có cân chỉnh màu, xong quay màn hình nên màu nó mới được như vậy.
@tinhuynh3509
4 ай бұрын
Dạ em cảm ơn
sao cái của e nó k tự reload lại khi sửa code á a
@trungquandev
Жыл бұрын
Thế á, em clone code khởi đầu từ github của anh rồi đúng không, khả năng anh đoán là em đang chạy 1 lần con dự án rồi, xong em tắt Terminal không đúng cách, kiểu cứ nhấn nút tắt ở vscode là không được, em luôn nhớ phải cùng Ctrl+C để tắt nhé. Xong rồi anh đoán khi em chạy cái terminal mới lên, nhưng em sửa code nó đang ăn vào cái cũ, nên trang web không được load. (Lỗi này trước dạy học a gặp vài lần) Bây giờ em cứ thử restart máy tính của em xong chạy lại yarn dev ở đúng 1 terminal xem sao nhé.
@conglinhtran2816
Жыл бұрын
@@trungquandev e restart máy lại cũng k đc nữa a
@trungquandev
Жыл бұрын
@@conglinhtran2816 Nghĩa là bây giờ em sửa code, thay đổi nội dung trong code mà ngoài trình duyệt không tự động ăn theo mà phải mình tự nhấn F5 thì nó mới ăn à em?
@conglinhtran2816
Жыл бұрын
@@trungquandev e f5 cũng k ăn lun a phải yarn dev lại mới ăn lun a
@trungquandev
Жыл бұрын
@@conglinhtran2816 dị thế =)) Bình thường em tắt cái terminal đang chạy dở yarn dev bằng cách nào thế?