How I structure and organize my reactjs components
React is all about components. Better structure helps you to easily debug your app, and understand how the flow is going on, and also as your project grows it becomes easy to manage everything. Now, React doesn't care how you structure your project and components. So in this blog, I am going to share how I structure my project and its components.
Let's get started
Before we start
- In this article, I don't use any styling framework just plain CSS(sass).
- Also plain react 😅.
If you like this structure you can download it from here.
Apart from configurations actual react project starts from the
src/ folder. So let's directly jump into it.
I always separate client and server logic even for a small project because it helps to focus on one thing and it makes the project less messy.
Quickly know what each folder contains:
- app/ - This folder contains actual react app.
- common/ - This folder contains components that can be used anywhere in the project.
- pages/ - This folder contains all the common pages of the website.
- assets/ - All the assets like images, audios etc.
- styles/ - This folder contains global styles like Sass variables, mixins, functions etc.
Let's dig deep
Home.jsx is a route and page. The idea is to imagine each page as a separate HTML file and it contains different sections as components.
The common folder contains components that are used by other components like loading animations, custom buttons, custom hooks, etc.
The app folder contains the main app with all the features like the dashboard, profile page, etc. So you can think app folder as the actual app that unlocks after login.
Now let's take a look at how I structure a component.
Component name, the file name that contains the component, style sheet file name of the respective component will be the same.
Here's how I structure a component-
⚒️ Tool of the week ⚒️
While designing a website we get confused about what to include on different pages. For example, what all things need to be included on the pricing page? Here comes this website to rescue.
Thanks for reading!
LEAVE A COMMENT OR START A DISCUSSION
5 min read
Hiring Angular Developers in 2023: Insider Tips & Strategies
Does your company struggle to create a modern, high-performance, cross-platform web app? Do you desire cost-effective development without compromising future software quality? Many web development teams utilize Angular to build complicated single-page apps. Hiring Angular programmers is difficult.
8 min read
How Feature Flags Can Help You Ship Faster and Smarter?
Are you tired of long development cycles and hesitant to push new features to production? Feature flags may be the solution you're looking for. In this blog post, we'll explore how feature flags can streamline your development process, reduce the risk of errors, and give you more control over the features you release to your users. From testing new features to rolling out changes to a select group of users, feature flags can help you do it all. Keep reading to learn how you can start using feature flags in your development workflow today.