🛠 Hướng dẫn tạo dự án React TypeScript với React Router

Thiết lập nhanh dự án với cấu hình chuẩn để phát triển React hiệu quả.

🥇 Bước 1: Tạo dự án React TypeScript với React Router

Mở terminal và chạy lệnh sau:

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

Lưu ý: Đổi my-react-router-app thành tên thư mục tiếng Anh, không dấu, không khoảng trắng.

Chọn Yes nếu được hỏi. Template này dùng React Router mode framework.

🥇 Bước 2: Fix lỗi thường gặp

🥈 Lỗi: No route matches URL

Error: No route matches URL "/.well-known/appspecific/com.chrome.devtools.json"

Giải pháp: Cài plugin hỗ trợ cho Vite:

npm install -D vite-plugin-devtools-json

Thêm vào vite.config.ts:

import { defineConfig } from 'vite'
import devtoolsJson from 'vite-plugin-devtools-json'

export default defineConfig({
  plugins: [devtoolsJson()]
})

🥈 Lỗi: A tree hydrated... (Hydration mismatch)

Lỗi này có thể do:

Dùng Date.now(), Math.random(), hoặc new Date() trong SSR
Khác biệt về định dạng ngày giữa server và client
Extension Chrome can thiệp DOM (thường là Urban VPN)

Giải pháp: Tắt từng extension Chrome để xác định nguyên nhân.

🥇 Bước 3: Thêm EditorConfig

Cài extension EditorConfig for VS Code
Tạo file .editorconfig tại thư mục gốc:

[*]
indent_size = 2
indent_style = space

🥇 Bước 4: Thêm Prettier để chuẩn hóa format

Cài extension Prettier - Code formatter
Tạo file .prettierrc với nội dung sau:

{
  "arrowParens": "always",
  "semi": false,
  "trailingComma": "none",
  "tabWidth": 2,
  "endOfLine": "auto",
  "useTabs": false,
  "singleQuote": true,
  "printWidth": 120,
  "jsxSingleQuote": true
}

Tạo file .prettierignore:

node_modules/
dist/

Cài thư viện Prettier:

npm i prettier -D

Thêm vào scripts trong package.json:

"prettier": "prettier --check .",
"prettier:fix": "prettier --write ."

Chạy format bằng:

npm run prettier:fix

🥇 Bước 5: Thêm ESLint để kiểm tra lỗi cú pháp

Cài extension ESLint trong VS Code
Tạo file eslint.config.js tại thư mục gốc:

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import { globalIgnores } from 'eslint/config'

export default tseslint.config([
  globalIgnores(['dist', 'build', '.react-router']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      js.configs.recommended,
      tseslint.configs.recommended,
      reactHooks.configs['recommended-latest'],
      reactRefresh.configs.vite
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser
    },
    rules: {
      'react-refresh/only-export-components': 'off',
      'no-empty-pattern': 'off'
    }
  }
])

Cài các gói ESLint cần thiết:

npm i @eslint/js globals eslint-plugin-react-hooks eslint-plugin-react-refresh typescript-eslint eslint -D

Thêm vào scripts:

"lint": "eslint .",
"lint:fix": "eslint . --fix"

🥇 Bước 6: Bật source map cho CSS khi dev

Thêm đoạn sau vào vite.config.ts:

css: {
  devSourcemap: true
}

🥇 Bước 7: Cải thiện trải nghiệm lập trình

Bật Format On Save trong VS Code Settings
Ưu tiên import alias: Tìm import module specifier trong VS Code và bật ở JS/TS
CSR only: trong react-router.config.ts thêm ssr: false

Thêm script preview CSR sau khi build:

"start:csr": "vite preview"

Chạy lần lượt:

npm run build
npm run start:csr

📌 Tài nguyên

React Router Template: https://github.com/duthanhduoc/react-router-template

#Tài liệu

Hướng dẫn tạo dự án React TypeScript với React Router

Setup dự án Node.js với TypeScript ESLint Prettier