* React Practice Module 0 *
1.
Que : What is the meaning of this ?
Ans :
That config means the root tsconfig.json itself doesn’t compile code ("files": []).
Instead, it just points to other configs (tsconfig.app.json and tsconfig.node.json) using "references".
It’s like a manager: the root doesn’t build anything, it just tells TypeScript to build those two projects.
2.
Que : What is the meaning of all this ?
Ans : This file is your Vite config. It basically says: “Hey Vite, I’m using React. Apply React plugin magic and watch for
changes while building or serving the app.”
3.
Que : Explain the meaning of each key pair.
Ans : This config is optimized for modern React development with Vite, focusing on type safety, linting, and smooth
bundling.
4.
Que : What is the meaning of this and what is '///' ?
Ans : It tells TypeScript about Vite’s built-in types (like import.meta.env).
/// is a triple-slash directive in TypeScript.
It’s a special comment that gives compiler instructions, usually to:
● Include types from another package (/// <reference types="..." />)
● Add references to other files
It’s not regular code — it’s like a note to TypeScript only.
5.
Que : What is the StrictMode ?
Ans : <StrictMode> is a React component that doesn’t render anything visible — it’s a tool for highlighting
potential problems in your app.
Here’s what it does:
● Detects unsafe lifecycles in class components.
● Warns about deprecated APIs.
● Checks for side effects in certain hooks (like useEffect).
● Runs some functions twice in development to help spot bugs early.
It only affects development mode — nothing changes in production.
Think of it as a safety net for your React app: it catches mistakes before they become real bugs.
6. What is Vite ? What are its advantages and disadvantages ?
Ans : Vite is a fast frontend build tool for modern web apps. It serves code via ES modules in the browser during
development and bundles for production using Rollup.
Advantages:
● Super fast dev server & hot reload
● Works well with React, Vue, etc.
● Easy TypeScript support
● Small, optimized production builds
Disadvantages:
● Needs modern browsers in dev
● Smaller plugin ecosystem than Webpack
● Extra setup needed for backend or SSR
In short: Vite is fast, modern, and developer-friendly, but it assumes a modern JS ecosystem. It’s perfect for
React/Vue apps in 2025, especially during development.
7. What are bundlers ? Is vite a bundler ?
Ans : A bundler is a tool that takes all your JavaScript, CSS, and other assets and combines them into a few files
that browsers can load efficiently. Examples: Webpack, Rollup, Parcel.
Vite is not a traditional bundler.
● During development, it serves your code directly via ES modules (no bundling).
● During production, it uses Rollup under the hood to bundle your files.
So, Vite is more like a dev server + build tool that only bundles when needed.
8. What was used before Vite ?
Ans : Before Vite became popular, most frontend projects used Webpack as the main build tool.
Other tools included:
● Parcel – zero-config bundler, simpler than Webpack
● Browserify – older tool to bundle JS for browsers
● Gulp / Grunt – task runners often combined with bundlers
The problem was : Webpack and these tools were slow for modern large projects, especially during development.
Vite solved this by using native ES modules and fast builds.
9. How does a bundler work ?
Ans : A bundler combines all your JS, CSS, and assets into a few optimized files for the browser.
Steps:
1. Entry Point – Start from your main file (e.g., index.js).
2. Dependency Graph – Follow all imports to find every file your app uses.
3. Transforms – Compile TS/JSX/CSS to browser-compatible code.
4. Bundling – Combine all files into one or more bundles.
5. Optimization – Remove unused code (tree-shaking) and minify.
6. Output – Generate final files ready for the browser.
Vite skips most of this in development and only bundles for production.
10. What actually is a bundler ?
Ans : A bundler is essentially a tool/application, usually written in JavaScript or Node.js, that runs as part of your build
process.
● It’s not just a plugin; it’s a full program that reads files, processes them, and outputs bundles.
● It can have plugins or loaders to handle different file types (JS, TS, CSS, images). For example:
○ Webpack uses loaders and plugins.
○ Rollup uses plugins.
● During development, some bundlers can act like a dev server (Vite does this), but at its core, it’s a standalone
application that orchestrates file processing and dependency management.
Think of a bundler as a file-processing engine with optional plugins to handle extra formats or optimizations.
