Skip to content

Latest commit

 

History

History
104 lines (82 loc) · 3.66 KB

GUIDELINES.md

File metadata and controls

104 lines (82 loc) · 3.66 KB

GUIDELINES REACT JS

Here you can find the Axa Front End Community recommandations for developping React Application

Philosophy

When you develop React application you MUST follow somes principles:

  • DDD: Grouping by feature. It is recommended to group the files by functionality, as the application evolves.
  • Make it simple: Starting application with simple components. Don't use abstractions, or complexe patterns until you need it.
  • AHA Programming: Prefer duplication over the wrong abstraction.
  • State: Keep state as close to where it's needed as possible. Read Gérer son état React
  • Functionnal programming: Fonctions pures et prog fonctionnelle => TODO JOHN

Organize your application

General structure

shared
    components
        SharedComponent
    helpers
    images
    styles
layout
    App
    Header
    Footer
    Routes
pages
    MyComponent1
    MyComponent2
  • shared: All shared components/functions.
  • layout: Contains general components of the application like header, footer, menu, etc.
  • pages: Contains content of pages.

Naming convention

  • PascalCase for component files name (except index.js)
  • Components files:
    • ** __tests__:** CAN contains all tests. Depends of the team choice for better readability.
      • [Component].*.test/spec
      • [Component].feature
      • [Component].steps
      • [Component].stories
    • index.js: MUST expose public interface of the component.
    • [Component].js/jsx/ts/tsx: MUST expose the view. The file CAN, within reason, contains multiple subcomponents in the same file.
    • [Component].container: The container MUST link view and logic. API Call, computing data, calculating, Redux call etc. Generally call external hooks.
    • [Component].hooks: CAN contains hooks of the component.
    • [Component].reducer: CAN contains state management.
    • [Component].services: CAN contains API calls.
    • [Component].pure: CAN contains a set of pure functions.
    • [Component].constants: CAN contains constants.
    • [Component].scss/css: MUST contains css/scss properties

Stack:

ES Lint Configuration

Recommanded Tools

For VsCode

  • ESLint
  • SonarLint
  • Prettier
  • GitLens
  • Jest

For IntelliJ

  • SonarLint
  • Prettier
  • EditorConfig

// TODO: Other editor

// TODO: React Script