React Coding Standards#

Reference: airbnbReact React Documentation: reactDocs

Table of Contents#

File Structure: (proposed)#

public/src
- assets
  
  global.css file
  
  images/svgs, etc
- components
  
  components that are reused globally across multiple features and pages, not pages or specific components. Group different components in folders if necessary like a “form” folder can have input components, select components, checkbox components, etc. You would have the specfic form component located in the feature folder, and then import the form elements if needed.
  
  test folder for components, and a test folder within each folder in components
- context
  
  for any contexts in app
  
  test folder for context files
  
  tests related to anything in “context” folder
- data
  
  json data
  
  constant variables
- features
  
  folders for each feature added to the app
  
  each of these folders would have a similar folder structure of components, hooks, services, context etc like the src/public folder.
  
  each folder will have an index.ts file with the sole purpose of exporting everything used in this feature outside of this feature, so we only import from
- hooks
  
  custom hooks that are globally used, specific hooks for specific features should be located within the appropriate feature folder.
  
  tests folder for hooks
- layouts
  
  specific for components that are related to layouts, like sidebar, navbar, page containers, etc.
  
  test folder for layouts
- lib
  
  for 3rd party libraries and api calls. create pure functions following the facade pattern. For indexeddb calls, fetch requests, axios requests, etc.
  
  tests for lib
- pages
  
  one .ts file for each page, that are purely used for import from features folder and implement them where they belong.
- services
  
  for integrating service based api calls
  
  tests for services
- utils
  
  global utility functions that are used by several different components across multiple features, should be pure functions (no side affects and will always give you the same output with the same input) that can be used for different calculations and things like that.
  
  tests
- App.tsx
- index.tsx

test files should be located in folders, as close to the components and functions that are being tested as possible.

Component Structure and Organization#

Basic Rules#

Only include one React component per file. - You can use multiple stateless components per file.
Always use JSX syntax.
Do not use React.createElement unless you are initializing the app from a file that is not JSX.
Use function React Components instead of class React Components

Naming Conventions#

Extentions: use .jsx (JavaScript) and .tsx (TypeScript) extentions for React Components.
Filename: Use PascalCase for filenames. Ex: ExactControlsComponent.jsx.
Reference Naming: Use PascalCase for React Components and camelCase for their instances.

// TypeScript Component Definition
const function ExactControlsComponent({ props }: PropsType) {
    return <h1>Hello World</h1>
}

// JavaScript Component Definition
const function ExactControlsComponent({ props }) {
    return <h1>Hello World</h1>
}

// --------------------------------

// Component Reference
import ExactControlsComponent from './ExactControlsComponent';

// Instance
const exactControlsComponent = <ExactControlsComponent />;

React Coding Standards

Contents

React Coding Standards#

Table of Contents#

File Structure: (proposed)#

Component Structure and Organization#

Basic Rules#

Naming Conventions#

State Management#

Props and State Naming Conventions#

Hooks Usage#

Styling#

Performance Considerations#

Testing#