How I Simplified My React Project Using Feature-Based Component Structure

#react #webdev #frontend #fullstack

Recently, I learned React.js, including how frontend development works, how to make the frontend responsive, and how to make reusable components. The only part that was missing to become a full-stack developer is now fulfilled.

Now, I am officially a full-stack developer.

In the journey of becoming a full-stack developer, I picked one project and improved it. First, I learned Node.js, Express.js, and MongoDB and developed one project using these technologies.

The project I developed had many issues, so I built the same project again from scratch using the same technologies. At this point, I learned how to make a backend, but I wanted to learn Fastify and PostgreSQL, so I learned both of them.

After learning Fastify and PostgreSQL, I built the same project using these technologies, and this helped me understand the backend deeply. Now, I have learned how to make backend APIs and databases.

But one part was missing to develop a full product, and that is the frontend. I only knew how to make backend APIs and design databases.

A month ago, I started learning how the frontend works, learned React.js, and other things like routers, hook-forms, localStorage, stores, etc. After learning the frontend, I made a React app for my backend project.

But I didn’t know how to manage components, so I created components in a way that made my project complex to manage. I simply created one parent folder named "components", and in the parent folder, I created multiple subfolders like Button for the Button component, Login for the login page, Input for input fields, Register for the register page, Select for the dropdown component, Footer for the footer component, and so on.

This means that I made one subfolder for each component, and now I realize this structure made it complex to manage all components.

Why I Chose Feature-Wise Component Structure

At this point, I decided to learn component structure next. I found many structures for managing components, but feature-wise component management is best for me.

Why is it best for me? The answer is the backend project I built. In the project, I built role-wise login, logout, and features.

Due to my backend project, I needed login, logout, register pages, and components for both roles. The feature-wise structure is best for me.

How Feature-Wise Structure Works

In a feature-wise structure, we build two main folders — the first one is "components" and the second one is "features". Now, we build role-wise subfolders in the "features" folder.

In the "components" folder, we build components that are reusable for other components like Input, Button, and Select components. This is the main concept of the feature-wise component structure.

The pages or components used for a specific feature that refers to a specific role are created in the role-wise folder. This structure removes complexity, which was a problem for me.

Now, I add more components or features, and I manage all of this in a simple way. You get an idea from the reference image that I attached.