8 Items I Added To My React + TypeScript Style Guides

TSX file names, functional component declaration, and more

Including a programming style guide in your React application can have a big impact on the development process. It promotes a sense of structure and provides a format for junior developers to follow. If done right, you can save time in the review process by including things you want to see.

I wanted to share some of the items I have used in the past for my own style guides. Some of them are just personal preferences, while others have effects on performance and file structure.

Hopefully, this list will give you some inspiration if you write your own.

TSX File Names

TSX File names should be Pascal Case. It’s best to have a standard for file naming to keep folders easy to read.

Do:

MyFile.tsx

Don’t:

myFile.tsx
my-file.tsx
my_file.tsx
My_File.tsx

Functional Component Declaration

I prefer const declarations for their succinct nature. Always include the FunctionComponent type to gain access to properties like children

Do:

const MyComponent: React.FunctionComponent = () => {}

Don’t:

const MyComponent = () => {}
function MyComponent() {}

Named Exports

Named exports should be used when a component is part of a component library or any other configuration with many similar exports.

export const MyComponent1: React.FunctionComponent = () => {}
export const MyComponent2: React.FunctionComponent = () => {}

Default Exports

Default exports should be used when a component is used once, or if a file has one export that is not bundled with the rest of a directory.

const MyComponent: React.FunctionComponent = () => {}
export default MyComponent