❮ Previous

Development Environment Setup

  • This lesson guides learners through setting up a React development environment by installing essential tools and preparing to build React applications.

  • Before starting React development, we need to prepare our system with the required tools.

    A development environment is the setup where developers:

    • Write code

    • Run applications

    • Test projects

    Tools Required for React Development:

    • Computer (Windows / macOS / Linux)

    • Code Editor (VS Code recommended)

    • Web Browser (Chrome)

    • Node.js and npm

    Proper setup ensures smooth development and fewer errors.

    Node.js Overview

    Node.js is a JavaScript runtime that allows JavaScript to run outside the browser.

    In simple words:
     Node.js lets us use JavaScript on our computer, not just in the browser.

    Why React Needs Node.js?

    • To install React libraries

    • To run development servers

    • To manage packages using npm

    Key Points:

    • Built on Chrome’s V8 engine

    • Very fast

    • Widely used in modern web development

    Installing Node.js and npm

    What is npm?

    npm (Node Package Manager) is used to:

    • Install libraries

    • Manage project dependencies

    Installation Steps:

    1. Visit Node.js official website

    2. Download LTS version

    3. Install Node.js

    4. npm is installed automatically

    Verify Installation:

node -v
npm -v

  • If versions appear, installation is successful 

    Project Setup Using Create React App (CRA)

    Create React App (CRA) is a tool to quickly create a React project with default configuration.

    Best for beginners.

    Steps to Create Project:

npx create-react-app my-app
cd my-app
npm start

  • Features of CRA:

    • Zero configuration

    • Webpack setup included

    • Babel support

    • Development server ready

    Output:

    • App runs at http://localhost:3000

    Project Setup Using Vite

    Vite is a modern build tool that provides faster development than CRA.

    Best for modern and large applications.

    Steps to Create Project:

npm create vite@latest my-app
cd my-app
npm install
npm run dev

  • Why Vite is Faster?

    • Uses native ES modules

    • Faster hot reload

    • Lightweight bundling

    Output:

    • App runs at http://localhost:5173

    CRA vs Vite (Quick Comparison)

    Feature

    CRA

    Vite

    Speed

    Slower

    Very Fast

    Configuration

    Zero config

    Minimal config

    Modern Support

    Limited

    Excellent

    Recommended For

    Beginners

    Modern projects

    Understanding Project Folder Structure

    Typical React Project Structure:

my-app/
│
├── node_modules/
├── public/
│   └── index.html
│
├── src/
│   ├── App.jsx
│   ├── main.jsx / index.js
│   ├── components/
│   ├── assets/
│   └── styles/
│
├── package.json
└── vite.config.js / webpack config

  • Folder Explanation:

     node_modules

    • Contains all installed packages

    • Automatically generated

    • Do not modify manually

     public

    • Contains static files

    • index.html is the main HTML file

     src

    • Main React code lives here

    • Components, styles, logic

     App.jsx

    • Root component

    • UI starts here

     main.jsx / index.js

    • Entry point of React app

    • Renders App component

     package.json

    • Project details

    • Dependencies

    • Scripts

    Final Summary

    • Node.js is required for React

    • npm manages packages

    • CRA is beginner-friendly

    • Vite is fast and modern

    • Folder structure helps organize code

❮ Previous