Cộng đồng Upskills
Upskills
upskills.dev
Tham gia cộng đồng Discord để được hỗ trợ về các bài hướng dẫn và đặt câu hỏi.
Vu Nguyen
@nphivu414
Theo dõi tôi trên X để nhận cập nhật và tin tức mới nhất về Upskills.
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 trang profile, hãy thiết lập project của chúng ta:
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ờ bạn có thể mở file src/pages/index.tsx và bắt đầu xây dựng trang profile.
Section 1: Thiết lập và khởi tạo dự án React mới với HeroUI
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
Về tác giả
NAB, Software Engineer
Hi, I'm Vu, a Software Engineer at NAB (National Australia Bank) with a love for creating web and mobile apps that don't just look cool but feel great to use. I've had the chance to work with some awesome companies over the years, picking up new tricks and tackling many kinds of challenges along the way.
Now, I'm thrilled to share what I've learned and help others through fun, interactive coding tutorials!
git clone https://github.com/upskillsdev/starter-app.git
cd starter-app && yarn install
yarn dev