DEV Community

Selahaddin Osmanoglu
Selahaddin Osmanoglu

Posted on

Part 8: Structuring Your React App – Organizing for Growth

Welcome to Part 8 of the React for Beginners series!

Now that you’ve built components, handled state, and managed forms — it’s time to talk about something essential: project structure.

As your app grows, how you organize your files and components matters. A clean structure makes collaboration easier, bugs rarer, and scaling smoother.

📁 Default Vite or CRA Structure

When you create a React app using Vite or Create React App, you usually start with something like:

/src
  ├── App.jsx
  ├── main.jsx
  └── index.css
Enter fullscreen mode Exit fullscreen mode

This works fine for small apps, but quickly becomes messy as components, hooks, styles, and data increase.

🧱 Recommended Folder Structure (Scalable)

Here’s a beginner-friendly structure that grows with your app:

/src
  ├── assets/         # Images, icons, fonts
  ├── components/     # Reusable UI components (Button, Card)
  ├── features/       # Pages or modules (Auth, Todo, Profile)
  ├── hooks/          # Custom hooks (useFetch, useToggle)
  ├── styles/         # Global CSS or utility styles
  ├── App.jsx         # App layout and routing
  ├── main.jsx        # React root render
Enter fullscreen mode Exit fullscreen mode

🧩 Example: Breaking Components into Folders

Let’s say you're building a todo app.

Instead of dumping everything into one file, organize like this:

/src
  ├── features/
  │   └── todo/
  │       ├── TodoList.jsx
  │       ├── TodoItem.jsx
  │       ├── AddTodoForm.jsx
  │       └── todo.css
Enter fullscreen mode Exit fullscreen mode

This keeps related files together and easier to navigate.

🪝 Where Should Custom Hooks Go?

Custom React hooks go in a dedicated hooks/ folder:

/src
  ├── hooks/
      ├── useLocalStorage.js
      └── useFetch.js
Enter fullscreen mode Exit fullscreen mode

🖼 Where Should Static Assets Go?

Put logos, images, and icons in an assets/ folder:

/src
  ├── assets/
      ├── logo.png
      └── avatar.svg
Enter fullscreen mode Exit fullscreen mode

You can import them like this:

import logo from '../assets/logo.png';
Enter fullscreen mode Exit fullscreen mode

💡 Presentational vs Container Components (Optional Concept)

As your app grows, consider separating components into:

  • Presentational – focuses on how things look (UI only)
  • Container – handles logic, state, and data

This isn’t required, but can improve clarity in larger projects.

✍️ Challenge for You

  • Refactor your last form into a features/contact/ folder.
  • Move the form component and its styles into that folder.
  • Create a reusable InputField.jsx component in components/.

✅ Summary

  • Use folders to group related components, features, and logic.
  • Keep your project organized from the start.
  • Use components/, features/, hooks/, and assets/ for clean separation.
  • Structure improves teamwork, readability, and scalability.

🔜 What’s Next?

In Part 9, we’ll add React Router so your app can have multiple pages — without refreshing the browser!

You’re now thinking like a professional developer! 🧠🗂️

Top comments (0)