⚛️ Introduction to React

What is React, Virtual DOM, Vite setup, project structure, and React 18 createRoot.

What is React?

React is a open-source JavaScript library for building interactive user interfaces based on components. Developed by Meta, React emphasizes declarative views, unidirectional data flow, and virtual DOM performance optimizations.

React vs Angular vs Vue Comparison

Comparing major modern web UI frontend frameworks.

Feature	React	Angular	Vue
Type	UI Library	Full Framework	Progressive Framework
DOM Model	Virtual DOM	Real DOM + Change Detection	Virtual DOM
Data Binding	One-Way (Unidirectional)	Two-Way & One-Way	Two-Way & One-Way
Learning Curve	Moderate	Steep	Gentle
Backing Company	Meta (Facebook)	Google	Community Driven

How the Virtual DOM Works

The Virtual DOM is a lightweight in-memory representation of the real DOM. When state changes occur, React computes the diff between the old and new Virtual DOMs (Reconciliation) and updates only changed nodes in the real DOM.

Tip: React's fiber architecture breaks rendering work into incremental chunks, keeping the UI responsive during heavy renders.

Setting Up React with Vite

Vite is the recommended modern tool for scaffolding ultra-fast React applications with instant HMR.

terminal Bash

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

Output

VITE v5.2.0 ready in 280 ms ➜ Local: http://localhost:5173/

React 18 createRoot API

React 18 uses `createRoot` for mounting applications into the DOM.

main.jsx JSX

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

JSX & Components