Introduction
Before writing React code, you need a project set up with the right tooling: a way to transform JSX into plain JavaScript, bundle files for the browser, and serve the app locally during development. Modern React projects typically use a build tool such as Vite, which offers extremely fast startup and hot module reloading, though tools like Create React App (now largely superseded) and meta-frameworks like Next.js are also common in real-world projects.
Cricket analogy: Before a match you need the pitch prepared, the sightscreens set, and the scoreboard wired up; similarly, before writing React code you need JSX transformation, bundling, and a local dev server all in place.
How It Works
Setting up a React environment generally involves three steps: scaffolding a new project from a template, installing dependencies, and starting a local development server. Vite is a popular choice because it uses native ES modules during development, avoiding the need to bundle the entire app before you can start coding, which results in near-instant server startup and fast updates as you edit files.
Cricket analogy: Setting a field, choosing the bowling attack, and starting the over are three distinct steps a captain follows each innings, just as scaffolding, installing dependencies, and starting the dev server are React's three setup steps.
# Scaffold a new React + Vite project
npm create vite@latest my-react-app -- --template react
# Move into the project folder
cd my-react-app
# Install dependencies
npm install
# Start the local dev server
npm run devExplanation
The npm create vite@latest command downloads a starter template that already includes a working React setup: an index.html entry point, a src/main.jsx file that mounts the app, an App.jsx component, and a package.json with React, ReactDOM, and Vite listed as dependencies. Running npm install downloads those dependencies into node_modules, and npm run dev starts a local development server, typically at http://localhost:5173, with hot module replacement so changes appear in the browser almost instantly without a full page reload.
Cricket analogy: npm create vite@latest is like receiving a pre-packed cricket kit bag with bat, pads, and gloves already inside; npm install is unpacking and checking each item, and npm run dev is walking out to the middle at localhost:5173 ready to play, with instant replay (HMR) showing every shot immediately.
Example
// src/main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>
);Output
After running npm run dev, Vite prints a local URL in the terminal (for example, http://localhost:5173/). Opening that URL in a browser shows the default starter page rendered by the App component. Editing App.jsx and saving the file immediately updates the running page in the browser thanks to hot module replacement, without losing component state in most cases.
Cricket analogy: Seeing the ground for the first time after the toss is like opening localhost:5173 and seeing the default starter page; adjusting your batting stance mid-innings without leaving the field is like editing App.jsx and watching HMR update instantly without a full restart.
createRoot (from react-dom/client), used with React 18+, replaces the older ReactDOM.render API and enables React's concurrent rendering features.
Key Takeaways
- Modern React projects are typically scaffolded with build tools such as Vite rather than configured from scratch.
npm create vite@latestfollowed bynpm installandnpm run devgets a working React project running locally.- The entry point mounts the root App component into the DOM using createRoot from react-dom/client.
- Development servers provide hot module replacement so code changes appear in the browser almost instantly.
Practice what you learned
1. Which command scaffolds a new React project using Vite?
2. What command starts the local development server in a typical Vite React project?
3. In React 18+, which API is used to mount the root component into the DOM?
4. Why is Vite popular for setting up React development environments?
Was this page helpful?
You May Also Like
Introduction to React
A beginner-friendly overview of what React is, why it exists, and how it lets you build UIs from reusable components.
JSX Syntax and Expressions
Learn how JSX blends HTML-like markup with JavaScript to describe React UI declaratively.
Functional Components in React
Understand how to define and use functional components, the modern default building block of React apps.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics