Nugsoft Developer Guides

Coding Standard in React 19

Consistent coding standards improve maintainability and collaboration. React 19 projects should follow the official React style guide and modern JavaScript/TypeScript best practices.

General Principles

  • Use the React Style Guide for all code.
  • Prefer function components and hooks for new code.
  • Use TypeScript for type safety and better tooling.
  • Organize code into small, reusable components and custom hooks.
  • Avoid logic in JSX; keep business logic in hooks or utility functions.

Naming Conventions

  • Use PascalCase for component names (e.g., MyComponent.js).
  • Use camelCase for props, events, and variables.
  • Prefix custom hooks with use (e.g., useFetch, useAuth).
  • Use kebab-case for file names and folders.

File Structure

  • Place components in src/components/.
  • Place hooks in src/hooks/.
  • Use src/pages/ for route-level components.

Example: Function Component with Hook

import { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Linting & Formatting

  • Use ESLint with the React plugin and Prettier for formatting.
  • Enforce linting and formatting in CI pipelines.

References

Back to Top