Cài đặt React: tạo dự án React với Vite

Để cài đặt React, hãy tạo một dự án mới với Vite: chạy npm create vite@latest my-app -- --template react, rồi cd my-app, npm install và npm run dev. Trước đó bạn cần cài Node.js. Vite thiết lập sẵn React, phần biên dịch JSX và một dev server tự tải lại trang mỗi khi bạn lưu.

Bạn không cần những thứ đó để bắt đầu học. Trình soạn thảo bên dưới chạy React ngay trong trang này; đây là phiên bản rút gọn của tệp App.jsx mà Vite tạo cho bạn.

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <div style={{ textAlign: 'center' }}>
            <h1>Get started</h1>
            <p>
                Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
            </p>
            <button type="button" onClick={() => setCount((count) => count + 1)}>
                Count is {count}
            </button>
        </div>
    );
}

Click nút, rồi sửa nội dung tiêu đề: phần xem trước cập nhật ngay khi bạn gõ, giống cách dev server của Vite cập nhật thay đổi mà không tải lại trang (đó chính là ý nghĩa của "HMR", hot module replacement).

Yêu cầu: Node.js

Các công cụ build ứng dụng React chạy trên Node.js, và npm (trình quản lý package của nó) đi kèm theo. Hãy cài bản LTS hiện tại từ trang web Node.js hoặc bằng một công cụ quản lý phiên bản như nvm, rồi kiểm tra trong terminal:

node -v
npm -v

Cả hai lệnh đều phải in ra số phiên bản. Nếu node -v in ra phiên bản cũ, hãy nâng cấp: Vite 8 cần Node.js 20.19 trở lên (22.12 trở lên với dòng 22) và sẽ in cảnh báo trên các bản cũ hơn.

Tạo ứng dụng React với Vite

Chạy bốn lệnh sau trong thư mục bạn dùng để chứa các dự án:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

• npm create vite@latest tải về trình tạo dự án mới nhất. my-app là tên thư mục, còn --template react chọn React thuần với JavaScript. Dấu -- thêm vào để npm chuyển tùy chọn template sang trình tạo dự án.
• npm install tải React, React DOM, Vite và các dependency khác được liệt kê trong package.json vào node_modules.
• npm run dev khởi động máy chủ phát triển và in ra một địa chỉ cục bộ, thường là http://localhost:5173. Mở địa chỉ đó trong trình duyệt.

Sau đó trình tạo dự án hỏi hai câu: thiết lập linter nào (Oxlint hay ESLint), và có muốn cài đặt rồi khởi động ứng dụng ngay không. Nếu bạn trả lời có ở câu thứ hai, nó sẽ chạy npm install và npm run dev giúp bạn, nên bạn có thể bỏ qua hai lệnh cuối. Với TypeScript, hãy dùng --template react-ts; xem React với TypeScript.

Các tệp Vite tạo ra

my-app/
├── index.html
├── package.json
├── vite.config.js
├── README.md
├── public/
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    ├── index.css
    └── assets/

Ba tệp quan trọng nhất:

index.html là trang mà trình duyệt tải. Phần body chứa một phần tử rỗng, <div id="root"></div>, và một thẻ script tải src/main.jsx. React vẽ toàn bộ ứng dụng bên trong div đó.

src/main.jsx là điểm khởi đầu. Nó kết nối React với trang:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App />
    </StrictMode>,
);

createRoot nhận phần tử #root và giao cho React quản lý mọi thứ bên trong nó. render(<App />) vẽ component cấp cao nhất của bạn vào đó. StrictMode là một công cụ hỗ trợ khi phát triển, chạy thêm một số bước kiểm tra; nó không có tác dụng trong bản build production (xem Strict Mode). Bạn hiếm khi cần sửa tệp này.

src/App.jsx là component đầu tiên của bạn, và là tệp bạn sẽ sửa. Phiên bản của Vite import ba hình ảnh (một ảnh hero và logo của Vite và React) cùng App.css, và kết thúc bằng export default App. Cách này tương đương với viết export default function App() ở đầu, là dạng mà các ví dụ trên những trang này sử dụng.

