React Application Structure

Vite + React + TypeScript Project Structure

Your project is a React + TypeScript + Vite application. The structure shown is:

first-app/
│
├── node_modules/
├── public/
│
├── src/
│   ├── assets/
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   └── main.tsx
│
├── .gitignore
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

Let's understand each one.

1. node_modules/

node_modules/

This folder contains all installed npm packages required by your application.

For example, your project may depend on:

react
react-dom
vite
typescript
eslint

When you execute:

npm install

npm downloads the required packages into node_modules.

Important

You normally don't manually edit this folder.

You also generally don't commit it to Git because it can be recreated from package.json and package-lock.json.

package.json
      ↓
   npm install
      ↓
node_modules/

2. public/

public/

This directory contains static files that should be served directly without being processed by the application bundler.

For example:

public/
├── logo.png
├── favicon.ico
└── robots.txt

You can reference them using a root-relative URL:

<img src="/logo.png" />

The file is served directly from the application's root.

When to use public

Use it for files that:

• Don't need importing
• Need a fixed public URL
• Should be copied as-is

For normal images used by React components, src/assets is often preferable.

3. src/

This is the most important directory in your React application.

src/

src means source.

This is where you normally write your application code.

Your current src contains:

src/
├── assets/
├── App.css
├── App.tsx
├── index.css
└── main.tsx

Most of your React development will happen inside this folder.

4. src/assets/

src/
└── assets/

This folder is generally used for application assets such as:

images
icons
SVG files
fonts
other static resources

For example:

assets/
├── logo.svg
├── profile.png
└── banner.jpg

You can import an asset into a React component:

import logo from "./assets/logo.svg";

Then:

<img src={logo} alt="Logo" />

The important difference is:

public/
   ↓
Directly accessible

src/assets/
   ↓
Imported and processed by Vite

5. App.tsx

This is your main React component.

The .tsx extension means:

TypeScript + JSX

A typical App.tsx looks like:

function App() {
    return (
        <div>
            <h1>Hello React</h1>
        </div>
    );
}

export default App;

Think of App as the main UI component of your application.

Your application can eventually become:

App
│
├── Header
├── Navigation
├── Home
├── Products
├── Footer
└── ...

You will eventually break large applications into many smaller components.

6. App.css

App.css

This contains CSS specifically associated with your App component.

For example:

.title {
    font-size: 30px;
}

Then:

<h1 className="title">Hello React</h1>

It is common to have:

App.tsx
   ↓
App.css

However, this isn't a strict requirement. You can organize CSS differently as your application grows.

7. index.css

index.css

This is generally used for global CSS.

For example:

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

You might also put:

* {
    box-sizing: border-box;
}

Global styles apply across your application.

Conceptually:

index.css
    ↓
Entire React application

App.css
    ↓
Styles associated with App

8. main.tsx

This is a very important file.

It is the entry point of your React application.

A typical Vite React application has something similar to:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(
    <StrictMode>
        <App />
    </StrictMode>
);

Let's understand the flow.

Step 1

import App from "./App.tsx";

Import your main React component.

Step 2

document.getElementById("root")

Find the HTML element with:

<div id="root"></div>

Step 3

createRoot(...)

Creates a React root.

Step 4

<App />

Tells React to render your App component.

So the complete flow is:

index.html
    │
    │ <div id="root">
    ▼
main.tsx
    │
    │ renders
    ▼
App.tsx
    │
    ▼
React Components
    │
    ▼
Browser UI

main.tsx is therefore the bridge between your HTML page and your React application.

9. .gitignore

.gitignore

This tells Git which files/folders should not be committed to your repository.

For example:

node_modules/
dist/
.env

Why ignore node_modules?

Because it can contain thousands of files and can be regenerated using:

npm install

So instead of committing:

node_modules/

you commit:

package.json
package-lock.json

and another developer can run:

npm install

10. eslint.config.js

eslint.config.js

This contains the configuration for ESLint.

ESLint analyzes your JavaScript/TypeScript code and identifies potential problems.

For example, it can detect:

unused variables
incorrect coding patterns
potential bugs
style issues
React-specific issues

For example:

const name = "Syed";

If name is never used, ESLint may warn you.

ESLint helps maintain code quality and consistency.

11. index.html

This is your application's HTML entry page.

A Vite React application typically has something similar to:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>First App</title>
</head>

<body>
    <div id="root"></div>

    <script type="module" src="/src/main.tsx"></script>
