Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

1. Basic rules

  • Declare one component in a file: Although it is possible to declare multiple React components in a file, it is best not to do so; It is recommended that a file declare a React component and export only one component.
  • Use JSX expressions: Don’t write React. CreateElement;
  • Usage scenarios of function and class components: If the defined component does not need props and state, it is recommended to define the component as a function component; otherwise, it is recommended to define the component as a class component.

Component declaration

(1) It is recommended that the name of the component be the same as the name of the file that defines the component;

Recommendation:

import Footer from './Footer';
Copy the code

Is not recommended:

import Footer from './Footer/index';
Copy the code

(2) Do not use the displayName attribute to define the component name. Instead, declare the component name directly after the class or function keyword.

Recommendation:

export default class MyComponent extends React.Component {}
Copy the code

Is not recommended:

export default React.Component({ displayName: 'MyComponent'});
Copy the code

React naming

  • Component name: Large hump is recommended;
  • Attribute names: React DOM uses the small hump command to define attribute names, rather than the HTML naming convention for attribute names;
  • Style style attribute: JavaScript object with small camel name attribute;

Recommendation:

// Component name: MyComponent
// Attribute name: onClick
// Style property: backgroundColor
Copy the code

4. Pay attention to JSX writing

4.1, tags,

(1) Always use a self-closing tag when the tag has no child elements.

Recommendation:

/ / Good:<Component />
Copy the code

Is not recommended:

<Component></Component>
Copy the code

(2) If the tag has multiple line attributes, close the tag on another line.

Recommendation:

<Component
  bar="bar"
  baz="baz" 
/>
Copy the code

Is not recommended:

<Component
  bar="bar"
  baz="baz" />
Copy the code

(3) Leave a space before the autistic label.

Recommendation:

<Foo />
Copy the code

Is not recommended:

<Foo/> 
<Foo     />
<Foo
 />
Copy the code

(4) Enclose the JSX tag with parentheses when components cross rows.

Recommendation:

 render() {
    return (
      <MyComponent className="long body" foo="bar">
        <MyChild />
      </MyComponent>
    );
  }
Copy the code

Is not recommended:

render() {
   return <MyComponent className="long body" foo="bar">
         <MyChild />
       </MyComponent>;
}
Copy the code

4.2, alignment

JSX syntax uses the following alignment:

/ / recommend<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
/>If a component property can be placed on a row (if it is a property), it remains on the current row<Foo bar="bar" />// Multi-line attributes are indented<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
> 
  <Quux />
</Foo>/ / do not recommend<Foo superLongParam="bar"
     anotherSuperLongParam="baz" />
Copy the code

4.3, quotes,

JSX attributes use double quotes, while other JS attributes use single quotes. Because JSX attributes cannot contain escaped quotes, it is more convenient to use double quotes when typing abbreviations such as “don’t”.

Recommendation:

<Foo bar="bar" />
 
<Foo style={{ left: ‘20px' }} />
Copy the code

Is not recommended:

<Foo bar='bar' />
    
<Foo style={{ left: "20px}} "/ >
Copy the code

5. Style writing

React styles can use inline style styles or use the className attribute to refer to CSS classes defined in external CSS stylesheets. We recommend using className to define styles. In addition, it is recommended to use LESS and SCSS to replace the traditional CSS writing method. The specific writing method of SCSS to improve efficiency can be referred to the article.

DefaultProps is defined using static properties

DefaultProps is recommended to be defined using static properties, not outside class.

Recommendation:

class Example extends React.Component {
  static defaultProps = {
    name: 'stranger'
  }
 
  render() {
   // ...}}Copy the code

Is not recommended:

class Example extends React.Component {
  render() {
    // ...
  }
}
 
Example.propTypes = {
  name: PropTypes.string
};
Copy the code

7. Set key properties

Key helps React identify which elements have changed, such as being added or removed. So you should give each element in the array a definite identity. As a last option, you can use the element index index as the key when the element id is not specified, but only if the order of the list items may change, and if you use the index as the key, as this can lead to poor performance and component state issues.

Recommendation:

{todos.map(todo= > (
  <Todo
    {. todo}
    key={todo.id}
  />
))}
Copy the code

Is not recommended:

{todos.map((todo, index) = >
  <Todo
    {. todo}
    key={index}
  />
)}
Copy the code

Bind event handlers to components

React provides 4 methods for component binding event handlers, including public class fields syntax, binding in constructors, using arrow functions in callbacks, and using function.prototype. bind. We recommend using the public Class Fields syntax and using the arrow function notation (passing parameters to the event handler) when not required.

Recommendation:

handleClick = () = > {
    console.log('this is:'.this);
 }
 <button onClick={this.handleClick}> Click me </button>
Copy the code

Is not recommended:

 constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
 }
 handleClick(){
    console.log('this is:'.this);
 }
 <button onClick={this.handleClick}> Click me </button>
Copy the code

Please see the main pageReact Development Specification (Part 2)

Praise support, hand left lingering fragrance, with rongyan, move your rich little hands yo, thank you big guy can leave your footprints.

Past wonderful recommendation

Vue development specification

Mobile end horizontal and vertical screen adaptation and bangs adaptation

Mobile frequently asked Questions

Front-end common encryption methods

Canvas Pit Climbing Road

Don’t know SEO optimization? An article helps you understand how to do SEO optimization

Canvas Pit Road

Wechat small program development guide and optimization practice

Talk about mobile adaptation

Front-end performance optimization for actual combat

Talk about annoying regular expressions

Obtain file BLOB stream address to achieve the download function

Vue virtual DOM confused? This article will get you through the virtual DOM once and for all

Git Git

Easy to understand Git introduction

Git implements automatic push

Interview Recommendations

Front ten thousand literal classics – the foundation

Front swastika area – advanced section

More exciting details: personal homepage