Installing React

Learning Objectives

By the end of this lesson, you will be able to:

1. Understand what is actually required to run a React application.
2. Understand the role of Node.js and npm.
3. Understand the difference between React itself and React project tooling.
4. Create a modern React application.
5. Understand framework-based React setup.
6. Create a React application from scratch using Vite.
7. Understand why Create React App should no longer be used for new projects.
8. Understand the basic React project structure.
9. Understand package.json and dependencies.
10. Understand react and react-dom.
11. Understand the React application entry point.
12. Understand createRoot().
13. Understand the development server.
14. Understand the production build process.
15. Understand TypeScript setup for React.
16. Understand React DevTools.
17. Understand the difference between development and production environments.
18. Choose an appropriate React setup for an enterprise project.
19. Troubleshoot common installation problems.
20. Explain React installation and project setup confidently in interviews.

Introduction

We have already learned:

What is React?
        ↓
Why developers use React?
        ↓
React vs Traditional JavaScript

Now we need to answer a practical question:

How do we actually start developing a React application?

At first glance, this sounds simple.

You might think:

Install React
      ↓
Write JSX
      ↓
Run application

But modern React development involves several pieces.

A typical development environment looks like:

                 Developer
                     │
                     ▼
               Code Editor
                     │
                     ▼
              Node.js / npm
                     │
                     ▼
             Project Tooling
                     │
          ┌──────────┼──────────┐
          ▼          ▼          ▼
        React      React DOM   TypeScript
          │          │          │
          └──────────┼──────────┘
                     ▼
                Build Tool
                     │
                     ▼
             Development Server
                     │
                     ▼
                  Browser

The important thing is that installing React and creating a production-ready React application are not exactly the same thing.

What Does "Installing React" Actually Mean?

React is distributed through the JavaScript package ecosystem.

At the core of a browser-based React application, you will commonly encounter:

react
react-dom

For example:

npm install react react-dom

The React documentation also shows this approach when integrating React into an existing project.

But installing these packages alone doesn't necessarily give you a complete modern development environment.

You also need to consider:

JSX transformation
TypeScript
Bundling
Development server
Fast Refresh
Production builds
Routing
Data fetching
Testing

This leads to an important distinction:

React
   ≠
Complete application tooling

React Is a Library, Not Your Entire Toolchain

Think of the application as layers.

┌──────────────────────────────┐
│       Application Code       │
├──────────────────────────────┤
│     React Components         │
├──────────────────────────────┤
│       React / React DOM      │
├──────────────────────────────┤
│       Build / Framework      │
├──────────────────────────────┤
│       Node.js / npm          │
├──────────────────────────────┤
│       Operating System       │
└──────────────────────────────┘

Each layer has a different responsibility.

React

UI programming model.

React DOM

Browser DOM integration.

Build tool / framework

Application development and production tooling.

Node.js

JavaScript runtime commonly used for development tooling.

npm

Package manager.

This separation is important for understanding React architecture.

Prerequisites

Before creating a React application locally, you should have:

Node.js
npm
Code Editor
Browser

A common development environment is:

VS Code
+
Node.js
+
npm
+
Chrome / Edge / Firefox

You can use other editors and browsers as well.

Check Node.js

Open your terminal.

Run:

node --version

You should get something similar to:

v22.x.x

The exact version will depend on your environment.

Then check npm:

npm --version

For example:

10.x.x

The exact version is less important than understanding what each tool does.

What Is Node.js?

Node.js is a JavaScript runtime.

React itself runs in the browser, but much of the tooling used to develop and build React applications runs through Node.js.

For example:

Developer
   │
   ▼
npm command
   │
   ▼
Node.js
   │
   ▼
Build Tool
   │
   ▼
React Application

Node.js can execute JavaScript outside the browser.

This enables development tools to perform tasks such as:

• installing packages
• starting development servers
• transforming source code
• bundling applications
• running tests
• running linting tools

What Is npm?

npm is a package manager commonly used with Node.js.

It allows you to install dependencies.

For example:

npm install react

means:

Download the React package and add it to this project.

You can also install multiple dependencies:

npm install react react-dom

The dependency information is recorded in:

package.json

Understanding package.json

A React project typically contains:

{
  "name": "techlearningpro-react",
  "version": "1.0.0",
  "scripts": {},
  "dependencies": {},
  "devDependencies": {}
}

This file describes important information about your project.

For example:

package.json
     │
     ├── Project metadata
     ├── Dependencies
     ├── Development dependencies
     └── Scripts

You might eventually have:

