⚛️ React.js Framework

By Himanshu Shekhar | 04 Jan 2021 | (0 Reviews)

Suggest Improvement on React.js Framework — Click here

React.js is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. This comprehensive guide will take you from the history of React to building and deploying your own modern web applications.

🚀 Introduction to React.js

This module provides a comprehensive introduction to React.js - from its history and core concepts to Virtual DOM, SPA architecture, and the complete React ecosystem. Perfect foundation for React development.

1.1 History of React.js – Complete Timeline

React.js was born at Facebook in 2011 to solve complex UI problems. Here's the complete journey:

2011: Internal Facebook Tool

Jordan Walke creates first version called "FaxMachine" to solve News Feed rendering issues

2012: XHP (React's Predecessor)

React's JSX syntax inspired by Facebook's PHP XHP library for safer HTML in PHP

March 2013: First Public Release (v0.8.0)

JSX introduced. Christopher Chedeau (pixy) and Sebastian Markbåge join core team

April 2014: Instagram Integration

React used for Instagram web. Proves scalability for high-traffic apps

2015: React Native Announced

Mobile development with React principles. Same architecture for iOS/Android

2016: React 15.0 & Fiber Architecture

Fiber (rewrite of core reconciler) started. Better performance, async rendering

Oct 2017: React 16.0 Released

Fiber architecture, Fragments, Error Boundaries, Portals, Profiler

Feb 2019: React 16.8 Hooks

useState, useEffect revolutionize functional components. Class components deprecated

2020: Concurrent Features

React 18 alpha: Concurrent rendering, Automatic batching, Transitions, Suspense improvements

March 2022: React 18 Stable

Production-ready concurrent features. New root API, startTransition, useDeferredValue

📊 React Version Evolution

Version Date Key Features Impact
0.8.0 Mar 2013 JSX, Virtual DOM First public release
0.14.0 Dec 2015 ES6 support Modern JavaScript adoption
16.0.0 Sep 2017 Fiber, Fragments, Error Boundaries Performance revolution
16.8.0 Feb 2019 Hooks (useState, useEffect) Functional components dominant
17.0.0 Oct 2020 Gradual upgrades, no new features Bridge to React 18
18.0.0 Mar 2022 Concurrent Features, New Root API Future of React
📈 Growth Statistics
  • npm downloads: 50M+/week
  • GitHub stars: 220K+
  • Stack Overflow: 500K+ questions
  • Job market: 1M+ React jobs
🏢 Major Companies Using React
  • Facebook, Instagram, WhatsApp
  • Netflix, Airbnb, Dropbox
  • Twitter, Reddit, Pinterest
  • Uber, PayPal, Stripe
  • Microsoft, Shopify, Atlassian
Key Takeaway: React evolved from Facebook's internal tool to the world's most popular frontend library, solving complex UI problems with innovative Virtual DOM and component architecture.

1.2 What is React? – Complete Definition

Core Definition

"React is a JavaScript library for building user interfaces, particularly single-page applications where the UI needs to be fast and dynamic."

  • JavaScript Library (not framework)
  • UI-focused (views only)
  • Component-based
  • Declarative
Technical Architecture

React Core Components:

JSX
Virtual DOM
Reconciler
Hooks
Fiber
Renderer

⚖️ React vs Other Technologies

Technology Type Scope Learning Curve
React JavaScript Library UI Layer Only Moderate
Angular Full Framework Complete Solution Steep
Vue.js Progressive Framework Flexible Scope Easy
jQuery DOM Manipulation Library Simple DOM Ops Very Easy
React Philosophy
  1. Composition: Build complex UIs from simple components
  2. Declarative: Describe what UI should look like
  3. Unidirectional: Data flows down, events flow up
  4. Learn Once, Write Anywhere: Same skills for web, mobile, VR
File Size & Performance
  • Core Library: ~130KB (min+gzip)
  • ReactDOM: ~120KB
  • Total Starter: ~250KB
  • Tree-shaking: Only use what you import
  • Production Build: Dead code elimination
🏗️ React in Modern Stack
Frontend
React + TypeScript
Vite/Webpack
State Management
Zustand/Redux
React Query
Styling
Tailwind CSS
Styled Components
Backend
Next.js 14
Node.js/Express
📌 React = UI Library
Components
Reusable UI blocks
JSX
JavaScript + HTML
Virtual DOM
Fast updates
Hooks
State + Logic

1.3 Why React Was Created – The Real Problems

Facebook's UI Problems (2011)
  • 🔴 News Feed Complexity: 1000+ components, complex state, poor performance
  • 🔴 MVC Hell: Backbone.js couldn't handle complex UIs, tight coupling
  • 🔴 DOM Manipulation: Direct DOM changes caused bugs, race conditions
  • 🔴 Reusability: No component model, copy-paste code everywhere
React's Solutions
  • ✅ Virtual DOM: Predictable updates, diffing algorithm
  • ✅ Components: Reusable, encapsulated UI pieces
  • ✅ One-way Data Flow: Predictable state updates
  • ✅ JSX: Familiar HTML-like syntax in JavaScript

📊 Traditional Approach vs React Approach

Problem (Traditional) Solution (React) Performance Impact
Direct DOM manipulation Virtual DOM + Reconciliation 95% fewer DOM operations
Global state mutations Component local state + Props Predictable updates
Templates + Logic mixed JSX + Pure Components Better reusability
Copy-paste UI code Component composition 90% code reduction

🔍 jQuery Era vs React (Same Todo App)

jQuery (2011) - 50+ lines
$('#add-todo').click(function() {
  var text = $('#todo-input').val();
  var li = $('
  • ').text(text);
  $('#todo-list').append(li);
  $('#todo-input').val('');
});

$('#todo-list').on('click', 'li', function() {
  $(this).toggleClass('completed');
});
    • React (2013) - 15 lines
    function TodoApp() {
  const [todos, setTodos] = useState([]);
  
  const addTodo = (text) => {
    setTodos([...todos, {text, completed: false}]);
  };
  
  return (
    <div>
      <input onChange={e => addTodo(e.target.value)} />
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}
    Key Insight: React was created because Facebook needed to render complex, dynamic UIs at Facebook-scale (billions of DOM updates daily) without breaking the web.

    1.4 Features of React – Complete Feature Set

    ⚛️
    Component-Based

    Reusable, composable UI building blocks

    🎭
    JSX

    JavaScript XML syntax extension

    🌐
    Virtual DOM

    In-memory DOM representation

    ⚡
    Fast Updates

    Diffing + Reconciliation algorithm

    🔗
    One-Way Data

    Unidirectional data flow

    🎣
    Hooks

    State + lifecycle in functions

    📱
    Cross-Platform

    Web, Mobile, Desktop, VR

    🚀
    Concurrent

    React 18+ features

    Deep Dive: Virtual DOM 
    // 1. Create Virtual DOM (JS objects)
const vdom = {
  type: 'div',
  props: { className: 'container' },
  children: [
    { type: 'h1', props: { children: 'Hello' } }
  ]
};

// 2. React diffs old vs new VDOM
// 3. Creates minimal DOM patch
// 4. Applies to Real DOM
    Deep Dive: JSX Transpilation 
    // JSX (looks like HTML)
const element = <h1 className="title">Hello</h1>;

// Transpiles to React.createElement
React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

// Result: React element object

    🎯 React 18+ Concurrent Features

    Feature Description Example
    startTransitionMark non-urgent updatesstartTransition(() => setTab(tab))
    useDeferredValueDefer expensive re-rendersconst deferredQuery = useDeferredValue(query)
    useIdGenerate unique IDsconst id = useId()
    New Root APIcreateRoot vs rendercreateRoot(root).render(<App />)

    1.5 SPA Concept – Single Page Applications Deep Dive

    Multi-Page App (MPA)
    • Full page reload on navigation
    • Server renders HTML
    • Large initial payload
    • Slow navigation (200-500ms)
    • SEO friendly (traditional)
    • Example: Traditional PHP/Laravel apps
    Single Page App (SPA)
    • No page reloads
    • Client-side routing
    • Small initial bundle + lazy loading
    • Instant navigation (<16ms)
    • Modern SEO (SSR/SSG)
    • Example: Gmail, Twitter, Facebook
    🏗️ SPA Architecture
    API Server
    JSON Data
    React App
    Single HTML
    Router
    /home, /profile
    Components
    UI Tree
    Browser DOM
    Final Render
    ✅ SPA Advantages
    • Lightning fast navigation
    • Smooth user experience
    • Offline capable (Service Workers)
    • Rich interactions
    • Consistent UI/UX
    ⚠️ SPA Challenges
    • SEO requires SSR/SSG
    • Large initial bundle
    • Memory usage higher
    • Complex routing
    • Browser history management
    Modern Solutions
    • Next.js: SSR + SSG + API Routes
    • Code Splitting: React.lazy() + Suspense
    • Tree Shaking: Remove unused code
    • CDN + Edge: Global caching