preface

  • Good coding standards are very important, both in the visual, post-maintenance is very important, no rules can not be fangfanged, sorted out our team now some coding standards, I hope to help you

Front-end code Review specification

  • Coding specification reference, code review specification

Readme Project documentation

I. Environment and version description

  • The react version 17. Xx
  • Umi – request 1.3. XXX
  • Single – spa 5.9 xx

2. Develop relevant environment and configuration

2.1 Project Data

2.1.1 Document Address

  • Interface documentation
  • The requirements document
    • XX component Phase 2 requirements document address: HTTPS :XX
    • Document address of xx component in September: HTTPS: xx
  • Design document

2.1.2 UI&UX address

  • Document address: HTTPS :XX
  • UI diagram document address: HTTPS :XX

2.1.3 Interface Address

2.2 Project Configuration

2.2.1 Project Installation

pnpm install
Copy the code

2.2.2 Project Compilation & Hot Loading [Development Mode]

pnpm run dev
Copy the code

2.2.3 Project Compilation

pnpm run build
Copy the code

2.2.4 Check the code

pnpm run lint
// Check the code and format it automatically
pnpm run lint:fix
Copy the code

2.2.5 Compress and copy the dist file from the root directory of the project to the root directory of the server project and decompress it

Code and code directory structure and code file function description

3.1 Plug-in Description

  • The front end uses the splitFunction canvas plug-in
  • Use umi-request to send requests

3.2 Code structure description

Example:

  • Dist Release packaged static file directory

  • Node_modules Installation directory of the node module

  • Public Public directory

  • Image on the left of the head of favicon.ico;

  • Index.html webpack/vite/rollup package page template;

  • Src developed directory

    • components

    • hooks

    • servers

    • utils

    • xx

    • App.tsx project entry file

    • config.ts

    • xxx

  • Main.js project core file

  • Gitignore ignores the compiled intermediate files

  • Babel.config. js Babel configuration file

  • Package-lock. json dependencies file between modules

  • Package. json project description file

  • Readme. md Project description document

Write specifications for business components

  • Business Code Directory (mandatory)

  • Code example React,
// The import sequence is node_modules file -> @/ starting file -> relative path file
/ / import the React
import React from 'react';
// Import child components
import Child from './Child';
// ...
// Import the corresponding.less with a styles name
import styles from './HelloWorld.module.less';

/** * Type definition (name: component name + Props) */
export interface HelloWorldProps {
  // Parameter definition (this comment is a separate line, do not put the end of the variable)
  username: string;
}

/** * Component comments (brief summary) */
const HelloWorld: React.FC<HelloWorldProps> = ({ username }) = > {
  // 1

  // 2. Effects position

  // 3

  // ...

  return (
    <div className={styles.wrapper}>
      {username}
      <Child />
    </div>
  );
};

// Export the component
export default HelloWorld;
Copy the code

Common Component encapsulation

  • How do we encapsulate a common component?

    1. Components that need to be used in multiple places in a project

    2. Components that are not coupled to business, common components for business coupling

    3. All states can be controlled externally, using passed props to control their behavior without exposing their internal structure.

    A well-packaged component hides its internal structure and provides a set of properties that control its behavior. It is necessary to hide the internal structure. Other components have no need to know or depend on the internal structure or implementation details of the componentCopy the code

  • The unified directory in our project is mainly for looking comfortable

  • Directory:

    • Index.tsx main entry file (sample code)
import React from 'react';
import classNames from 'classnames';
import { Tooltip } from 'antd';
import styles from './index.module.less';

interface LinkIconProps {
  // Link addresslinkHref? :string;
  / / icon
  iconSvg: React.ReactSVG | React.ReactNode;
  // Prompt fieldtitle? :string;
  // a Other parameters of the labeltarget? : HTMLAnchorElement['target'];
  / / styleclassName? :string;
}

const LinkIcon: React.FC<LinkIconProps> = ({
  linkHref,
  target = '_blank',
  iconSvg,
  title,
  className,
}) = > {
  return (
    <Tooltip title={title}>
      <a href={linkHref} target={target} className={classNames(styles.linkA, className)} >
        {iconSvg}
      </a>
    </Tooltip>
  );
};

export default LinkIcon;

Copy the code
  • Index. md uses samples for components, necessary code comments, and clearly tells others how to use this common component

Third Party Documents

  • All third-party plug-ins used in the project should be sorted out to facilitate later maintenance
  • Example:

portal

  • This year interviewed 100+ front-end classmates my summary
  • Why do I insist on getting up at six
  • Punch in the communication group at six o ‘clock
  • I read the technical book is very anxious, can not read the book how to do?
  • Hard work === “volume”?
  • Vite + React + TS
  • Vite + React + TS