Setup và khởi tạo React project mới

Setup React project với TypeScript, Tailwind CSS, và HeroUI.

Tạo Flight Header Component

Tạo flight header với search criteria và navigation.

Tạo Flight Card Component

Tạo flight card hiển thị airline, giờ bay, và giá.

Tạo Flight List Component

Tạo flight list với loading và empty states.

Tạo Flight Filter Form Component

Tạo filter form cho giá, airlines, stops, và giờ bay.

Tạo Flight Filter Drawer Component

Tạo responsive filter drawer cho mobile.

Tạo Flight Sort Menu Component

Tạo sort menu cho giá, duration, và giờ bay.

Tạo Flight Options Component

Tạo preferences component cho saved searches.

Hoàn thiện Flight Booking UI

Kết hợp tất cả thành trang đặt vé hoàn chỉnh.

Vietnamese Flag

Name: Build Flight Booking UI với React, Tailwind và HeroUI
Author: Nguyễn Phi Vũ

Build Flight Booking UI với React, Tailwind và HeroUI

Nguyễn Phi VũSoftware Engineer, NAB

Bài hướng dẫn này đưa bạn qua quy trình tạo trang đặt vé máy bay sử dụng React và HeroUI. Bạn sẽ học cách build các reusable components để hiển thị flight information, implement advanced filtering và sorting functionality, và tạo responsive user interface. Khi hoàn thành, bạn sẽ có một trang đặt vé máy bay fully functional, sử dụng best practices trong React development và UI/UX design.

Yêu cầu

Kiến thức cơ bản về React và TypeScript
Quen thuộc với modern JavaScript concepts
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 hoặc yarn) và command line
Hiểu biết cơ bản về form handling 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

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, yarn (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:

git clone https://github.com/upskillsdev/starter-app.git

Cài đặt dependencies và khởi động dev server:

cd starter-app && yarn install

yarn dev

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 tìm chuyến bay 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

Build Flight Booking UI với React, Tailwind và HeroUI

Nguyễn Phi VũSoftware Engineer, NAB

Yêu cầu

Kiến thức cơ bản về React và TypeScript
Quen thuộc với modern JavaScript concepts
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 hoặc yarn) và command line
Hiểu biết cơ bản về form handling 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

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, yarn (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:

git clone https://github.com/upskillsdev/starter-app.git

Cài đặt dependencies và khởi động dev server:

cd starter-app && yarn install

yarn dev

How the starter project structure will look like:

Build Flight Booking UI với React, Tailwind và HeroUI

Phần 1: Thiết lập và khởi tạo dự án React mới với HeroUI

Phần 2: Xây dựng component Header chuyến bay

Phần 3: Xây dựng component Card chuyến bay

Phần 4: Xây dựng component Danh sách chuyến bay

Phần 5: Xây dựng component Form lọc chuyến bay

Phần 6: Xây dựng component Drawer lọc chuyến bay

Phần 7: Xây dựng component Menu sắp xếp chuyến bay

Phần 8: Xây dựng component Tùy chọn chuyến bay

Phần 9: Kết hợp tất cả lại

Nguyễn Phi Vũ

Build Flight Booking UI với React, Tailwind và HeroUI

Phần 1: Thiết lập và khởi tạo dự án React mới với HeroUI

Phần 2: Xây dựng component Header chuyến bay

Phần 3: Xây dựng component Card chuyến bay

Phần 4: Xây dựng component Danh sách chuyến bay

Phần 5: Xây dựng component Form lọc chuyến bay

Phần 6: Xây dựng component Drawer lọc chuyến bay

Phần 7: Xây dựng component Menu sắp xếp chuyến bay

Phần 8: Xây dựng component Tùy chọn chuyến bay

Phần 9: Kết hợp tất cả lại

Nguyễn Phi Vũ