[React.js] - Part 2. Folder Structure in React + TypeScript with Vite
Ace Lennox
The image shows a React + TypeScript project using Vite. Below is a guide explaining the purpose of each folder and file in this structure.
Folder Structure Overview
Folder and File Explanations
1. node_modules/
This folder contains all the installed dependencies and libraries. It's managed automatically by the package manager (yarn in this case) and shouldn't be modified manually.
2. public/
The public folder holds static assets that are served as-is. Files in this folder can be accessed directly via the root URL.
Example:
vite.svgis placed insidepublic/. You can use it in your HTML or React components by referring to/vite.svg.
3. src/
This folder contains the main source code of your React application.
assets/
This subfolder holds static assets like images, icons, and other resources. In the example,react.svgis stored here.App.tsx
This is the main React component that defines the structure of the application. Typically, it contains routes and high-level components.main.tsx
This is the entry point of the application, where the root React component (App) is rendered into the DOM.
Example:
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>,
)vite-env.d.ts
This is a TypeScript declaration file that provides type definitions for Vite's environment variables.vApp.css&index.css
These files contain the global and component-specific styles.
4. .gitignore
This file lists files and folders that should be ignored by Git, such as node_modules/, .env, and build artifacts.
5. eslint.config.js
This file contains ESLint configuration for linting your code, helping to enforce coding standards and catch potential issues.
6. index.html
This is the main HTML file that Vite serves. The React application is injected into the <div id="root"></div> element in this file.
7. package.json
This file holds metadata about the project and lists its dependencies, scripts, and other configurations. Common scripts include:
dev: Starts the development server.build: Builds the project for production.preview: Serves the built project locally.
8. README.md
This file usually contains documentation about the project, such as how to set it up, run it, and contribute to it.
9. tsconfig.json
This is the main TypeScript configuration file, defining TypeScript options like target version, module resolution, and strict type checking.
10. tsconfig.app.json
This is a specific TypeScript configuration file for the application source code. It extends tsconfig.json and may have custom options for application-specific compilation.
11. tsconfig.node.json
This TypeScript configuration file is typically used for Node.js-related files, such as scripts or server-side code.
12. vite.config.ts
This is the Vite configuration file written in TypeScript. It allows you to customize Vite’s behavior, such as defining plugins, aliases, and build options.
13. yarn.lock
This file is automatically generated by yarn to lock the versions of the dependencies, ensuring consistency across different environments.
Conclusion
This folder structure provides a solid foundation for developing React applications using TypeScript and Vite. The separation of static assets, configuration files, and source code makes the project easier to manage and scale. You can further extend this structure by adding folders for components, hooks, services, and utilities as your project grows.
Source Code
The complete source code for this project is available on GitHub