Creating a new file

Nesting components

In order to have consistent, easy to navigate react projects we follow a certain folder structure.

Creating a new file

Files should be named the name of the function that is exported from the file

// Name of file
MyComponent.tsx

//Component in file
export const MyComponent = () => {}

Shared folders

We have aliases to help with sharing code click here to learn more.

Here is our root folder structure

src/
	atoms/
	molecules/
	organisims/
	hooks/
	contexts/
	helpers/
	pages/
	App.tsx

Local folders

We want to be separating business logic, implementation logic and the view for better code organization, readability and easier testing click here to learn more. When doing this we want to make it as easy as possible for people to find the code for the current screen you are on so they know when they could reuse something that has already been created. So we separate our local hooks, helper functions and nested components. To see a real world use of this check out the Portfolio screen.

// folder structure if additional nested compenents are needed.
Home/
	hooks/
	helpers/
	components/
	HomeStack.tsx // React Native only navigation stack component
	HomeProvider.tsx
	Home.tsx
	Home.test.tsx

Nesting components

If there are children that are dependencies of a function we should nest them. Create a folder as the name of the exported function and move all dependencies into that folder.

MyComponent/
	MyComponent.test.tsx
	MyComponent.tsx

import 'MyComponent/MyComponent'