? React Folder Structure & Entry Point

? Quick Overview

When you create a React app using tools like Vite or Create React App (CRA), a default folder structure is generated for you. Understanding this structure helps you keep your project clean, scalable, and easy to maintain.

The two most important files in the src folder are index.js and App.js. Together they form the entry point of your React application.

? Entry Point = Where your React app starts running

? Key Concepts

Folder Structure organizes your React project into logical parts.
index.js connects React to the HTML file (usually public/index.html).
App.js is the main/root component that returns the UI (JSX).
React renders App.js into a special HTML element with id root.

? React Project Folder Structure

A typical React project (Vite/CRA) looks something like this:

? View Code Example

// Typical React project structure
my-react-app/
│
├── node_modules/        → Installed dependencies
├── public/              → Static assets (favicon, index.html)
├── src/                 → Source code of your React app
│   ├── App.js           → Main component of the app
│   ├── App.css          → Styling for App component
│   ├── index.js         → Entry point that renders the app
│   ├── components/      → Folder for reusable UI components
│   └── assets/          → Images, icons, or other resources
│
├── package.json         → App configuration and dependencies
├── vite.config.js       → (For Vite) Build configuration
└── README.md            → Project documentation

Most of your day-to-day React work happens inside the src folder, especially in index.js and App.js.

⚙️ index.js – The Entry Point

The index.js file is the starting point of every React application. It connects the React code with the HTML file’s root div and tells React where to render your UI.

? View Code Example

// index.js - React app entry file
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

? What this code does

ReactDOM.createRoot(...) creates a React “root” connected to the HTML element with id root.
<App /> is your main component, which contains the rest of the UI.
<React.StrictMode> helps catch potential problems during development.
Once this runs, everything returned by App.js appears inside the browser window.

? App.js – The Main Component

App.js is the root component of your application. It defines what content or components should be displayed on the page.

? View Code Example

// App.js - main UI component
function App() {
  return (
    <div>
      <h1>Welcome to My React App!</h1>
      <p>This content is rendered through App.js</p>
    </div>
  );
}

export default App;

This file is imported into index.js, making it the central piece of your React UI. Any other components you create (like Header, Footer, etc.) are usually used inside App.js.

? How index.js and App.js Work Together

index.js is responsible for rendering the app into the browser.
App.js defines the structure and layout of the UI.
Changes in App.js automatically update the webpage through React’s Virtual DOM.

In simple terms: index.js loads App.js → App.js returns JSX → React renders it into HTML inside the root div.

? Visual Flow

Browser loads public/index.html (which contains a <div id="root">).
index.js finds that root element and creates a React root.
index.js tells React to render the <App /> component into that root.
App.js returns JSX (your UI), which React converts into real DOM elements on the page.

? Tips & Best Practices

Keep index.js clean — it should only handle rendering, not complex logic.
Use App.js as your main container and organize other pages inside a components folder.
Always export your React components using export default (or named exports) for easy imports.
As your app grows, add folders like pages/, hooks/, and context/ to keep things organized.

? Try It Yourself

Open your project folder and locate index.js and App.js in the src directory.
Change the text in App.js to display your name and your favorite quote.
Add a new folder named components/ and create a file Header.js with a heading component.

? View Sample Header.js

// Header.js - simple reusable header
function Header() {
  return (
    <header>
      <h2>My First React Header</h2>
      <p>Organized inside the components folder</p>
    </header>
  );
}

export default Header;

Now import and display the Header component inside App.js:

? View Updated App.js Example

// App.js - using the Header component
import Header from './components/Header';

function App() {
  return (
    <div>
      <Header />
      <p>This content is rendered through App.js</p>
    </div>
  );
}

export default App;