Inside a React Project: Understanding Every File and Folder (with TypeScript)

1. Introduction

When you open a React + TypeScript project for the first time, it can feel overwhelming—so many files, so many configs!
But once you understand what each piece does, you’ll see that every file plays a clear role in helping your UI come alive in the browser.

In this guide, we’ll break down the anatomy of a modern React project (using Vite + TypeScript as our reference).
By the end, you’ll know exactly how .tsx, .ts, package.json, and other files work together to render your UI.

---

2. Folder & File Overview — The Big Picture

Here’s what a typical React + TypeScript project looks like:

my-react-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   ├── components/
│   └── assets/
├── package.json
├── tsconfig.json
├── vite.config.ts
├── .eslintrc.cjs
└── README.md

Key sections:

• public/ → Static files and the base HTML document.
• src/ → All your TypeScript and React code.
• Config files → Control compilation, bundling, and linting.

---

3. The src Folder — The Heart of UI Rendering

a. App.tsx

This is your root component — it defines what appears inside the main UI area.

.tsx means the file combines TypeScript + JSX (so you can write HTML-like syntax while keeping strong type safety).

Example:

function App() {
  return <h1>Hello from React + TypeScript!</h1>;
}

export default App;

b. main.tsx

This file mounts your React app to the browser’s DOM using ReactDOM.createRoot().

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'

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

This connects your React component tree to the <div id="root"> in index.html.

c. Components Folder

Houses reusable components — buttons, cards, forms, etc.
Convention: .tsx for components and .ts for helper logic (no JSX).

---

4. TypeScript Files — .ts vs .tsx

File Type	Used For	JSX Allowed	Example
.ts	Pure TypeScript logic, utilities	❌	helpers.ts
.tsx	Components containing JSX	✅	App.tsx

The TypeScript compiler converts .ts and .tsx to JavaScript.
Vite then bundles everything efficiently, performing type-checks along the way.

Bonus: TypeScript ensures props, hooks, and components are used correctly — reducing runtime errors.

---

5. package.json — The Project Brain

package.json defines the project’s identity and dependencies.

Example:

{
  "name": "my-react-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "typescript": "^5.2.0",
    "vite": "^5.0.0"
  }
}

• scripts → short commands to run dev server or build.
• dependencies → runtime libraries.
• devDependencies → tools for development/building.

When you run npm run dev, Vite starts the local development server and begins watching for changes.

---

6. Build and Config Files

a. vite.config.ts

Vite’s configuration file — controls plugins, aliases, and environment variables.

Example snippet:

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': '/src' },
  },
})

b. tsconfig.json

Configures the TypeScript compiler’s behavior.

Example:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

It defines how TypeScript interprets your files, JSX, and import paths.

c. .eslintrc.* / .prettierrc

Maintain code quality and style consistency.
They help catch syntax issues before runtime.

---

7. public/index.html — The Root of the UI

This is the base HTML document that the React app mounts into.

Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>React + TypeScript App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

The <div id="root"> is where your React app is injected and rendered.
Vite automatically replaces the script tag with optimized bundles during build.

---

8. The Build & Rendering Flow

Here’s what happens behind the scenes when you run npm run dev or npm run build:

1. Vite launches a dev server.
2. TypeScript compiles .ts/.tsx → JavaScript.
3. Vite bundles your code and dependencies.
4. ReactDOM mounts your app into the browser DOM.
5. Browser paints the UI based on the virtual DOM.
6. (Optional) SSR/Hydration fills in server-rendered content for performance.

In short: Your source files → compiled + bundled → HTML injection → rendered UI.

---

9. Best Practices for Structuring React Projects

✅ Organize by feature instead of only file type.
✅ Keep components small and reusable.
✅ Document your configs.
✅ Use .env files for environment-specific values.
✅ Keep linting/formatting consistent across teams.

---

10. Conclusion

Understanding each file’s purpose turns React projects from “mystery machines” into well-orchestrated systems.

Now that you know how .tsx, .ts, and config files power your UI rendering — open your own project and trace the flow from App.tsx → main.tsx → index.html.

Next up on UtilityZone: A deep dive into how React + Vite collaborate to deliver lightning-fast builds and hot module replacement (HMR).

---

Keywords: React project structure, React TypeScript tutorial, package.json explained, tsconfig.json, vite.config.ts, React rendering flow, tsx vs ts