In Blog
Custom web development solutions in Surat

Style guides are written so that new developers may quickly become comfortable with a code base and then generate code that other developers can understand.

TABLE OF CONTENTS

  1. Basic Rules

  2. Naming

  3. Declaration

  4. Alignment

  5. Props

  6. Refs

  7. Tags

  8. Methods

  9. Ordering

  10. Code Style Best Practices

Basic Rules

  • Each file should only include one React component. Multiple Stateless, or Pure, Components are, however, permitted per file
  • Use the JSX syntax at all times.
  • Do not use React.createElement unless you’re initializing the app from a file that is not JSX.

Naming

Extensions: Use .jsx . extension for React components.
Filename: Use PascalCase for filenames. E.g., ReservationCard.jsx .
Reference Naming: Use PascalCase for React components and camelCase for their instances. eslint: ReservationCard.jsx .

image_2021_09_17t08_26_55_006z

Component Naming: Use the filename as the component name. For example, ReservationCard.jsx . should have a reference name of ReservationCard . However, for root components of a directory, use index.jsx  as the filename and use the directory name as the component name

image_2021_09_17t08_27_03_122z

Declaration

Do not use displayName for naming components. Instead, name the component by reference.

image_2021_09_17t08_27_14_942z

Alignment

Follow these alignment styles for JSX syntax. eslint: react/jsx-closing-bracket-location react/jsx-closing-tag-location

image_2021_09_17t08_27_24_354z

Props

Always use camelCase for prop names.

image_2021_09_17t08_27_32_899z

Do not use words like “image”, “photo”, or “picture” in alt props. eslint: jsx-a11y/img-redundant-alt

image_2021_09_17t08_27_40_214z

Avoid using an array index as key prop, prefer a unique ID.

image_2021_09_17t08_27_47_578z

Spreading objects with known, explicit props. This can be particularly useful when testing React components with Mocha’s beforeEach construct.

image_2021_09_17t08_27_53_906z

Refs

Always use ref callbacks. eslint: react/no-string-refs

image_2021_09_17t08_28_01_200z-1

Tags

Always self-close tags that have no children. eslint: react/self-closing-comp

image_2021_09_17t08_28_12_747z

If your component has multi-line properties, close its tag on a new line. eslint: react/jsx-closing-bracket-location

image_2021_09_17t08_28_19_104z

Methods

Use arrow functions to close over local variables.

image_2021_09_17t08_28_27_028z

Do not use underscore prefix for internal methods of a React component

image_2021_09_17t08_28_34_876z

Ordering

Ordering for class extends React.Component:

  1. optional static methods
  2. constructor
  3. getChildContext
  4. componentWillMount
  5. componentDidMount
  6. componentWillReceiveProps
  7. shouldComponentUpdate
  1. optional static methods
  2. constructor
  3. getChildContext
  4. componentWillMount
  5. componentDidMount
  6. componentWillReceiveProps
  7. shouldComponentUpdate

Code Style Best Practices

  • Avoid the Use of the State as much as Possible
    • Whenever using state in the component, keep it centralized to that component and pass it down in the component tree as props.
  • Write DRY Code
    • Try to avoid duplicate code and create a common component to perform the repetitive task to maintain the DRY (Don’t Repeat Yourself) code structure.
    • For instance: When you need to show multiple buttons on a screen then you can create a common button component and use it rather than writing markup for each button
  • Remove Unnecessary Comments from the Code
  • Use Destructuring to Get Props
      • Destructuring was introduced in ES6. This type of feature in the javascript function allows you to easily extract the form data and assign your variables from the object or array. Also, destructuring props make code cleaner and easier to read.

    Use Destructuring to Get Props

  • Apply ES6 Spread Function
    • It would be a more easy and productive way to use ES6 functions to pass an object property. Using {…props} between the open and close tag will automatically insert all the props of the object.
  • Manage too many Props with Parent/Child Component
    • Use Map Function for Dynamic Rendering of Arrays

Map Function for Dynamic Rendering of Arrays

  • Use es-lint or Prettier for Formatting

Conclusion

With this blog of React/JSX style guide, we gave you a deeper insight for react js developer and frontend developer on how ReactJS works. The React best practices will offer you fewer typing options and more explicit codes. Once you will start using this, you will start liking its clear crisp features with code reusability. This list of best practices from React will help you place your ventures on the right path, and later down the line, eliminate any future development complications.

FacebookInstagramSkypeLinkedIn