Project structure overview in React - Mini Project: Build & Apply

Project Structure Overview in React

📖 Scenario: You are building a simple React app that shows a list of favorite fruits. To keep your code organized, you will create the basic project structure step-by-step.

🎯 Goal: Build a React app with a clear project structure: a main component, a data file, and a configuration file. You will import and use these parts together.

📋 What You'll Learn

Create a data file with a list of fruits

Create a config file with a title string

Create a main React component that imports and uses the data and config

Render the list of fruits with the title in the app

💡 Why This Matters

🌍 Real World

Organizing React projects into clear files helps teams work together and keeps code easy to maintain.

💼 Career

Understanding project structure and module imports is essential for React developers working on real applications.

1

Create the data file with fruits list

Create a file named fruits.js that exports a constant array called fruits with these exact values: 'Apple', 'Banana', 'Cherry'.

React

// Your code here

Need a hint?

Use export const fruits = [...] to create and export the array.

2

Create the config file with app title

Create a file named config.js that exports a constant string called appTitle with the exact value 'My Fruit List'.

React

// Your code here

Need a hint?

Use export const appTitle = 'My Fruit List'; to create and export the title string.

3

Create the main React component

Create a React functional component named FruitList in a file FruitList.jsx. Import fruits from ./fruits.js and appTitle from ./config.js. Inside the component, return a <main> element with a <h1> showing appTitle and an unordered list <ul> that maps over fruits to create <li> items for each fruit.

React

// Your code here

Need a hint?

Use fruits.map() inside the JSX to create list items. Remember to add a key prop.

4

Render the FruitList component in the app

In the main app file App.jsx, import the FruitList component from ./FruitList.jsx. Create a functional component named App that returns the <FruitList /> component. Export App as the default export.

React

// Your code here

Need a hint?

Import FruitList and return it inside the App component. Export App as default.