Cài đặt và cấu hình Router | Xây dựng cơ chế tải Layout cho dự án Tiktok Clone
HTML-код
- Опубликовано: 6 фев 2025
- 👉 Xem Lộ Trình Học: fullstack.edu....
👉 Đăng Ký Học Offline Tại F8: short.f8team.d...
Video này sẽ mang tới cho các bạn hướng dẫn cài đặt và cấu hình Router | Xây dựng cơ chế tải Layout cho dự án Tiktok Clone
#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....
Xây dựng giao diện với HTML, CSS: fullstack.edu....
Xây dựng web responsive: fullstack.edu....
Lập trình Javascript cơ bản: fullstack.edu....
Lập trình Javascript nâng cao: fullstack.edu....
Làm việc với Terminal & Ubuntu: fullstack.edu....
Xây Dựng Website với ReactJS: fullstack.edu....
Xây dựng web với Node & Express: fullstack.edu....
HTML, CSS tips: fullstack.edu....
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu....
Xem thêm tại: fullstack.edu....
-------------------------------------
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.
Ai mà học code từ đầu với bạn này thì chỉ có chuẩn chỉ
1:13 - Phân tích Layout trang Tiktok
4:06 - Cài đặt thư viện react-router-dom
9:45 - Đưa cấu hình router ra ngoài
15:44 - Xây dựng cơ chế tải Layout
nhìn phần setup router mới thấy được sức mạnh của việc chắc phần base + tư duy giải quyết.
em vừa tự làm xong phần router xong h xem video mới thấy cách cấu hình của anh quyết đỉnh quá :)
Em xem song video này . Em cảm giác em tự tăng level 1 cách chóng mặt 😍😍😍 . Cũng ngờ ngợ 1 chút về cách người ta tạo ra next và nuxt js
Hay quá a ơi, em đang tìm hiểu cách cấu hình router thì a ra video luôn ❤️
Cảm ơn em nhé
Video này đỉnh thật, tiết là em xem muộn
Hay quá anh ơi
Hướng dẫn của anh rất hay. Cho em hỏi sao em bấm ctrl + D thì lại tạo thêm dòng mới chứ ko sửa nhiều chỗ cùng lúc được. Xin a hướng dẫn
E đau đầu cái này bao hôm nay , cảm ơn a, chi tiết quá mong có khóa reactjs pro và nextjs
Thank anh, ước gì ngày anh ra 2 video 🤣
Yêu anh Sơn
Khi nào anh làm tiếp khóa NodeJS & ExpressJS vậy anh?
Tôi cũng đang hóng
Compiled with problems:X
ERROR
[eslint]
src\components\DefaultLayout\index.jsx
Line 5:26: 'children' is missing in props validation react/prop-types
Search for the keywords to learn more about each error.
Mình bị lỗi này, mọi người ai biết chỉ mình với
hi anh Sơn, how are you :). Anh ơi cho e hỏi cấu hình routes ngoài thế này làm sao mình dùng function lazy của react ạ ?
A có thể nói trc các công nghệ cho dự án tiktok này để e đọc doc trc cho đỡ bỡ ngỡ ạ😁
a có thể làm thêm 1 video về sử dụng private router 1 cách tối ưu và thêm trang 404 not found thì tốt quá
để làm trang admin cũng như những trang cần login
có thể a làm việc quen nên ko sao chứ như em làm theo anh 1 hồi 1 đống file index.js lú hết cả ng =))
thế setup router đối với Route có param truyền vào thì như nào ạ ?
anh sơn ơi, em thêm phần này vào khi chạy npm start web load 30p chưa vào được nữa, anh chỉ em fix với ạ
import styles from "./Header.module.scss";
import classNames from "classnames/bind";
const cx = classNames.bind(styles);
function Header() {
return ;
}
export default Header;
Em cũng tạo folder routes và import giống anh nhưng nó báo lỗi module not found là sao anh nhỉ, em có thử dùng ../ thay cho ~/ thì dùng được trong khi trước đó em cũng đã cấu hình babel plugin
Quả setup project base này hay quá anh Sơn.
Mà đoạn chỗ [27:24], thay vì để là null sao a không để luôn là Fragment cho thuộc tính layout, như vậy là giải quyết được vấn đề
Để luôn là Fragment thì ko mang ý nghĩa về mặt đọc code em, đọc là null nghĩa là ko có, chứ đọc là fragment thì nó ko thể hiện đc ý nghĩa của việc ko có layout em nhé
@@F8VNOfficial nhưng e thấy nó được về mặt ý nghĩa nhưng đoạn xử lý logic & điều kiện lại phức tạp và rối hơn í anh.
Mà mình làm thế nào để logic clear nhất có thể thì code mới dễ đọc hơn đúng không ạ
@@juhandvan mình không đồng ý với ý kiến của bạn, xét về mặt code theo bạn thì dễ hiểu hơn nhưng đối với mình cái nào cũng như nhau (code clean dài đến mấy cũng dễ đọc ), và giống như anh Sơn nói, nếu bạn dùng Fragment làm layout, khi người mới đọc vào họ sẽ cần load 2 lần họ mới hiểu được ý nghĩa của đoạn đó
anh tạo ra 2 cái layout là Header vậy nếu có chỉnh sửa gì ở header thì mình phải chỉnh sửa lại 2 lần hả anh nếu có nhiều các layout riêng thì có cách nào tối ưu hơn không ạ.
Em ơi ở phút thứ mấy em nhỉ, chỉ giúp anh để anh coi lại với nha
@@F8VNOfficial dạ anh ơi em nhầm đoạn cuối anh fix chỗ đó rồi, cái đúp liên kết á anh
hay qua
e gõ ffc nó không gợi ý cho e, mn giúp e với
cái private thì xử lý ntn vậy a?
Cùng câu hỏi với bạn
Cái đoạn pages có nên export ra để import cho gọn như phần layout k a zai 😙😙
Ko cần em nha, vì pages/Home nó import nhìn vẫn rõ ràng và clean nhé. Còn nếu em export ra qua file index thì vẫn ok nhé
giả xử em nhập 1 cái đường dẫn bậy nó phải ra 404 thì làm như nào ạ
Đến đoạn xây dựng cơ chế tải Layout là bị báo lỗi. Bác nào bị giống e không
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at index.js:7.
at DefaultLayout (localhost:3000/static/js/bundle.js:281:3)
at RenderedRoute (localhost:3000/static/js/bundle.js:40019:5)
at Routes (localhost:3000/static/js/bundle.js:40651:5)
at div
at Router (localhost:3000/static/js/bundle.js:40589:15)
at BrowserRouter (localhost:3000/static/js/bundle.js:38690:5)
at App
at GlobalStyles (localhost:3000/static/js/bundle.js:127:3)
printWarning @ react-jsx-dev-runtime.development.js:87
error @ react-jsx-dev-runtime.development.js:61
jsxWithValidation @ react-jsx-dev-runtime.development.js:1244
DefaultLayout @ index.js:6
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-jsx-dev-runtime.development.js:87 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
có bác
E nghĩ là còn thiếu 1 cái page 404 :))
const Layout = route.layout === null ? React.Fragment : route.layout || DefaultLayout;