</body>
</html>

The important part is:

<div id="root"></div>

React uses this element as the mounting point.

And:

<script type="module" src="/src/main.tsx"></script>

loads your React entry point.

So:

index.html
    │
    └── main.tsx
          │
          └── App.tsx
                │
                └── React UI

12. package.json

This is one of the most important files in any Node/React project.

It describes your project and its dependencies.

For example:

{
    "name": "first-app",
    "version": "0.0.0",
    "scripts": {
        "dev": "vite",
        "build": "tsc -b && vite build",
        "lint": "eslint .",
        "preview": "vite preview"
    }
}

It also contains dependencies such as:

"dependencies": {
    "react": "...",
    "react-dom": "..."
}

and development dependencies such as:

"devDependencies": {
    "vite": "...",
    "typescript": "...",
    "eslint": "..."
}

Scripts

When you execute:

npm run dev

npm looks in:

package.json
    ↓
scripts
    ↓
"dev": "vite"
    ↓
Vite starts

Similarly:

npm run build

creates the production build.

13. package-lock.json

package-lock.json

This file records the exact dependency versions installed for your project.

For example:

package.json
      ↓
Allowed dependency versions

package-lock.json
      ↓
Exact versions actually installed

This helps ensure that different developers or CI/CD environments install consistent dependency versions.

You normally don't manually edit this file.

When you run:

npm install

npm manages it automatically.

14. README.md

README.md

This is documentation for your project.

You can describe:

Project purpose
Installation
How to run
Build commands
Configuration
Deployment
API information

For example:

# First App

React application built using Vite.

## Run

npm install

npm run dev

This file is particularly useful when putting the project on GitHub.

15. tsconfig.json

This is the main TypeScript configuration file.

TypeScript needs to know how it should compile/check your TypeScript code.

For example, configuration can control:

Target JavaScript version
Module system
Strict type checking
Module resolution
Type checking rules

Your project has additional TypeScript configuration files because modern Vite projects separate configuration for different environments.

16. tsconfig.app.json

tsconfig.app.json

This configuration is specifically associated with your application source code.

It controls TypeScript behavior for files such as:

src/
├── App.tsx
├── main.tsx
└── components/

For example, it can control strict type checking and JSX-related TypeScript behavior.

Conceptually:

tsconfig.app.json
        ↓
React Application
        ↓
.ts / .tsx files

17. tsconfig.node.json

tsconfig.node.json

This is used for TypeScript code that runs in the Node.js environment, particularly configuration/tooling files.

Your project has:

vite.config.ts

which runs in the Node/Vite tooling environment rather than inside the browser.

So the distinction is roughly:

tsconfig.app.json
        ↓
Browser application
        ↓
React code


tsconfig.node.json
        ↓
Node.js tooling
        ↓
Vite configuration

18. vite.config.ts

This is the Vite configuration file.

Because you're using TypeScript, the configuration file is:

vite.config.ts

A typical file looks like:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
    plugins: [react()],
});

The important part is:

plugins: [react()]

This tells Vite that the project uses React.

As your application becomes more advanced, you can configure things such as:

API proxy
Plugins
Path aliases
Build configuration
Development server
Environment-specific settings

For example, you may eventually configure:

React
  ↓
Vite
  ↓
Proxy /api
  ↓
ASP.NET Core API

which can be very useful for your .NET + React projects.

19. How Everything Connects

This is the most important part to understand.

                     package.json
                          │
                          │ dependencies
                          ▼
                     node_modules
                          │
                          │
                          ▼
┌─────────────────────────────────────────┐
│                  Vite                   │
│             vite.config.ts              │
└────────────────────┬────────────────────┘
                     │
                     ▼
                index.html
                     │
                     │ loads
                     ▼
                 main.tsx
                     │
                     │ imports
                     ▼
                  App.tsx
                     │
             ┌───────┴────────┐
             ▼                ▼
          App.css         Components
                              │
                              ▼
                          React UI

And CSS:

index.css
   ↓
Global styles

App.css
   ↓
App/component styles

20. What Happens When You Run npm run dev?

The complete process is approximately:

npm run dev
      │
      ▼
package.json
      │
      ▼
Vite starts
      │
      ▼
index.html
      │
      ▼
main.tsx
      │
      ▼
App.tsx
      │
      ▼
React renders components
      │
      ▼
Browser displays UI

This is the basic architecture you should understand before moving into React components, JSX, props, state, and hooks.