# React

We declare React components using arrow function notation. Utility functions that exist outside of React components often do use function instead of arrow functions. Prefer typing props after deconstructing them, instead of typing the function using React.FC<TProps> or similar.

There should be only one React component per file. Other functions can live in the same file if there is reason to have them outside the component. Components generally have their own folders containing index.tsx and index.test.tsx, which contain the components and test respectively. In cases where a component depends on components that only relate to it, these other components will have their own folders.

type ExampleProps = {
  foo: string;
  bar?: number;
};

const Example = ({ foo, bar }: ExampleProps) => {
  return <div>Example</div>;
};

export { Example };

We prefer using named exports instead of default exports for React components in new code. Top-level components that are lazy-loaded are an exception to this, because lazy loading requires default exports.

Components generally have their own folders containing index.tsx and index.test.tsx, which contain the components and test respectively. In cases where a component depends on components that only relate to it, these other components will have their own folders.

• Folders containing components are nearly always named the same as the components inside them. They also always start with capital letters.
• The index should export a component whose name matches the folder name. On some occasions we may have supporting components in the same folder that it utilizes.
• Folders that are collections of other components (/apps, /change-request-forms, etc.) should use lower-case kebab case.