The Component Rules Will Make Your React Architecture Getting Better

When we create some React App, so confusing when we need to make a decision about when should we create a new component. Where is the folder to save our components? If you have the same thing, let’s start!

Common Components

If you have common components such as buttons, inputs, links, etc, you can create a folder called atoms or your preferred name to save them. It will make you more familiar with a design system. For example, you create button components with different styles such as variants and colors.

Repeated Components

Usually, a website has repeated components such as cards, navbars, wrappers, etc. You can create a folder called molecules to save them. Molecules are usually a combination of atoms that make up a component. For example, card component like this :

Complex UI Components

Please don't stack your code on one file, it will make your file more bloated and make your project difficult to maintain. For example, you will create a component for a Product item in an online store. Please don't make your codes in one file. You can separate your components like this :

• Product.tsx
• ProductPicture.tsx
• ProductDetail.tsx
• ProductAction.tsx

Please ensure that you are creating the correct data flow and logic for that model.

If your component is small but need to be separated, you can write your codes in one file.