React Development Guidelines

A guide for developers working with React

Initial Configuration

• Use create-react-app starter kit to get started. DON'T eject it
• Configure eslint-react for your project and editor.
• Keep the configuration in .eslintrc file
• Configure prettier-eslint
• Use husky for configuring pre-commit hooks
• Install prop-types

Add-on packages (for medium-large projects)

Styling

• React Bootstrap
• Styled Components
• Tailwind
• Purge CSS

Routing

• React Router

State Management

• Redux
• Redux Saga

Forms

• Formik
• Yup - for schema validations

Immutability

• Immutable JS

Caching

• Re-Select

Testing

• Jest, ReactTestingLibrary - for functional testing
• Jest Styled Components
• Cypress - for E2E tests

Development Guidelines

General

• Do NOT ignore warning and errors in terminal or browser console

• DRY - Don't Repeat Yourself

• ONLY use functional components (i.e. no classes)

• Prefer ES6 syntaxes

• Use fetch, async await - for API calls

• Always add new module to package.json (using yarn add <package-name>)

• Before adding a new package, check if it's already installed

• Don't use both yarn.lock and package-json.lock in the same project

• Add all environment variables to .env.local file with REACTAPP prefix

• Add comments (wherever required) to explain logic

• Use absolute paths while importing (e.g. import Image from "core-components/Image/Image.jsx";)

• If there is not custom feature to be added in third party component, export it directly from the core component

• Do not add test cases for directly exported components from the third-party library (as we don't want to test their code), Add test case if you have added some custom changes in core components, test that functionality only

• Check if the component you require is present in React Bootstrap before making a custom one.

Naming Conventions

• Use kebab-case (hyphen separated lowercase words) for naming folders
• Match your component-related files with the component name (use PascalCase - first letter of each word capitalized, no spacing between words)
• Use camelCase for component props and variables

React Specific

• Don't manipulate the DOM directly
• DOM should NOT be source of data
• Components should be loosely coupled
• Avoid use of ref
• Think - the React way
  • Step 1: Break The UI Into A Component Hierarchy
  • Step 2: Build A Static Version in React
  • Step 3: Identify The Minimal (but complete) Representation Of UI State
  • Step 4: Identify Where Your State Should Live
  • Step 5: Add Inverse Data Flow
• Every component should follow “single responsibility principle”
• Every component should be self-sufficient, reusable
  • Own DOM
  • Own Styles (use styled-components)
  • No hard-coding of values
  • No hard-coded height/width/margin/padding
• Follow composition pattern (not inheritance)
• Create pure, stateless, functional (presentation/dumb) components
• Always wrap exported component in React.memo
  (e.g. export default React.memo(Button))
• Every component should have:
  • key prop
  • PropTypes
• Render “array” of components instead of “loop” (“loop” should not be part of the render method’s “return” block)
• Always create wrappers over third party components
• Import packages in following sequence:
  • core/important imports from third party modules
  • other third party imports
  • leave an empty line
  • import custom modules
  • leave an empty line
  • import CSS modules (from third-party libraries)

Directory Structure

• README.md
• package.json
• yarn.lock
• public/
  • assets/
    • images/
    • fonts/
    • svgs
  • favicon.ico
  • manifest.json
  • robots.txt
  • index.html
• src/
  • constants/
    • appConstants.js
    • routeConstants.js
    • actionConstants.js // simple constant declarations for action names
  • higher-order-components (higher order components)
  • actions/ (functions that returns action object (passed to dispatch))
  • sagas/ (middleware for Redux - handles side-effects)
  • apis/ (services for making API calls)
  • reducers/ (entities that manipulate the store)
  • selectors/ (re-select files - used for memoization)
  • hooks/
    • Custom hooks (if any)
  • helpers/
    • Shared functions (which may not be pure functions)
  • utils/
    • Shared functions (MUST BE pure functions)
  • core-components/
    • image/
      • ImageComponent.js
      • test file
  • shared-components/
    • layout
    • high-five-components
    • routes
  • utils/ // Common utility files like API helpers action generators
  • featurewise-directories/
    • containerComponents // container files
    • non shared presentational components
    • container test files

Learning Resources

Plain JavaScript

• JS Basics
• What's new in ES6
• Functional Programming Basics

React Specific

• Official Docs

ThirdParty Tutorials

• React JS tutorial
• Powering up with React - CodeSchool Course

Securing your webapp

• Blog