Where do component-specific .ts files live in a React application?

When working with TypeScript in a React application, organizing your codebase is crucial for maintainability and scalability. One important aspect of code organization is determining where component-specific .ts files should live. In this blog post, we will explore the different options available and provide code snippets for each solution.

Option 1: Collocating with Components

One common approach is to colocate component-specific .ts files with their corresponding React components. This means that each component will have its own folder, containing both the component file and its associated .ts file. This approach keeps related files together and makes it easier to locate and manage component-specific logic.

Here’s an example directory structure:

    ├── src
    │   ├── components
    │   │   ├── Button
    │   │   │   ├── Button.tsx
    │   │   │   └── Button.ts
    │   │   └── ...
    │   └── ...
    

Here’s how you can import the component-specific .ts file in your component:

    // Button.tsx
    
    import React from 'react';
    import ButtonLogic from './Button.ts';
    
    const Button: React.FC = () => {
        // Use ButtonLogic here
        return (
            Button
        );
    };
    
    export default Button;
    

Note that you may need to configure your TypeScript compiler to recognize the .ts file extensions in your project.

Option 2: Separate “containers” Folder

Another approach is to create a separate “containers” folder to hold component-specific .ts files. This approach is useful when you have a large number of components and want to keep the component folders clean and focused on rendering the UI.

Here’s an example directory structure:

    ├── src
    │   ├── components
    │   │   ├── Button
    │   │   │   ├── Button.tsx
    │   │   └── ...
    │   ├── containers
    │   │   ├── ButtonContainer.ts
    │   │   └── ...
    │   └── ...
    

Here’s how you can import the component-specific .ts file in your component:

    // Button.tsx
    
    import React from 'react';
    import ButtonContainer from '../containers/ButtonContainer.ts';
    
    const Button: React.FC = () => {
        // Use ButtonContainer logic here
        return (
            Button
        );
    };
    
    export default Button;
    

Option 3: Shared “utils” Folder

In some cases, you may have component-specific logic that is shared across multiple components. In such scenarios, you can create a shared “utils” folder to hold these .ts files. This approach promotes code reuse and avoids duplication.

Here’s an example directory structure:

    ├── src
    │   ├── components
    │   │   ├── Button
    │   │   │   ├── Button.tsx
    │   │   └── ...
    │   ├── utils
    │   │   ├── ButtonUtils.ts
    │   │   └── ...
    │   └── ...
    

Here’s how you can import the component-specific .ts file in your component:

    // Button.tsx
    
    import React from 'react';
    import { someUtilityFunction } from '../utils/ButtonUtils.ts';
    
    const Button: React.FC = () => {
        // Use utility functions here
        return (
            Button
        );
    };
    
    export default Button;
    

Conclusion

When it comes to organizing component-specific .ts files in a React application, there are multiple approaches you can take. Whether you choose to colocate with components, create a separate “containers” folder, or use a shared “utils” folder, the key is to find a structure that works best for your project and team.

Remember to configure your TypeScript compiler accordingly to recognize the .ts file extensions in your chosen directory structure.