preface

  • React spa uses vite+ React + TS technology stack. Vite is fast and I don’t need to introduce it. React + TS has become the mainstream of large projects. So learning React + TS will help you get into a big factory later.
  • This project will have strict specification, esLint specification, Stylelint specification, TS type specification, Git submission specification, including package on-line volume analysis, performance analysis, and how to optimize the project. It shows you the “fun” of developing large collaborative projects, and the functional development architecture is good practice for integrated communities. Let’s start building projects together
  • The first article focuses on the basic configuration of some projects before starting to write the actual business code
  • Project address: Viet-React-TS

Technology stack preview

  • React 17+ typescript 4+ is the official vite template

    yarn create vite  why-react --template react-ts
Copy the code

  • Less: Names of less files in the project must end in module.less

    yarn add less
Copy the code

  • Git code submission verification,

    yarn add yorkie lint-staged -D
Copy the code

    • The yorkie used does not use husky. The Yorkie was yyds fork husky and then made some custom changes so that the hook can be read from the “gitHooks” property of package.json.

    • GitHooks Git Hooks are scripts that trigger when Git executes certain events (commit, push, receive, etc.). Similar to “hook functions”, Hooks that are not set to execute are ignored. In the.git/hooks directory of your project, there are some sample hook scripts ending in.sample. If you want to enable the corresponding hooks, simply manually remove the suffix. (To enable the hook script, delete the suffix. Sample of a hook. By default, the hook script is disabled.)

    • Prior to code submission, code rule checking ensures that all code entering git repositories complies with code rules. However, lint can be slow to run across a project, and Lint-staged can only detect files in staging

  • I won’t dwell on the importance of the ESLint multiplayer code specification, very, very important

    Eslint yarn add eslint -d // Then run NPX eslint --init // the project root directory will automatically create a.eslintrc.js file. Module. exports = {browser: true, es2021: true, node: true,}, extends: {module.exports = {browser: true, es2021: true, node: true,}, extends: [ "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", ], parser: "@typescript-eslint/parser", parserOptions: { ecmaFeatures: { jsx: true, }, ecmaVersion: 12, sourceType: "module", }, plugins: ["react", "@typescript-eslint"], rules: { "arrow-body-style": 0, "jsx-a11y/label-has-for": 0, "max-lines-per-function": [ 2, { max: 320, skipComments: true, skipBlankLines: true }, ], "no-confusing-arrow": 0, "no-nested-ternary": 0, "no-console": 2, "no-param-reassign": [ 2, { props: true, ignorePropertyModificationsFor: ["draft"] }, ], "react/no-this-in-sfc": 0, }, };Copy the code

  • prettier

    • When Prettier is used to format code, it removes the original code style to make sure the team’s code is in the same format, “Building and enforcing a style guide”, as the website says

    • Where Prettier is a tool that formatting code, does no quality check, but when the team doesn’t agree on the rules, you know what “red code” looks like

      yarn add prettier -D
Copy the code

  • stylelint

    • StyleLint is “a powerful, modern CSS detection tool” that, like ESLint, helps us avoid errors in style sheets by defining a series of coding style rules.
    • The order in which CSS styles are written and how they work – very important! Is important! Is important! In a nutshell, it deals with browser rendering principles: reflow and Repaint
    • Many partners may not have what concept please refer to CSS style writing order and principle – very important!
    Stylelint stylelint-config-standard-d //. Stylelintrc.js configuration module.exports = {extends: Rules: {"stylelint-config-standard", rules: {"color-hex-case": "lower", "comment-empty-line-before": "Never ", // use numeric or named (if possible) font-weight value "font-weight-notation": Null, // Require a line break after a function comma or disallow blank "function-comma-newline-after": Null, // Require a line break inside function parentheses or disallow blank "function-parentheses-newline-inside": null, // use quotes on urls "function-url-quotes": "Always ", // string uses single quotes" string-quotes": "single", // disallow low-priority selectors from appearing after high-priority selectors "no-descending-specificity": Null, // disallow empty source" no-empty-source": null, // disallow missing end of file newline" no-missing-end-of-source-newline": null,},};Copy the code

  • More

Editor configuration

  • It is recommended to open preferences for esLint stylelint prettier using Webstorm
  • stylelint

  • eslint

  • prettier

Project directory division

  • React has the concept of UI components and container components. As the name implies, UI components mainly control the display of components, not with too much logic coupling, container components to achieve some specific logic, the introduction of UI components as a sub-component, the sub-component (UI components) need some data through the way of value transfer between components to UI components, data rendering. This project will also be divided according to this rule
  • Components Common components
    • All the components under this directory are pure and not linked to the business. I will also send this package to NPM separately in the future
  • Common components of materials services
    • This directory lays down the components and business hooks that are coupled to the current business
  • Hooks Custom hooks
  • Pages Component
  • Service Interface Definition
  • Utils tools

Environment configuration

Cross domain

  • Interview thieves like to ask, basically except for configuring local agents, the distribution live front end does not handle cross-domain, in most scenarios.
  • The local agent 
    server: {
port: 3001,
proxy: {
 "/XXX": {
   target: "https://XXX",
   changeOrigin: true,
   cookieDomainRewrite: "",
   secure: false,
   },
 },
},
Copy the code
  • Online nginx

Package. json file configuration

  • we
"scripts": { "dev": "vite", "build": "tsc && vite build", "serve": "Vite Preview ", // Main configuration triggers pre-commit for stylelint validation "lint": "npm run lint:js && npm run lint:style && npm run lint:prettier", "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src", "lint:prettier": "prettier --check "**/*" --end-of-line auto", "lint:style": "stylelint --fix "src/**/*.less" --syntax less", "lint-staged": "lint-staged", "lint-staged:js": "Eslint -- ext.js,.jsx,.ts,.tsx"}, // Use Yorkie to automatically trigger gitHooks hooks, then execute pre-commit and then execute lint-passage "gitHooks": {"pre-commit": "lint-passage"}, // Lint-passage configuration validates less, TS, and TSX files by writing "lint-passage ": {"*.less": {"*.less": "stylelint --syntax less", "*.{js,jsx,ts,tsx}": "npm run lint-staged:js", "*.{js,jsx,tsx,ts,less,md,json}": [ "prettier --write" ] },Copy the code

end

  • Welcome to Star Fork Viet-React-TS

  • This project will be synchronized with a video tutorial, will be broadcast in a station from time to time, take you online knock on this project, we learn from each other