{
  "dependencies": {
    "react": "...",
    "react-dom": "..."
  }
}

And development tools such as:

{
  "devDependencies": {
    "typescript": "...",
    "vite": "..."
  }
}

The exact versions should be determined by the project setup rather than blindly copying versions from another project.

Three Ways to Start React

Modern React documentation essentially gives us three broad approaches:

                     Starting React
                           │
          ┌────────────────┼────────────────┐
          ▼                ▼                ▼
      Framework        From Scratch     Existing App
          │                │                │
          ▼                ▼                ▼
      Next.js          Vite/etc.       Add React
   React Router

The official React documentation currently recommends starting new applications with a framework when appropriate. It also documents building from scratch when a framework isn't a good fit or when you're learning the fundamentals.

Important: Create React App Is Deprecated

This is one of the most important updates for anyone learning React today.

You may still see tutorials saying:

npx create-react-app my-app

Do not use this for new projects.

React officially deprecated Create React App for new applications in February 2025. The React team recommends using a framework, or using a build tool such as Vite, Parcel, or Rsbuild when building from scratch.

The official installation documentation now explicitly answers:

Should I use Create React App?

with:

No. Create React App has been deprecated.

This is an important distinction between old React tutorials and modern React engineering.

Option 1 — Start With a React Framework

For a production application, React currently recommends starting with a framework.

For example, Next.js:

npx create-next-app@latest

The current React documentation lists Next.js App Router as a recommended React framework.

React Router also provides a framework-oriented setup:

npx create-react-router@latest

The React documentation currently lists React Router v7 among its recommended options.

Why Use a Framework?

A real production application usually needs more than components.

You may need:

Routing
Data Fetching
Code Splitting
Server Rendering
Caching
Error Handling
Loading States
Deployment

If you build everything yourself:

React
  │
  ├── Router
  ├── Data Fetching
  ├── Code Splitting
  ├── SSR
  ├── Caching
  └── Deployment

you are gradually building your own framework.

React's documentation explicitly notes that building from scratch means making these architectural choices yourself.

Option 2 — React From Scratch with Vite

For learning React fundamentals or applications where a framework isn't the right fit, you can use a build tool.

A common modern choice is Vite.

The official React documentation gives this TypeScript command:

npm create vite@latest my-app -- --template react-ts

For JavaScript:

npm create vite@latest my-app -- --template react

This gives you a React application with modern development tooling.

Creating a React + TypeScript Application

For this TechLearningPro course, I recommend learning React with TypeScript because our target is not just beginner-level development.

Create the application:

npm create vite@latest techlearningpro-react -- --template react-ts

Then:

cd techlearningpro-react

Install dependencies:

npm install

Start development:

npm run dev

Vite will provide a local development URL, commonly something like:

http://localhost:5173

The exact port can vary.

What Happens During Installation?

When you run:

npm install

npm reads:

package.json

and resolves the project's dependency tree.

Conceptually:

package.json
      │
      ▼
Dependency Resolution
      │
      ▼
node_modules
      │
      ├── react
      ├── react-dom
      ├── vite
      ├── typescript
      └── other dependencies

A lockfile is also created or updated.

For npm projects, this is commonly:

package-lock.json

The lockfile helps reproduce dependency versions consistently.

Understanding node_modules

After:

npm install

you'll see:

node_modules/

This directory contains installed packages and their dependencies.

For example:

node_modules/
│
├── react/
├── react-dom/
├── vite/
├── typescript/
└── ...

You normally do not commit node_modules to Git.

Instead, commit:

package.json
package-lock.json

and let CI or another developer run:

npm install

or a lockfile-respecting installation command such as:

npm ci

Understanding npm install vs npm ci

This becomes important in enterprise development.

`npm install`

Typically used during development when dependencies may need to be resolved or updated.

npm install

`npm ci`

Commonly used in CI/CD environments.

npm ci

It installs from the lockfile and is designed for reproducible CI installations.

Conceptually:

Developer
   │
   ▼
npm install
   │
   ▼
Development
CI/CD
   │
   ▼
npm ci
   │
   ▼
Reproducible Build

Understanding the Project Structure

A new Vite React TypeScript project will typically look conceptually like:

techlearningpro-react/
│
├── public/
│
├── src/
│   ├── assets/
│   ├── App.tsx
│   ├── main.tsx
│   └── ...
│
├── index.html
├── package.json
├── package-lock.json
├── tsconfig.json
└── vite.config.ts

The exact generated files can vary with Vite versions and configuration.

The important files are:

src/
   ↓
