Skip to main content

Posts

React folder structure

  Your proposed folder structure—separating components and pages —is a very common and practical starting point for React applications, especially when using routing libraries like React Router. Here is how to think about this structure, along with a few minor corrections and improvements. Clarification on Your Structure src/pages : Contains the main page views of your app (e.g., Home.jsx , About.jsx , Dashboard.jsx ). Each page represents a distinct route/URL in your application. src/components : Contains reusable UI elements (e.g., Button.jsx , Navbar.jsx , Card.jsx ) that get imported into your pages or used across multiple areas. How to Think About Structuring React Apps Instead of placing all components into one massive components folder as your app grows, it helps to organize components by reusability and scope : Shared / Generic Components ( src/components/common or src/components/ui ) : UI building blocks like buttons, modals, input fields, and headers that don't depend...