Skip to content

React Engineering Standard

Version: 1.0.0

Status: official

Author: Enterprise AI Standards

Description

Official engineering standard for building modern, scalable and maintainable enterprise web applications using React.

Objective

Define mandatory engineering practices for React applications that prioritize maintainability, accessibility, performance and developer experience.

Philosophy

React should be used to build predictable, composable and reusable user interfaces. Components should remain small, isolated and easy to test. Business logic should never be tightly coupled to the UI.

Principles

  • TypeScript mandatory.
  • Functional Components only.
  • Composition over inheritance.
  • Reusable UI.
  • Accessibility first.
  • Mobile First.
  • Responsive by default.
  • Separation of concerns.
  • Keep components small.
  • Prefer simplicity.

Project Structure

  • rules

Language Features

Virtual Threads

Structured Concurrency

Records

Sealed Classes

Pattern Matching

Collections

Streams

Optional

Exceptions

Logging

Performance

  • React.memo when justified.
  • useMemo only after measurement.
  • useCallback only after measurement.
  • Lazy loading.
  • Code Splitting.
  • Virtualization for large lists.

Security

  • Sanitize user input.
  • Never trust frontend validation.
  • CSP compatible.
  • Avoid XSS.

Testing

  • Vitest.
  • React Testing Library.
  • Playwright.
  • Component testing.

Observability

Documentation

  • README updated.
  • Component documentation.
  • Public APIs documented.

Best Practices

  • TypeScript Strict Mode.
  • Small Components.
  • Custom Hooks.
  • Lazy Loading.
  • React Query.
  • Mobile First.
  • Accessibility.
  • Component Composition.
  • Reusable UI.
  • Design System.

Anti Patterns

  • Class Components.
  • any type.
  • Prop Drilling.
  • Inline Styles.
  • Massive Components.
  • Business Logic inside Components.
  • Duplicated Components.
  • Direct API Calls inside UI.
  • Global Mutable State.
  • Hardcoded URLs.

Review Checklist

  • [ ] TypeScript.
  • [ ] Vite.
  • [ ] Tailwind.
  • [ ] Responsive.
  • [ ] Accessibility.
  • [ ] Lazy Loading.
  • [ ] React Query.
  • [ ] Forms Validated.
  • [ ] Protected Routes.
  • [ ] Docker Ready.
  • [ ] README Updated.

Examples

References

  • https://react.dev/
  • https://vite.dev/
  • https://tanstack.com/query/latest
  • https://react-hook-form.com/
  • https://zod.dev/
  • https://tailwindcss.com/
  • https://testing-library.com/
  • https://playwright.dev/