Application source
main.tsx
   ↓
Application entry point
App.tsx
   ↓
Root application component
package.json
   ↓
Project configuration/dependencies
vite.config.ts
   ↓
Vite configuration

The Entry Point: main.tsx

A modern React application commonly starts with something similar to:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Let's understand this.

createRoot()

The important part is:

createRoot(
  document.getElementById("root")!
)

This tells React:

Use this DOM element as the root of this React application.

Then:

root.render(<App />);

tells React to render the application.

Conceptually:

index.html
    │
    ▼
<div id="root">
    │
    ▼
createRoot()
    │
    ▼
<App />
    │
    ▼
React Component Tree
    │
    ▼
Browser UI

React 19 removed the old ReactDOM.render() API. The modern approach uses createRoot() from react-dom/client.

The HTML Root Element

Your index.html usually contains something like:

<div id="root"></div>

Initially:

Browser
   │
   ▼
index.html
   │
   ▼
<div id="root"></div>

Then React takes over that root:

<div id="root">
      │
      ▼
   React App
      │
      ├── Header
      ├── Main
      └── Footer
</div>

This is one of the simplest ways to visualize React's relationship with the DOM.

The App.tsx Component

A typical initial component might be:

function App() {
  return (
    <h1>
      Welcome to TechLearningPro
    </h1>
  );
}
export default App;

This is a React component.

The rendering chain becomes:

main.tsx
    │
    ▼
<App />
    │
    ▼
App()
    │
    ▼
JSX
    │
    ▼
React Rendering
    │
    ▼
DOM

Why Do We Need a Build Tool?

You might ask:

Why can't the browser simply execute my React TypeScript files?

Browsers understand JavaScript, HTML, and CSS, but development applications often contain source code that requires transformation and bundling.

For example:

TypeScript
JSX
CSS
Modules
Assets

A build tool helps process these into browser-consumable output.

Conceptually:

Source Code
   │
   ├── TypeScript
   ├── JSX
   ├── CSS
   └── Modules
        │
        ▼
     Build Tool
        │
        ▼
 Browser-ready assets
        │
        ▼
      Browser

What Vite Does

Vite is a build tool designed to provide a fast development experience for modern web projects.

It provides things such as:

Development Server
Fast Refresh
Build
Module Handling
Plugin System
Production Bundling

The React documentation describes Vite as one of the build tools that can be used when creating a React application from scratch.

Development vs Production

This distinction is important.

During development:

npm run dev

you want:

Fast startup
Fast refresh
Debugging
Source maps
Development warnings

During production:

npm run build

you want:

Optimized assets
Minification
Code splitting
Production output

Conceptually:

                   Source Code
                       │
              ┌────────┴────────┐
              ▼                 ▼
        Development          Production
              │                 │
          npm run dev       npm run build
              │                 │
              ▼                 ▼
       Dev Server          Build Output
              │                 │
              ▼                 ▼
           Browser         Deployment

Production Build

After development:

npm run build

the build tool generates production assets.

Typically:

dist/
│
├── index.html
├── assets/
│   ├── JavaScript
│   ├── CSS
│   └── other assets

The exact filenames and structure depend on the build configuration.

These files can then be deployed according to your application's architecture.

Previewing a Production Build

With Vite, you can commonly use:

npm run preview

This lets you inspect the built application locally.

The lifecycle becomes:

Code
 │
 ▼
npm run build
 │
 ▼
dist/
 │
 ▼
npm run preview
 │
 ▼
Browser

This is useful for detecting problems that may not be obvious during development.

Installing React Manually

Sometimes you don't want to create a complete project.

You may already have:

Existing HTML
Existing JavaScript
Existing Backend

React can be added incrementally.

The official documentation provides the basic installation:

npm install react react-dom

and then:

import { createRoot } from "react-dom/client";

to render a React component into a DOM element.

This is useful for:

Legacy Applications
Incremental Migration
Embedded Widgets
Specific Interactive Sections

React and Existing Applications

Suppose TechLearningPro already has:

Legacy Website
│
├── HTML
├── CSS
├── JavaScript
└── Backend Templates

Instead of rewriting everything:

Legacy Website
       │
       ▼
Complete Rewrite
       │
       ▼
React

you can potentially migrate incrementally:

Legacy Website
│
├── Existing Page
├── React Course Search
├── Existing Page
├── React Dashboard
└── Existing Page

This is one of React's practical advantages.

TypeScript Setup

For this course, we'll primarily use:

React
+
TypeScript

The Vite command:

