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
• 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

• Never assign a value directly to export

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)

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
• 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/
  • favicon.ico
  • manifest.json
  • robots.txt
  • index.html
• src/
  • assets/
    • images/
    • fonts/
    • svgs
  • containers/
    • A folder per route. This contains components to be rendered matching given route. Usually containers.
  • components/
    • core/
      • these components should be pure functions and should not have any project specific logic
    • shared/ // project specific re-usable components. Example:
      • User/
        • User.js
        • User.style.js
        • User.test.js
    • layout/
  • actionConstants/ // simple constatnt declarations for action names
  • 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)

Learning Resources

Plain JavaScript

• JS Basics
• What's new in ES6

React Specific

• Official Docs

ThirdParty Tutorials

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

Securing your webapp

• Blog