Learning to setup a react project manually.
git initCreate a README.md file then stage and commit it.
git add .
git commit -m "chore: initial commit"pnpm initpnpm add react react-dompnpm add -D typescript @types/react @types/react-dom vite @vitejs/plugin-reactCreate .gitignore file and specify these directories inside the file.
node_modules
distExport default the defineConfig and add the react plugin from @vitejs/plugin-react.
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
});Change type to module and add some scripts.
{
"name": "react-setup-assignment",
"version": "1.0.0",
"description": "Learning to setup a react project manually.",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"author": "Ashmin Bhujel <ashminbhujel01@gmail.com>",
"license": "ISC",
"packageManager": "pnpm@10.28.2",
"dependencies": {
"react": "^19.2.4",
"react-dom": "^19.2.4"
},
"devDependencies": {
"@types/react": "^19.2.10",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.2",
"typescript": "^5.9.3",
"vite": "^7.3.1"
}
}pnpm tsc --initBelow is the minimal configuration to work with vite.
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"moduleResolution": "bundler",
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"useDefineForClassFields": true,
"isolatedModules": true,
"noEmit": true,
"skipLibCheck": true,
"allowImportingTsExtensions": true,
"types": ["vite/client"]
},
"include": ["src", "vite.config.ts"]
}Create src/ directory for files like app.tsx, index.css, index.tsx etc.
export default function App() {
return (
<main>
<h1>React Setup Assignment</h1>
<p>Learning to setup a react project manually.</p>
</main>
);
}*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "DM Sans", sans-serif, system-ui;
}
:root {
--background: #09090b;
--foreground: #fafafa;
--muted-background: #18181b;
--muted-foreground: #9f9fa9;
@media (prefers-color-scheme: light) {
--background: #fafafa;
--foreground: #09090b;
--muted-background: #f4f4f5;
--muted-foreground: #71717b;
}
}
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: var(--background);
color: var(--foreground);
}
main {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
}
h1 {
letter-spacing: -0.05em;
}
p {
color: var(--muted-foreground);
}
h1,
p {
animation: blur-fade-up 1.5s cubic-bezier(0.42, 0, 0.19, 1);
}
@keyframes blur-fade-up {
from {
opacity: 0;
transform: translateY(4rem);
filter: blur(1rem);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./app.tsx";
import "./index.css";
createRoot(document.getElementById("root")!).render(
<StrictMode>
<App />
</StrictMode>,
);Create index.html file in project's root directory
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Google fonts (DM Sans) -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
rel="stylesheet"
/>
<title>React Setup Assignment</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/index.tsx"></script>
</body>
</html>