npm create vite@latest techlearningpro-react -- --template react-ts

creates a TypeScript-based React project.

Why TypeScript?

Because production React applications benefit from explicit contracts.

For example:

interface Course {
  id: string;
  title: string;
  level: string;
}

Now components can depend on well-defined data structures.

React Developer Tools

Once the application is running, install React Developer Tools in your browser.

React's official setup documentation identifies React Developer Tools as a browser extension that can inspect components, props, state, and performance problems.

Conceptually:

React App
    │
    ▼
React DevTools
    │
 ┌──┼───────────────┐
 ▼  ▼               ▼
Tree Props/State Performance

This tool becomes essential as the course progresses.

React Compiler

Modern React also includes the React Compiler ecosystem.

The official documentation states that React Compiler is designed to automatically optimize React applications and works best with React 19.

For a beginner setup, you should not manually add compiler configuration unless the chosen project setup requires it.

First learn:

Components
Props
State
Rendering
Hooks

Then learn:

Performance
Compiler
Optimization

The compiler is an optimization tool, not a replacement for understanding React fundamentals.

Recommended Setup for This Course

For learning the React fundamentals in this TechLearningPro course, I recommend:

Operating System
       │
       ▼
Node.js
       │
       ▼
npm
       │
       ▼
Vite
       │
       ▼
React
       │
       ▼
TypeScript
       │
       ▼
VS Code
       │
       ▼
Browser
       │
       ▼
React DevTools

Create the project:

npm create vite@latest techlearningpro-react -- --template react-ts

Then:

cd techlearningpro-react
npm install
npm run dev

This is a good setup for learning the React core without hiding the fundamentals behind a larger framework.

For a real production application, evaluate a framework based on the application's requirements. React currently recommends starting new applications with a framework when appropriate.

Why We Are Using Vite for Learning

There is an important distinction.

Learning React

You want to clearly see:

React
React DOM
Entry Point
Components
Build Tool
Browser

Vite provides a relatively lightweight setup for that.

Production application

You may need:

Routing
Server Rendering
Data Loading
Caching
Authentication
Deployment

A framework may provide a better foundation.

Therefore:

Learning React
      │
      ▼
Vite + React + TypeScript
Production application
      │
      ▼
Evaluate framework vs custom setup

This is an architectural decision—not a contradiction.

Common Installation Mistakes

Mistake 1: Using Create React App

Old tutorials may say:

npx create-react-app my-app

Don't use this for new applications.

Create React App is deprecated.

Mistake 2: Installing React globally

You generally don't need:

npm install -g react

React should normally be installed as a project dependency.

Mistake 3: Running commands outside the project directory

For example:

npm run dev

must be executed from the project directory containing package.json.

Mistake 4: Deleting package-lock.json unnecessarily

The lockfile helps maintain reproducible dependency resolution.

Don't delete it casually.

Mistake 5: Committing node_modules

Don't commit:

node_modules/

to Git.

Mistake 6: Using an outdated tutorial

React tooling changes.

Always verify installation instructions against current React documentation.

Mistake 7: Confusing Node.js with React

Node.js is a JavaScript runtime.

React is a UI library.

They solve different problems.

Mistake 8: Thinking Vite is React

Vite is a build tool.

React is the UI library.

Vite
  ≠
React

They work together.

Troubleshooting

Problem: node: command not found

Check:

node --version

If Node.js isn't installed or isn't available on your PATH, install a current supported Node.js release appropriate for your environment.

Problem: npm: command not found

npm normally comes with Node.js distributions.

Verify your Node.js installation.

Problem: Port already in use

You may see:

Port 5173 is already in use

Another application may already be using that port.

You can stop the conflicting process or allow the development server to choose another port.

Problem: Dependency installation fails

Start with:

npm install

and inspect the actual error.

Don't immediately delete everything.

Understand:

Which package failed?
Which version?
Which Node version?
Which dependency constraint?

Security Considerations

Installing dependencies introduces a supply-chain consideration.

Your application may depend on:

Your Code
   │
   ▼
React
   │
   ├── Dependency A
   │      └── Dependency C
   │
   └── Dependency B
          └── Dependency D

This creates a dependency tree.

Therefore, enterprise projects should consider:

• dependency updates
• vulnerability scanning
• lockfiles
• package provenance
• automated security checks
• minimizing unnecessary dependencies

Don't install a package simply because a tutorial uses it.

Ask:

Do we actually need this dependency?

Performance Considerations

Installation itself affects developer productivity.

A good development environment should provide:

