Overview

This guide provides a structured approach to creating and managing components in a TypeScript React project. It covers best practices for file naming, component declaration, imports, hooks usage, and the organization of utility functions and custom hooks.

File Naming Conventions

• Component Files: Use PascalCase for component file names, e.g., MyComponent.tsx.
• Utility Functions: Use camelCase for utility function files, e.g., calculateTotal.ts.
• Custom Hooks: Use camelCase prefixed with use, e.g., useFetchData.ts.

Declaring a Functional Component

Use the following structure to declare a functional component with proper TypeScript types:

import React, { FC } from 'react';

export type MyComponentProps {
  title: string;
  isVisible: boolean;
}

const MyComponent: FC<MyComponentProps> = ({ title, isVisible }) => {
  if (!isVisible) return null;

  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
};

export { MyComponent };