[React.js] - Part 2. Folder Structure in React + TypeScript with Vite

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.svg is placed inside public/. 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.svg is 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:

• 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