Fast startup
Fast refresh
Fast builds
Efficient dependency management

But production performance is different.

You should eventually evaluate:

Bundle size
Code splitting
Lazy loading
Caching
Compression
Rendering strategy
Network waterfalls

The React documentation specifically notes that build-tool-only setups leave teams responsible for decisions such as routing, data fetching, and code splitting.

Enterprise Setup

A production enterprise project might look more like:

                     Developer
                         │
                         ▼
                  Git Repository
                         │
                         ▼
                 React Application
                         │
       ┌─────────────────┼─────────────────┐
       ▼                 ▼                 ▼
   TypeScript         React             Tooling
       │                 │                 │
       └─────────────────┼─────────────────┘
                         ▼
                      Testing
                         │
                         ▼
                       Build
                         │
                         ▼
                       CI/CD
                         │
                         ▼
                  Security Scanning
                         │
                         ▼
                      Artifact
                         │
                         ▼
                      CDN/Host
                         │
                         ▼
                       Users

At this level, "installing React" is only the beginning.

Practical Exercise

Exercise: Create Your First React Application

Step 1 — Verify Node.js

node --version

Step 2 — Verify npm

npm --version

Step 3 — Create the project

npm create vite@latest techlearningpro-react -- --template react-ts

Step 4 — Enter the project

cd techlearningpro-react

Step 5 — Install dependencies

npm install

Step 6 — Start development

npm run dev

Step 7 — Open the local URL

Open the URL shown by the development server.

Modify Your First Component

Open:

src/App.tsx

Replace the initial content with:

function App() {
  return (
    <main>
      <h1>Welcome to TechLearningPro</h1>
      <p>
        Learn React from fundamentals
        to enterprise architecture.
      </p>
      <button>
        Start Learning
      </button>
    </main>
  );
}
export default App;

Save the file.

The browser should update automatically through the development tooling's fast-refresh workflow.

Trace the Application

Now trace what happens.

index.html
    │
    ▼
<div id="root">
    │
    ▼
main.tsx
    │
    ▼
createRoot()
    │
    ▼
<App />
    │
    ▼
App.tsx
    │
    ▼
JSX
    │
    ▼
React Rendering
    │
    ▼
Browser DOM

If you understand this flow, you have already learned an important piece of React architecture.

Challenge Exercise

Now create:

src/
└── components/
    ├── Header.tsx
    ├── Hero.tsx
    └── CourseCard.tsx

Then:

function App() {
  return (
    <>
      <Header />
      <Hero />
      <CourseCard />
      <CourseCard />
    </>
  );
}

Your architecture should look like:

App
│
├── Header
├── Hero
└── CourseCard
    ├── CourseCard
    └── CourseCard

Difficulty

Beginner → Intermediate

Learning Goal

Understand:

Project
  ↓
Entry Point
  ↓
Root Component
  ↓
Component Tree

Interview questions & answers

Final Mental Model

Don't think:

Install React
     ↓
Start Coding

Think:

                    React Project
                         │
            ┌────────────┴────────────┐
            ▼                         ▼
      Application                 Tooling
            │                         │
            ▼                         ▼
        Components                Node.js
        State                     npm
        JSX                       Vite/Framework
        Hooks                     TypeScript
            │                         │
            └────────────┬────────────┘
                         ▼
                  Development
                         │
                         ▼
                       Build
                         │
                         ▼
                    Deployment
                         │
                         ▼
                      Browser

And remember the modern decision:

             New React Application
                       │
          ┌────────────┴────────────┐
          ▼                         ▼
  Need framework capabilities?    No / learning
          │                         │
         Yes                        ▼
          │                    Build tool
          ▼                         │
 Recommended React framework      Vite

The official React documentation currently recommends frameworks for new applications while retaining build-tool-based setups for valid use cases.

That distinction will become increasingly important as we move from React fundamentals → routing → data fetching → performance → SSR → enterprise architecture.

Next Lesson

**React Project Structure**

Now that React is installed, the next lesson will open the project and explain what every important file and folder does.

We'll trace:

React Project
│
├── package.json
├── package-lock.json
├── index.html
├── src/
│   ├── main.tsx
│   ├── App.tsx
│   ├── components/
│   ├── assets/
│   └── ...
│
├── public/
├── tsconfig.json
└── vite.config.ts

Most importantly, we'll understand the complete runtime flow:

Browser
  ↓
index.html
  ↓
root element
  ↓
main.tsx
  ↓
createRoot()
  ↓
App
  ↓
Component Tree
  ↓
React Rendering
  ↓
Browser UI