Cách thiết lập một dự React chuyên nghiệp

Chúng ta có thể setup một dự án React thông qua các công nghệ sau :

1. Next.js
2. Typescript
3. ESLint Ứng dụng Next.js được thiết lập với ESLint được sử dụng để phát hiện lỗi bằng cách phân tích code của bạn. Sau đây là bộ quy tắc tiêu chuẩn của ESLint : https://eslint.org/docs/user-guide/getting-started#configuration
4. Prettier Được sử dụng để format code của bạn theo một tiêu chuẩn. Điều đó sẽ giúp code của bạn dễ đọc hơn và giúp tiết kiệm rất nhiều công sức thủ công.

npm install --save-dev eslint-config-prettier

{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "prettier"
  ]
}

1. styled-components Là một thư viện rất phổ biến để viết css

npm install styled-components

const nextConfig = {
  reactStrictMode: true,
  compiler: {
    styledComponents: true,
  },
};

1. Cypress Là công cụ thường được sử dụng để test code end-to-end tests (có nghĩa là nó kiểm tra toàn bộ hệ thống từ giao diện người dùng đến cơ sở dữ liệu giống như một người dùng thực).

npm install --save-dev cypress

{
  ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "cypress": "cypress open"
  },

1. Storybook Storybook là một công cụ được sử dụng rộng rãi để lập tài liệu và kiểm tra trực quan các thành phần UI

npx sb init

npm run storybook