← Back to Chapters

Setting Up Environment

⚙️ Setting Up Environment

? Quick Overview

Before building React applications, you must set up a development environment. Two of the most popular tools for bootstrapping React projects are:

  • Vite — A fast, modern build tool optimized for speed and simplicity.
  • Create React App (CRA) — The official React setup tool created by the React team.

Both provide pre-configured environments with React, JSX, and live reloading, so you can start coding immediately without manual bundler or tooling setup.

? Key Concepts

  • Node.js & npm – Required to run React dev servers and manage packages.
  • Scaffolding Tools – Vite and CRA generate a ready-to-use React project structure.
  • Development Server – Runs your app locally with features like hot module replacement (HMR).
  • Project Structure – Files like src/, public/, and package.json keep your app organized.
  • Build & Optimization – Vite focuses on very fast dev experience and optimized builds; CRA offers a stable, beginner-friendly setup.

? Setting Up with Vite

Step 1 · Check Node.js

Install Node.js (v16 or newer). Then verify that Node.js and npm are installed:

? View Code Example 
// Check installed Node.js and npm versions
node -v
npm -v

Step 2 · Create Vite + React Project

Use the official Vite scaffolding command to create a new React app:

? View Code Example 
// Create a new React project using Vite
npm create vite@latest my-react-app
cd my-react-app

During setup, choose framework → React and variant → JavaScript (or TypeScript if you prefer).

Step 3 · Install Dependencies & Start Dev Server

Install all required packages and run the development server:

? View Code Example 
// Install dependencies and run the Vite dev server
npm install
npm run dev

The app will start at a local address such as http://localhost:5173/ (shown in your terminal).

? Setting Up with Create React App (CRA)

Step 1 · Create Project with npx

Use npx (runs the package without installing globally) to create a CRA project:

? View Code Example 
// Create a React project using Create React App
npx create-react-app my-react-app
cd my-react-app

Step 2 · Start the Dev Server

Start the development server with:

? View Code Example 
// Start the CRA development server
npm start

CRA will automatically open your app at http://localhost:3000/ in the browser.

Step 3 · Basic CRA Project Structure

  • src/ – Your React components and app logic.
  • public/ – Static files and the main index.html.
  • package.json – Manages dependencies and npm scripts.

? Syntax / Theory: Editing the Starter App

After creating a project (Vite or CRA), you usually edit the main App.jsx or App.js file to change what is rendered on the screen.

? View Code Example 
// Simple React component that shows a welcome message
function App() {
  return (
    <div>
      <h1>Welcome to my React app!</h1>
      <p>This project was created using Vite or CRA.</p>
    </div>
  );
}

export default App;

When you save this file, the dev server (Vite or CRA) will automatically refresh the browser or update the UI using hot module replacement (HMR).

⚖️ Vite vs CRA Comparison

Feature Vite Create React App (CRA)
Build & Dev Speed Very fast (dev server + HMR optimized with ESBuild) Slower (startup and rebuild times are longer)
Configuration Flexible, lightweight config via vite.config.js Zero-config but limited deep customization without ejecting
Production Build Size Smaller and highly optimized by default Often larger builds out-of-the-box
Recommended For Modern React projects and fast prototyping Beginners and legacy projects already using CRA

? Live Output & What You’ll See

  • After running npm run dev (Vite), you’ll see a URL like http://localhost:5173/. Opening it shows the default Vite + React welcome screen.
  • After running npm start (CRA), your browser opens http://localhost:3000/ with the CRA starter page.
  • Editing App.jsx/App.js immediately updates the browser without a full refresh thanks to HMR.
  • If you see errors in the browser or terminal, they usually point to the exact file and line number, making debugging easier.

? Tips & Best Practices

  • Always use the latest Node.js LTS version for the best compatibility.
  • Vite starts much faster than CRA — ideal for frequent testing or learning.
  • CRA offers simplicity and stability but may feel slower for large apps.
  • Explore Vite plugins (e.g., for environment variables, SVG support, ESLint) to extend features.
  • Keep your project folder names simple (no spaces or special characters) to avoid path issues.

? Try It Yourself

  1. Set up a new React app using Vite and verify it runs at localhost:5173.
  2. Create another app using CRA and compare startup time and rebuild speed.
  3. Edit App.jsx (or App.js) to display your name and a custom welcome message.
  4. List two reasons why Vite might be preferred over CRA for modern React projects.