Skip to Main Content
Learning JavaScript Design Patterns, 2nd Edition
book

Learning JavaScript Design Patterns, 2nd Edition

by Addy Osmani
April 2023
Intermediate to advanced content levelIntermediate to advanced
298 pages
6h 44m
English
O'Reilly Media, Inc.
Book available
Content preview from Learning JavaScript Design Patterns, 2nd Edition

Chapter 14. Application Structure for React.js

When building small hobby projects or trying a new concept or library, developers can start adding files to a folder without a plan or organizing structure. These could include CSS, helper components, images, and pages. A single folder for all resources becomes unmanageable as the project grows. Any respectably sized codebase should be organized into an application folder structure based on logical criteria. The decision on how to structure your files and application components could be a personal/team choice. It would also generally depend on the application domain and technology used.

This chapter mainly focuses on folder structures for React.js applications that could help in better management of our projects as they grow.

Introduction

React.js itself does not provide a guideline on structuring projects but does suggest a few commonly used approaches. Let’s look at these and understand their pros and cons before discussing folder structures for projects with added complexities and Next.js applications.

At the high level, you can group files in a React application in two ways:

Group by feature

Create folders for every application module, feature, or route.

Group by file type

Create folders for different types of files.

Let us look at this classification in detail.

Group by Module, Feature, or Route

In this case, the file structure would mirror the business model or the application flow. For example, if you have an ecommerce ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Modern JavaScript From The Beginning

Modern JavaScript From The Beginning

Brad Traversy
Node.js Design Patterns - Third Edition

Node.js Design Patterns - Third Edition

Mario Casciaro, Luciano Mammino

Publisher Resources

ISBN: 9781098139865Errata PageSupplemental Content