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
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:
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ả
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.
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.
Chúng tôi tôn trọng quyền riêng tư. Hủy đăng ký bất cứ lúc nào.
git clone https://github.com/upskillsdev/starter-app.git
cd starter-app && pnpm install
pnpm dev