Lets take a look at the directory of the src/ folder

api/
components/
store/
types/
views/
App.tsx
index.tsx

There is no “best” folder structure. It’s entirely up to the developers, and this structure above definitely helps organize our code efficiently.

api/

This folder contains all the api calls that the client makes to the server. We use Axios to make http requests. Read the guide here:

HTTP Requests & Axios

components/

This folder contains all components/widgets used in your site. It could be as simple as a button (like in the boilerplate currently), or as advanced as a configuration panel. But at the end of the day, if your component can be broken into smaller sub-components, then DO IT!

Let’s say that you had a table with a table header and rows as one component as Table.tsx (note that all components are in UpperCamelCase!). Though it may seem unnecessary, you need to break this component into sub-components. Here’s what the file structure may look like:

src/components/
	Table/
		index.ts
		**Table.tsx**
		TableRow/
			index.ts
			**TableRow.tsx**
		TableHeader/
			index.ts
			**TableHeader.tsx**

For more details about folder structure (and why there’s an index.ts in every folder), read here:

Folder Structure

Breaking your components into smaller sub-components helps with keeping your files more readable (since less code per file), is much easier to debug (since you can pinpoint the exact sub-component), and has many more benefits. Even if it seems too extra, make sure to still break your component down.

store/

Store generally refers to a storage system (e.g. database). In this case, we use Redux as our state management, so this folder is dedicated to its slices. Read about Redux here:

Redux

types/

This folder contains all the global and defined types for Typescript. If you find yourself declaring the same type in more than two different files, you should declare it under types/. If many files are using the same type, you should declare it in global.d.ts

views/

This folder contains the “views” or “pages” that you want to have in your website.