All Roadmaps›⚛️ React Mastery›Phase 1›History & Evolution

History & Evolution

0/3 in this phase0/36 across the roadmap

📖 Concept

React was created by Jordan Walke, a software engineer at Facebook, who released an early prototype of React called FaxJS. It was first deployed on Facebook's News Feed in 2011 and later on Instagram in 2012. It was open-sourced at JSConf US in May 2013.

At the time, the common way to build web apps involved manual DOM manipulation using libraries like jQuery or MVC frameworks like Backbone.js. These approaches became difficult to maintain as application state grew complex. Facebook faced a "zombie" UI problem where different parts of the UI would get out of sync with the data.

Key Reasons for React's Success:

  • Component-Based: Break down complex UIs into small, reusable pieces.
  • Unidirectional Data Flow: State flows down, making debugging easier.
  • Virtual DOM: Efficiently updates the UI without manual manipulation.
  • Learn Once, Write Anywhere: Use the same principles for web (React), mobile (React Native), and more.

React shifted the industry from "How to update the DOM" (imperative) to "What the UI should look like at any given time" (declarative).

💻 Code Example

codeTap to expand ⛶
1// ❌ THE OLD WAY: Imperative DOM Manipulation (jQuery-style)
2// This becomes messy as your app grows.
3function updateCounter(count) {
4  const counterEl = document.getElementById('counter');
5  counterEl.textContent = count;
6  
7  if (count > 10) {
8    counterEl.style.color = 'red';
9  } else {
10    counterEl.style.color = 'black';
11  }
12}
13

14// ✅ THE REACT WAY: Declarative Component
15// You describe WHAT the UI should look like based on current state.
16import React, { useState } from 'react';
17

18function Counter() {
19  const [count, setCount] = useState(0);
20

21  return (
22    <div className="p-4 border rounded shadow">
23      <h2 className="text-xl font-bold">Counter App</h2>
24      <p 
25        id="counter"
26        style={{ color: count > 10 ? 'red' : 'black' }}
27        className="text-2xl my-4"
28      >
29        Current Count: {count}
30      </p>
31      <button 
32        onClick={() => setCount(count + 1)}
33        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
34      >
35        Increment
36      </button>
37    </div>
38  );
39}
40

41export default Counter;

🏋️ Practice Exercise

  1. Study the FaxJS repository (if available) or early React documentation to see how much the API has changed.
  2. Identify a complex website and try to mentally break it down into a component tree.
  3. Compare React with another framework (like Vue or Angular) and note the philosophical differences (e.g., Template-based vs JSX).
  4. Build a simple HTML/JS page that updates multiple elements when a single variable changes using only vanilla JS. Notice the complexity of keeping everything in sync manually.

⚠️ Common Mistakes

  • Thinking React is a full framework (it's a library focused on the View layer).

  • Directly manipulating the DOM (e.g., using document.getElementById) inside a React component.

  • Not understanding that React requires a build step (JSX isn't native browser JS).

💼 Interview Questions

🎤 Mock Interview

Practice a live interview for History & Evolution

Next →Declarative vs Imperative