React-Anleitung · 2/6
Dieses Kapitel ist vorerst nur auf Englisch verfügbar.
This chapter walks through the folders and files generated by Vite's react-ts template, then covers configuration and folder layouts that hold up as a project grows.
my-app/
├── public/
│ └── vite.svg
├── src/
│ ├── assets/
│ │ └── react.svg
│ ├── App.css
│ ├── App.tsx
│ ├── index.css
│ └── main.tsx
├── eslint.config.js
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.node.json
└── vite.config.ts| Path | Purpose |
|---|---|
index.html | The entry point. Vite starts here to find your scripts |
src/main.tsx | Mounts React into the #root element of the HTML |
src/App.tsx | The top-level component |
src/assets/ | Images and fonts imported from code; built file names get a content hash |
public/ | Files copied as-is (favicon, robots.txt and so on) |
vite.config.ts | Vite configuration (plugins, path aliases, dev server) |
tsconfig.*.json | TypeScript settings split between app code (app) and config files (node) |
eslint.config.js | ESLint configuration, including the React hooks rules |
Unlike many bundlers, Vite keeps index.html at the project root and treats it as the entry point. Starting from the src/main.tsx referenced by <script type="module">, it follows imports to load every module.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>my-app</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>main.tsx calls createRoot from react-dom/client to create a React root on the #root element and renders App into it. App-wide providers such as a router, a data-fetching client or a theme usually wrap the tree here as well.
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>,
);{
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
}
}For speed, Vite only transpiles TypeScript and never type-checks it. That is why the build script runs tsc -b first and only calls vite build when there are no type errors. preview serves the build output locally so you can check it.
To write @/components/Button instead of long relative paths like ../../components/Button, register the alias with both Vite and TypeScript.
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
resolve: {
alias: { "@": fileURLToPath(new URL("./src", import.meta.url)) },
},
server: { port: 3000 },
});{
"compilerOptions": {
"paths": { "@/*": ["./src/*"] }
}
}Add the paths entry to compilerOptions in tsconfig.app.json, which type-checks the app code. Using node:url in the config may require npm install -D @types/node.
Vite loads files such as .env, .env.local and .env.production from the project root. Only variables prefixed with VITE_ are exposed to client code, where you read them from import.meta.env.
# .env.local (keep this out of Git)
VITE_API_URL=http://localhost:8080const apiUrl = import.meta.env.VITE_API_URL;
const isDev = import.meta.env.DEV;These values are inlined into the bundle at build time, so anyone can read them. Never put secrets such as API keys into VITE_ variables; handle them on the server instead.
React does not impose a folder structure. A small app is fine with a single src/components/; as it grows, grouping code by feature is a common approach.
src/components/: shared components used across screens, such as buttons and modalssrc/features/<feature>/: the components, hooks and API calls that belong to one featuresrc/hooks/: custom hooks shared between features, such as useDebounce.tssrc/lib/: UI-independent helpers and the API clientsrc/pages/ or src/routes/: page-level components when you use a routerBy convention, component files use PascalCase names like UserCard.tsx and hooks start with use, as in useUser.ts. For styling you can import global CSS, use CSS Modules (Button.module.css) for locally scoped class names, or add a tool such as Tailwind CSS.
index.html is the entry point, and src/main.tsx mounts the React app into #root.npm run build type-checks with tsc -b and then bundles with vite build.vite.config.ts and tsconfig.app.json.VITE_ environment variables are public, so never store secrets in them.
0 Kommentare
Anmelden · Melde dich an, um einen Kommentar zu schreiben.