Template of react ts project

React-ts-template.md

Init project

Create typescript project

yarn create-react-app project-name --template typescript

Use Create React App Configuration Override

1. yarn add @craco/craco
2. Override config, replace react-scripts with craco except eject

{
    // ...
    "scripts": {
     // "start": "react-scripts start",
     // "build": "react-scripts build",
     // "test": "react-scripts test",
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
     "eject": "react-scripts eject"
    },
}

Integrate tailwindcss

Latest update

• Always refer to:https://www.tailwindcss.cn/docs/guides/create-react-app

Install

1. yarn add tailwindcss@latest postcss@latest autoprefixer@latest
2. yarn add tailwindcss-cli@latest --dev

Config

1. Create craco.config.js and use tailwindcss as postcss's plugin

module.exports = {
  style: {
    // why use postcssOptions? -> https://github.com/dilanx/craco/issues/353
    postcssOptions: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

2. Run yarn tailwindcss-cli init to init a tailwindcss config.
3. Add Purge to exclude not used css when compile

// tailwind.config.js
module.exports = {
  // purge: [],
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},
   },
   variants: {
     extend: {},
   },
   plugins: [],
}

Import and use

1. Include in ./src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

2. Test with yarn build

lint

Install tools

1. yarn add --dev react @typescript-eslint/parser @typescript-eslint/eslint-plugin
2. yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

.prettierrc.js config

module.exports =  {
    "printWidth": 120,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "all",
    "bracketSpacing": false,
    "jsxBracketSameLine": true,
    "arrowParens": "avoid",
    "insertPragma": false,
    "tabWidth": 4,
    "useTabs": false  
};

IDE & Editor config

# editorconfig.org
root = true

[*]
end_of_line = lf
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

.eslintrc.js config

module.exports = {
    // https://eslint.org/docs/latest/use/configure/configuration-files#cascading-and-hierarchy
    root: true,
    env:{
        browser: true,
        es2021: true,
    },
    extends: [
        'prettier',
        'plugin:prettier/recommended',
        'plugin:react/recommended',
        'plugin:react-hooks/recommended',
        'plugin:@typescript-eslint/recommended'
    ],
    overrides: [],
    parser: '@typescript-eslint/parser',
    parserOptions: {
        'ecmaVersion': 'latest',
        'sourceType': 'module',
        'project': ['./tsconfig.json']
    },
    plugins: [
        'react',
        'react-hooks',
        '@typescript-eslint'
    ],
    rules: {}
}

Add scripts in package.json

{
    // ...
    scripts: {
        "lint": "eslint src",
        "fixlint": "eslint src --fix --ext .ts,.tsx"
    }
}

Jest

Install tools

1. yarn add --dev jest ts-jest jest-environment-jsdom
2. jest-environment-jsdom is used when testEnvironment: 'jsdom' is set in jest.config.js, that is required by the browser environment.

Create mock files

Creat src/__mocks__/styleMock.js to mock css import when use jest

jest.config.js config

/*
 * For a detailed explanation regarding each configuration property, visit:
 * https://jestjs.io/docs/configuration
 */

