Tạo dự án React Typescript với React Router & ESLint Prettier

Ngày xưa nếu mà để setup một dự án React thì chúng ta có thể dùng Create React App, hoặc Webpack kết hợp Babel, sau này thì có Vite.

Nhưng hiện nay thì theo tài liệu mới nhất của React, họ khuyến khích chúng ta setup theo kiểu fullstack như Next.js, hoặc React Router.

Với những trải nghiệm của mình về Next.js một thời gian khá dài thì mình cảm thấy Next.js không ổn định, vì

• Cập nhật lớn thường xuyên mỗi năm, phiên bản mới phá vỡ cách code của phiên bản cũ. Dev đuổi theo rất mệt

• Nhiều bug và lỗi tồn tại từ phiên bản này qua phiên bản nọ nhưng không được sửa

• Hiệu suất kém

• Code Next.js thì máy tính nóng rang, dễ lỗi CPU 100% 🙏🏻

• Phải Deploy ở một server cài Node.js, không thể quăng source lên một số nơi như Github page được.

Đó là lý do mình chọn React Router (Remix.js sau này gộp chung vào React Router luôn), bởi vì

• Đơn giản, vì đơn giản nên ít bug

• Có thể chuyển đổi client side rendering và server side rendering dễ dàng, vậy nên nó không kén chọn nơi deploy như Next.js

• Tốt độ nhanh (cảm quan cá nhân)

Với câu lệnh cài đặt của React Router thì chúng ta sẽ có sẵn

• React TypeScript
• Tailwindcss
• Vite
• Alias import

Cũng khá đầy đủ, nhưng mình sẽ cập nhật thêm một số thứ để cho nó hoàn thiện hơn. Đó là:

• EditorConfig
• Prettier
• ESLint
• Ngoài ra sẽ có vài thứ nho nhỏ giúp quá trình code "sướng" hơn

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

Mở terminal lên, chạy câu lệnh sau

Sửa my-react-router-app bằng tên folder bạn muốn tạo, lưu ý là tiếng anh, không dấu cách

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

Nếu có hỏi gì thì cứ chọn Yes rồi Enter tiếp tục nhé

Khi mà tạo như thế này nghĩa là các bạn đang sử dụng React Router ở mode Framework

🥇Bước 2 - Fix lỗi

🥈Error: No route matches URL

Nếu bạn mở devtool console trên chrome mà thấy terminal của bạn xuất hiện lỗi này

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

thì fix như sau:

Cài thư viện Vite Plugin for DevTools

npm install -D vite-plugin-devtools-json

Và thêm vào Vite config

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

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

🥈A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used

Nếu màn hình console dev tool trên trình duyệt của bạn xuất hiện lỗi sau

root.tsx:28 A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

Đơn giản là các bạn chỉ cần tắt extension chrome xung đột là được, tắt từng cái đến khi nào phát hiện là oke nhé. Như mình thì nguyên nhân là do Urban VPN Proxy

🥇Bước 3: Thêm EditorConfig

1. Cài extension EditorConfig for VS Code trên VS Code để đọc được file .editorconfig

2. Tạo file .editorconfig với nội dung như sau ở thư mục root (ngang cấp với package.json)

[*]
indent_size = 2
indent_style = space

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

1. Cài đặt Extension Prettier - Code formatter cho VS Code

2. Tạo file .prettierrc trong thư trong thư mục root với nội dung dưới đây

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

3. Tạo file .prettierignore trong thư mục root với nội dung sau

node_modules/
dist/

4. Cài thư viện prettier cho mã nguồn dự án bằng câu lệnh npm i prettier -D

5. Thêm 2 dòng sau vào "script" trong package.json

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

Từ nay muốn format bằng terminal thì chỉ cần chạy câu lệnh npm run prettier:fix

🥇Bước 5: Thêm ESLint để code chặt chẽ hơn

1. Cài đặt extension ESLint trên VS Code

2. Tạo file eslint.config.js ở thư mục root. File này mình tham khảo bên Vite và tắt vài rule

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'
    }
  }
])

3. Cài các thư viện sau

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

4. Thêm 2 dòng sau vào "script" trong package.json

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

Từ nay muôn check lỗi ESLint trên bằng terminal thì chạy câu lệnh npm run lint

🥇Bước 6: Enable Source map css khi dev

Thêm option này vào defineConfig({}) trong file vite.config.ts

css: {
  devSourcemap: true
}

🥇Bước 7: Bổ sung để việc code tuyệt vời hơn

• Kích hoạt Format On Save ở setting VS Code
• Ưu tiên import alias trên VS Code: Mở Setting VS Code rồi tìm import module specifier, kích hoạt nó ở JavaScript và TypeScript là được
• Nếu chỉ muốn client side rendering (CSR) thì cho ssr:false ở file react-router.config.ts. Muốn preview production khi CSR thì thêm dòng này vào "script" ở package.json

"start:csr": "vite preview"

Sau đó chỉ cần build source rồi chạy npm run start:csr là được

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