The Component Rules Will Make Your React Architecture Getting Better

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store