Build User Profile Page với React, Tailwind và HeroUI
Bài hướng dẫn này đưa bạn qua quy trình tạo trang user profile sử dụng React và HeroUI. Bạn sẽ học cách build các reusable components để hiển thị user information, implement featured photo carousel, và hiển thị user posts và photos. Khi hoàn thành, bạn sẽ có một profile page fully functional, sử dụng best practices trong React development và UI design.
Yêu cầu
- Kiến thức cơ bản về React và TypeScript
- Quen thuộc với modern JavaScript concepts (ES6+)
- Hiểu biết về component-based architecture trong React
- Kiến thức cơ bản về CSS và Tailwind
- Có kinh nghiệm với package managers (npm, yarn, pnpm,...) và command line
- Hiểu biết cơ bản về state management trong React
- Kinh nghiệm với HeroUI hoặc component libraries tương tự sẽ hữu ích nhưng không bắt buộc
Nội dung bài hướng dẫn
8 phần • khoảng 2 giờ
Trước khi bắt đầu code, hãy thiết lập project của bạn.
-
Yêu cầu: Đảm bảo bạn đã cài đặt Node.js, pnpm (hoặc npm) và git trên máy.
-
Clone starter repo — một project React + HeroUI tối giản với mọi thứ đã được cấu hình sẵn để bạn có thể bắt tay vào code ngay:
- Cài đặt dependencies và khởi động dev server:
Bạn sẽ thấy màn hình khởi động tại http://localhost:5173/ trong trình duyệt.
Bây giờ hãy mở file src/pages/index.tsx và bắt đầu xây dựng trang profile theo các phần bên dưới.
How the starter project structure will look like:
├── public ├── src # Core source code of the application │ ├── components # Reusable UI elements │ ├── config # Configuration files of the application │ ├── hooks # Custom React hooks for shared logic │ ├── layouts # Page layouts or templates │ ├── pages # Individual pages of the application │ ├── styles # Global or component-specific styles │ ├── types # TypeScript type definitions │ ├── App.tsx # Root component of the application │ ├── main.tsx # Entry point of the application │ ├── provider.tsx # HeroUI Provider component │ ├── vite-env.d.ts # TypeScript declarations for Vite env variables ├── ...other files
Chia sẻ với mọi người
Về tác giả
Nguyễn Phi Vũ
NAB, Lead Engineer
Mình là Vũ, hiện là Lead Engineer ở NAB (National Australia Bank). Mình bắt đầu ở mảng Home Lending, giờ đang lead một team làm sản phẩm cho HICAPS, dịch vụ point-of-sale claiming bảo hiểm sức khỏe tư nhân lớn nhất ở Úc. Trước NAB, mình từng làm ở các startup và nhiều team khác với đa dạng stack.
Upskills là nơi mình chia sẻ những kiến thức thực tế từ công việc, để giúp bạn build và ship dự án tốt hơn. Ngoài tutorial, sắp tới sẽ có thêm nhiều nội dung: project showcase, interview prep, và các AI tool, như những resource cho hành trình học của bạn. Mình rất vui được chia sẻ những kiến thức và kinh nghiệm đã học được trong suốt quá trình làm việc, và có thể chia sẻ thêm nhiều điều thú vị cùng nhau khi chúng ta tiếp tục build những thứ hay ho.
Hy vọng bạn thấy Build User Profile Page với React, Tailwind và HeroUI hữu ích. Nhận bài tiếp theo qua email nhé?
Các bài deep-dive về web development thực tế, một đến hai tuần một số, viết bởi engineer thực sự có kinh nghiệm build sản phẩm. Không sáo rỗng, không câu view.
- Ví dụ thực tế, dùng được trong production
- Không bao giờ spam
- Hủy đăng ký chỉ với một click
Chúng tôi tôn trọng quyền riêng tư. Hủy đăng ký bất cứ lúc nào.