module.exports = {
  // All imported modules in your tests should be mocked automatically
  // automock: false,

  // Stop running tests after `n` failures
  bail: true,

  // The directory where Jest should store its cached dependency information
  // cacheDirectory: "C:\\Users\\mamba\\AppData\\Local\\Temp\\jest",

  // Automatically clear mock calls, instances, contexts and results before every test
  clearMocks: true,

  // Indicates whether the coverage information should be collected while executing the test
  collectCoverage: true,

  // An array of glob patterns indicating a set of files for which coverage information should be collected
  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'],

  // The directory where Jest should output its coverage files
  coverageDirectory: "../coverage",

  // An array of regexp pattern strings used to skip coverage collection
  // coveragePathIgnorePatterns: [
  //   "\\\\node_modules\\\\"
  // ],

  // Indicates which provider should be used to instrument code for coverage
  // coverageProvider: "babel",

  // A list of reporter names that Jest uses when writing coverage reports
  // coverageReporters: [
  //   "json",
  //   "text",
  //   "lcov",
  //   "clover"
  // ],

  // An object that configures minimum threshold enforcement for coverage results
  // coverageThreshold: undefined,

  // A path to a custom dependency extractor
  // dependencyExtractor: undefined,

  // Make calling deprecated APIs throw helpful error messages
  // errorOnDeprecated: false,

  // The default configuration for fake timers
  // fakeTimers: {
  //   "enableGlobally": false
  // },

  // Force coverage collection from ignored files using an array of glob patterns
  // forceCoverageMatch: [],

  // A path to a module which exports an async function that is triggered once before all test suites
  // globalSetup: undefined,

  // A path to a module which exports an async function that is triggered once after all test suites
  // globalTeardown: undefined,

  // A set of global variables that need to be available in all test environments
  // globals: {},

  // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
  // maxWorkers: "50%",

  // An array of directory names to be searched recursively up from the requiring module's location
  moduleDirectories: [
    "node_modules",
    "src"
  ],

  // An array of file extensions your modules use
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],

  // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
  moduleNameMapper: {
    "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
  },

  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
  // modulePathIgnorePatterns: [],

  // Activates notifications for test results
  // notify: false,

  // An enum that specifies notification mode. Requires { notify: true }
  // notifyMode: "failure-change",

  // A preset that is used as a base for Jest's configuration
  preset: 'ts-jest',

  // Run tests from one or more projects
  // projects: undefined,

  // Use this configuration option to add custom reporters to Jest
  // reporters: undefined,

  // Automatically reset mock state before every test
  // resetMocks: false,

  // Reset the module registry before running each individual test
  // resetModules: false,

  // A path to a custom resolver
  // resolver: undefined,

  // Automatically restore mock state and implementation before every test
  // restoreMocks: false,

  // The root directory that Jest should scan for tests and modules within
  rootDir: 'src',

  // A list of paths to directories that Jest should use to search for files in
  // roots: [
  //   "<rootDir>"
  // ],

  // Allows you to use a custom runner instead of Jest's default test runner
  // runner: "jest-runner",

  // The paths to modules that run some code to configure or set up the testing environment before each test
  // setupFiles: [],

  // A list of paths to modules that run some code to configure or set up the testing framework before each test
  setupFilesAfterEnv: ['@testing-library/jest-dom'],

  // The number of seconds after which a test is considered as slow and reported as such in the results.
  // slowTestThreshold: 5,

  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
  // snapshotSerializers: [],

  // The test environment that will be used for testing
  testEnvironment: "jsdom",

  // Options that will be passed to the testEnvironment
  // testEnvironmentOptions: {},

  // Adds a location field to test results
  // testLocationInResults: false,

  // The glob patterns Jest uses to detect test files
  testMatch: [
    "**/__tests__/**/*.[jt]s?(x)",
    "**/?(*.)+(spec|test).[tj]s?(x)"
  ],

  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
  // testPathIgnorePatterns: [
  //   "\\\\node_modules\\\\"
  // ],

  // The regexp pattern or array of patterns that Jest uses to detect test files
  // testRegex: [],

  // This option allows the use of a custom results processor
  // testResultsProcessor: undefined,

  // This option allows use of a custom test runner
  // testRunner: "jest-circus/runner",

  // A map from regular expressions to paths to transformers
  // transform: undefined,

  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
  transformIgnorePatterns: [
    "/node_modules/",
    "\\.svg$",
    "\\.(css|less)$"
  ],

  // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
  // unmockedModulePathPatterns: undefined,

  // Indicates whether each individual test should be reported during the run
  // verbose: undefined,

  // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
  // watchPathIgnorePatterns: [],

  // Whether to use watchman for file crawling
  // watchman: true,
};

Add scripts in package.json

{
    // ...
    scripts: {
        "test": "jest --bail",
        "testa": "jest --watchAll"
    }
}

CICD

Github workflow

Create .github/workflow/ci.yml

name: <PROJECT> CI Process
run-name: ${{ github.actor }} is running CI workflow 
on:
  pull_request:
    branches:
      - main
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
    - name: Pull code
      uses: actions/checkout@v3
    - name: setup nodejs
      uses: actions/setup-node@v3
      with:
        node-version: '16.16.x'
    - name: Install yarn
      run: npm install -g yarn
    - name: Check lint
      env:
        CI: ""
      run: |
        yarn install
        yarn lint
        yarn build
  unittest:
    runs-on: ubuntu-latest
    steps:
    - name: Pull code
      uses: actions/checkout@v3
    - name: setup nodejs
      uses: actions/setup-node@v3
      with:
        node-version: '16.16.x'
    - name: Install yarn
      run: npm install -g yarn
    - name: Run unittest
      env:
        CI: ""
      run: |
        yarn install
        yarn test

Reference

1. https://github.com/kaindy7633/blog/blob/main/front-end/%E5%9C%A8React%2BTypeScript%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8Eslint%E5%92%8CPrettier.md
2. https://juejin.cn/post/7036388766801461255