An Opinionated Guide to React

Component file structure

#2 Component File Structure

Intro

I’ve been working with React for over four years. During this time, I’ve formed some opinions on how I think applications should be. This is the second part of a series of such opinionated pieces.

Component File Structure

I have a convention that I use when creating component files. I like to put the things that I find the most important at the top and anything that is not necessary for someone using my component to know at the bottom.

File Structure

When I use a component, I ask myself these questions:

• Is this component fetching any data?
• What are the props that this component is expecting?
• What does this component render?

This is why I lay my files out this way:

• Queries first: The first thing I want to see is what external data this component is using, if any. That’s why I put my GraphQL calls at the top of the file. When I first open the file, I can see that this component is fetching a list of movies, and I know what the shape of that response will be. I put my GraphQL queries in the same file as the component consuming them because I don’t want to have to jump between files to know what’s being fetched.
• Type definitions: I follow the data dependencies with the type definitions for the component. This way I know what props this component needs for me to pass in.
• The actual component: This is when I place the code for my component. After I know what data it is fetching and what props it needs, I want to know what JSX is actually being rendered. I use a named export and export the component inline so that it’s easier to change the name of the component if needed.
• Subcomponents: In my previous piece, An Opinionated Guide to React Folder Structure and File Naming, I mentioned that I like to have any subcomponents related to the current component in the same file. I place these after the main component since it is not required for a user to know about these components at all.

Wrapping Up

This is the second installment in a series of pieces I will be writing. If you enjoyed this, please comment below. What else would you like me to cover? As always, I’m open to recommendations.

Thanks for reading.