Sửa lần đầu tiên

Mở src/App.jsx, xóa nội dung đang có và thay bằng component của riêng bạn. Lưu lại, và trình duyệt cập nhật. Đây là một ứng dụng nhỏ để bạn gõ thử; hãy thử ở đây trước:

import { useState } from 'react';

function Greeting({ name }) {
    return <h2>Hello, {name}!</h2>;
}

export default function App() {
    const [name, setName] = useState('React');

    return (
        <div>
            <Greeting name={name} />
            <label>
                Your name:{' '}
                <input value={name} onChange={(e) => setName(e.target.value)} />
            </label>
        </div>
    );
}

Gõ vào ô nhập và tiêu đề thay đổi theo. Sau đó thêm một <Greeting name="Vite" /> thứ hai bên dưới cái đầu tiên: component có thể tái sử dụng, và mỗi bản sao nhận name riêng.

Khi App.jsx dài ra, hãy chuyển các component sang tệp riêng, như src/Greeting.jsx, export chúng và import ở nơi bạn dùng. Trang component hướng dẫn cách làm.

Build cho production

Dev server dùng khi bạn đang viết code. Khi đã sẵn sàng xuất bản, hãy build ứng dụng:

npm run build
npm run preview

npm run build biên dịch JSX, đóng gói và rút gọn code, rồi ghi các tệp tĩnh vào thư mục dist/. npm run preview phục vụ thư mục đó trên máy bạn để bạn kiểm tra bản build thật. Tải dist/ lên bất kỳ dịch vụ hosting tĩnh nào. Trong bản build, React cũng chuyển sang chế độ production, chạy nhanh hơn và bỏ qua các cảnh báo dành cho môi trường phát triển.

Create React App đã bị ngừng hỗ trợ

Trong nhiều năm, cách khởi đầu tiêu chuẩn là npx create-react-app my-app. Vào tháng 2 năm 2025, nhóm phát triển React đã ngừng hỗ trợ Create React App, và công cụ này không còn được bảo trì. Nhiều hướng dẫn cũ vẫn dùng nó, nên bạn sẽ thấy react-scripts start và tệp khởi đầu src/index.js trong đó; bản thân các component vẫn hoạt động y hệt trong một dự án Vite.

Nên dùng gì thay thế:

• Vite cho ứng dụng chạy phía máy khách, dự án học tập hoặc một widget: chính là cách thiết lập ở trên.
• Một framework khi bạn cần sẵn định tuyến, render phía máy chủ hoặc tải dữ liệu. Next.js và chế độ framework của React Router là những lựa chọn phổ biến:

npx create-next-app@latest my-app
npx create-react-router@latest my-app

Để chuyển một dự án Create React App sang Vite, các bước chính là: cài vite và @vitejs/plugin-react rồi gỡ react-scripts; thêm một tệp vite.config.js nạp plugin React; chuyển index.html từ public/ ra thư mục gốc của dự án, bỏ các placeholder %PUBLIC_URL%, và thêm thẻ <script type="module" src="/src/index.jsx"> cho tệp khởi đầu; đổi đuôi các tệp chứa JSX thành .jsx; đổi tên biến môi trường REACT_APP_ thành VITE_ và đọc chúng từ import.meta.env; và thay các lệnh react-scripts trong package.json bằng vite, vite build và vite preview.

Thêm React vào một trang có sẵn

React không nhất thiết phải quản lý cả trang. Bạn có thể render nó vào một phần tử của một trang web có sẵn, như widget giỏ hàng trên một cửa hàng render phía máy chủ. Bạn vẫn cần một bundler như Vite để biên dịch JSX. Cài hai package:

npm install react react-dom

Sau đó tạo một root trên phần tử mà bạn muốn React quản lý:

import { createRoot } from 'react-dom/client';
import Cart from './Cart.jsx';

const container = document.getElementById('cart');
createRoot(container).render(<Cart />);

Mọi thứ bên ngoài #cart vẫn giữ nguyên. Bạn có thể tạo nhiều root trên một trang, mỗi root cho một phần tử, và mỗi root chạy độc lập.