Hướng dẫn xây dựng website với React và TypeScript

React và TypeScript được công nhận là hai công nghệ đột phá, mang lại khả năng mở rộng, dễ bảo trì và an toàn cho việc phát triển website. Bài viết này sẽ đưa bạn qua từng bước trong quá trình thiết lập một website đơn giản với React và TypeScript, từ khái niệm cơ bản đến thực hành cụ thể.

Tại sao lựa chọn React và TypeScript?

Việc sử dụng TypeScript trong phát triển với React ngày càng phổ biến nhờ khả năng phát hiện lỗi trong giai đoạn phát triển, giúp cho mã nguồn trở nên dễ hiểu, rõ ràng và có cấu trúc tốt hơn. Kết hợp hai công nghệ này là sự lựa chọn lý tưởng cho những nhà phát triển muốn tạo ra website và ứng dụng hiện đại, hiệu suất cao và dễ bảo trì.

Xây dựng một website mẫu: Techtopia

Chúng ta sẽ xây dựng một website cho công viên giải trí giả tưởng tên là Techtopia, nơi người dùng có thể xem các điểm tham quan, vị trí của chúng trên bản đồ, và tương tác với trang để thêm hoặc xóa các điểm tham quan.

Thiết lập dự án React

Để bắt đầu, bạn cần tạo một dự án React mới bằng cách thực hiện lệnh sau trong terminal:

npm create vite@latest reactproject --template react-ts

Sau khi hoàn tất, hãy chuyển đến thư mục dự án và khởi động server:

cd reactproject
npm run dev

Cấu trúc thư mục dự án

Dưới đây là cấu trúc cơ bản của dự án:

reactproject/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── context/
│   ├── hooks/
│   ├── model/
│   ├── services/
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   └── vite-env.d.ts
├── .gitignore
├── package.json
└── tsconfig.json

Các thành phần cơ bản (Components)

Thành phần (Component) là đơn vị cơ bản trong React, cho phép tái sử dụng mã dễ dàng. Một thành phần có thể là tiêu đề, chân trang hoặc một toàn bộ trang.

Ví dụ về thành phần Header:

export function Header() {
    return (
        <header>
            <h1>Techtopia</h1>
            <nav>
                <a href='/attractions'>Điểm thu hút</a>
                <a href='/map'>Bản đồ</a>
            </nav>
        </header>
    );
}

JSX và TSX

React sử dụng cú pháp JSX, cho phép viết HTML trực tiếp trong JavaScript. TSX là phần mở rộng cho TypeScript, giúp bạn kết hợp TypeScript với cú pháp JSX và đảm bảo kiểm tra kiểu dữ liệu.

Ví dụ về TSX:

interface RefreshmentStand {
    id: string;
    name: string;
    isOpen: boolean;
}

const Refreshment = (props: RefreshmentStand) => {
    return <h1>{props.name}</h1>;
};

Quản lý State và sử dụng Hooks

State trong React là đối tượng chứa dữ liệu của thành phần. Hooks như useState và useEffect giúp bạn quản lý state và các tác động phụ trong ứng dụng.

const [count, setCount] = useState(0);

Tương tác với REST API

Chúng ta sẽ sử dụng Axios để gửi và nhận dữ liệu từ REST API. Để lấy danh sách điểm thu hút, ta có thể thực hiện như sau:

import axios from 'axios';

const fetchAttractions = async () => {
    const response = await axios.get('http://localhost:8093/api/attractions');
    return response.data;
};

Tổng kết

Việc sử dụng React kết hợp với TypeScript giúp xây dựng các trang web an toàn, mở rộng và dễ bảo trì. Qua bài viết này, bạn đã có cái nhìn tổng quan về các bước để thiết lập một website mẫu đơn giản. Hãy tiếp tục khám phá và phát triển kỹ năng lập trình của bạn với React và TypeScript. Cảm ơn bạn đã theo dõi!
source: viblo