React Academy · Lesson

Folder Structure & Naming Conventions

Organize a React project with feature-based folders and clear file names.

Folder Structure & Naming Conventions is a free React Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will explore common folder structures for React projects, learn naming conventions for files and components, and understand how to organise code as the project grows.

The Default Structure

A minimal Vite + React project has `src/App.jsx` and `src/main.jsx`. This is fine for small demos but does not scale. As you add features, create dedicated folders to keep related code together.

src/
  main.jsx
  App.jsx
  index.css

Feature-Based Structure

Group files by feature rather than by type. Each feature folder contains its component, styles, tests, and helper functions. This makes it easy to add or delete a whole feature at once.

src/
  features/
    auth/
      LoginForm.jsx
      LoginForm.test.jsx
      useLogin.js
    dashboard/
      Dashboard.jsx
      useDashboardData.js
  components/     <- shared UI only
  hooks/          <- shared hooks
  lib/            <- utilities

Component File Naming

Name component files with **PascalCase** matching the component name: `UserCard.jsx`, `NavigationBar.jsx`. One component per file is the standard. Using `.jsx` (or `.tsx`) tells editors the file contains JSX.

Non-Component File Naming

Hooks, utilities, and constants use **camelCase**: `useAuth.js`, `formatDate.js`, `apiClient.js`. Test files mirror their source with `.test` or `.spec`: `useAuth.test.js`.

Index Files for Clean Imports

Adding an `index.js` to a folder lets you import from the folder path instead of the full file path. Keep index files as re-exports only — no logic.

// src/features/auth/index.js
export { LoginForm } from './LoginForm';
export { useLogin } from './useLogin';

// Consumer
import { LoginForm } from '@/features/auth';

Absolute Imports with Path Aliases

Configure a `@/` alias pointing to `src/` in `vite.config.js` and `tsconfig.json`. This avoids fragile relative paths like `../../../../components/Button`.

// vite.config.js
resolve: {
  alias: { '@': path.resolve(__dirname, 'src') }
}

Shared Components vs Feature Components

Put components used in only one feature inside that feature's folder. Move a component to `src/components/` only when two or more features need it. Avoid premature extraction.

Constants & Config Files

Store magic strings, API base URLs, and environment variable wrappers in `src/lib/constants.js` or `src/config.js`. Never scatter `process.env.VITE_API_URL` strings across many files.

// src/config.js
export const API_BASE = import.meta.env.VITE_API_URL;

Types & Interfaces (TypeScript)

In TypeScript projects, co-locate types with the feature or component that uses them. For shared types used across many features, create `src/types/` with one file per domain area.

Quick Check

What is the main advantage of a feature-based folder structure over a type-based structure?

Recap

Use feature-based folders, PascalCase for component files, camelCase for hooks and utilities, index.js re-exports for clean imports, and a path alias like @/ to eliminate long relative paths.

Course Complete

Congratulations! You finished **React Strict Mode & Best Practices**. You now understand StrictMode behaviour, how to write pure render functions, correct key and ref usage, and a scalable folder structure.

Frequently asked questions

Is the “Folder Structure & Naming Conventions” lesson free?

Yes — the full text of “Folder Structure & Naming Conventions” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Folder Structure & Naming Conventions”?

Organize a React project with feature-based folders and clear file names. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Folder Structure & Naming Conventions” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

What StrictMode Does
Pure Components & Avoiding Side Effects in Render
Key & Ref Best Practices
Folder Structure & Naming Conventions

← Back to React Academy