Nugsoft Developer Guides

Project Structure in React 19

A well-organized project structure improves maintainability, scalability, and collaboration. Follow these conventions for React 19 projects:

Recommended Structure

my-react-app/
├── public/                # Static assets (favicon, index.html)
├── src/
│   ├── assets/            # Images, fonts, etc.
│   ├── components/        # Reusable UI components
│   ├── hooks/             # Custom hooks for logic reuse
│   ├── features/          # Feature modules (optional for large apps)
│   ├── pages/             # Route-level components
│   ├── store/             # State management (Redux, Zustand, etc.)
│   ├── locales/           # i18n translation files
│   └── App.jsx            # Root component
├── .env                   # Environment variables
├── package.json           # Project metadata and scripts
├── vite.config.js         # Vite configuration (or next.config.js)
└── README.md              # Project documentation

Naming Conventions

  • Use PascalCase for component files (e.g., UserProfile.jsx).
  • Use kebab-case for folders and assets (e.g., user-profile/, logo.svg).
  • Prefix custom hooks with use (e.g., useAuth.js).

Modular Structure

  • For large projects, organize by feature/domain (e.g., features/auth/, features/dashboard/).
  • Keep shared components and hooks in their respective folders.

References

Back to Top