Folder structure best practices in React - Mini Project: Build & Apply

Folder structure best practices in React

📖 Scenario: You are building a simple React app that shows a list of books. To keep your project neat and easy to grow, you want to organize your files well.

🎯 Goal: Create a basic React folder structure with separate folders for components, pages, and data. Then add a simple component and a data file following this structure.

📋 What You'll Learn

Create a data folder with a file books.js exporting an array of book objects

Create a components folder with a BookList.jsx component

Create a pages folder with a Home.jsx page component

Import and use BookList in Home and pass the books data as props

💡 Why This Matters

🌍 Real World

Organizing files well in React projects makes it easier to work with others and maintain the app as it grows.

💼 Career

Understanding folder structure best practices is a key skill for frontend developers working on React applications in teams.

1

Create the books data file

Create a file books.js inside a folder named data. In it, export a constant array called books with these exact objects: { id: 1, title: 'React Basics' } and { id: 2, title: 'Advanced React' }.

React

// Create and export the books array in data/books.js
// Your code here

Need a hint?

Use export const books = [...] to share the data.

2

Create the BookList component

Inside a folder named components, create a file BookList.jsx. Write a React functional component called BookList that accepts a books prop and returns an unordered list (<ul>) with each book's title in a list item (<li>).

React

// Create BookList component in components/BookList.jsx
// Your code here

Need a hint?

Use books.map to create list items for each book.

3

Create the Home page component

Inside a folder named pages, create a file Home.jsx. Import React, the BookList component from ../components/BookList.jsx, and the books array from ../data/books.js. Write a React functional component called Home that returns a <main> element containing <h1>Book List</h1> and the BookList component with the books prop set to the imported books array.

React

// Create Home component in pages/Home.jsx
// Your code here

Need a hint?

Remember to import both BookList and books with correct relative paths.

4

Complete the React app structure

In the root App.jsx file, import React and the Home component from ./pages/Home.jsx. Write a functional component called App that returns the Home component. Export App as default.

React

// Create App component in App.jsx
// Your code here

Need a hint?

Use export default function App() and return the Home component inside.