History of React.js - From Facebook to Global Domination

Learn the history of React from its creation at Facebook in 2011 to becoming the world's most popular frontend library!

Introduction

React wasn't always the giant it is today! Let's explore its journey from a Facebook internal tool to the #1 frontend library!

What You Will Learn

  • Who created React and why
  • React's early days at Facebook/Instagram
  • Key versions and their features
  • How React evolved over time

Prerequisites

Timeline of React

Let's take a trip down memory lane!

timeline
    title React Timeline
    2011 : Created at Facebook : Jordan Walke builds FaxJS, precursor to React
    2012 : Used at Instagram : First production use
    2013 : Open Sourced! : React goes public at JSConf US
    2015 : React Native : Build native mobile apps with React!
    2017 : React 16 : Fiber Architecture, huge rewrite!
    2019 : React 16.8 : HOOKS! Game changer!
    2020 : React 17 : No new features - easier upgrades
    2022 : React 18 : Concurrent features, Suspense, automatic batching!
    2024 : React 19 : Coming soon!

2011: The Beginning at Facebook

Jordan Walke, a software engineer at Facebook, created React! He was inspired by XHP (HTML components for PHP) and built FaxJS, the precursor to React!

Facebook had a problem: Ads were constantly changing, and managing their UI with traditional jQuery was a nightmare! They needed a better way - and React was born!

2012: Instagram Adoption

Instagram was the first large-scale production use of React! It proved that React could handle complex, high-traffic apps!

2013: Open Sourced!

On May 29, 2013, React was open-sourced at JSConf US! The reaction was... mixed at first! People weren't sure about JSX ("HTML in your JS?!") but quickly realized how powerful it was!

2015: React Native Changes Everything

React Native was announced! Now you could build iOS and Android apps with the same React knowledge! This was massive!

2017: React 16 - Fiber Architecture!

React 16 was a complete rewrite of React's core! The new Fiber architecture enabled:

  • Async rendering
  • Prioritization of updates
  • Better error handling with Error Boundaries
  • Portals

2019: React 16.8 - HOOKS!

This was the biggest update since React began! Hooks let you use state and other React features in functional components, no classes needed!

// Before - class components (old)
class Counter extends React.Component {
  state = { count: 0 };
  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        {this.state.count}
      </button>
    );
  }
}

// After - functional components with hooks (modern!)
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

2020: React 17 - No New Features!

Wait, no new features? On purpose! React 17 was all about making upgrading easier! No breaking changes, just incremental improvements!

2022: React 18 - Concurrent Features!

React 18 introduced:

  • Concurrent Rendering: React can pause and resume work!
  • Suspense: For data fetching and loading states!
  • Automatic Batching: All updates batched for better performance!
  • Transitions: Mark non-urgent updates!
  • New hooks: useTransition, useDeferredValue

2024 and Beyond: React 19

React 19 is coming! Look for:

  • Server Components becoming mainstream
  • Even better Suspense
  • More built-in features!

Code Examples Through the Ages

React 0.1 (2013) - JSX and createClass

// Old school React!
const Counter = React.createClass({
  getInitialState() {
    return { count: 0 };
  },
  increment() {
    this.setState({ count: this.state.count + 1 });
  },
  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
});

React 15 (2016) - Class Components

// Still using classes
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.increment = this.increment.bind(this);
  }
  increment() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

React 16.8+ (2019-Present) - Functional Components + Hooks

// Modern React - beautiful!
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Key People in React History

  • Jordan Walke: Creator of React
  • Dan Abramov: Co-author of Redux, React core team
  • Andrew Clark: React core team, Fiber architect
  • Sophie Alpert: Former React team lead
  • Sebastian Markbåge: React core, big thinker

Industry Impact

React completely changed frontend development!

  • Component-based architecture is now standard
  • Declarative UI is expected
  • JSX is everywhere (even in Vue, Svelte have similar concepts!)

Best Practices (From History!)

  1. Use modern React: Functional components + hooks!
  2. Embrace the ecosystem: Use established libraries
  3. Follow semver: React upgrades are usually smooth
  4. Stay updated: But don't jump on every new feature immediately

Common Mistakes (Lessons Learned!)

  • Early overuse of setState: Use derived state when possible
  • Not following the rules of hooks: Early days, people messed this up a lot!
  • Ignoring reconciliation: Not using keys properly caused bugs!

Summary

From Facebook's internal tool to the world's #1 frontend library, React has changed how we build UIs! The future looks bright with Server Components and React 19 coming soon!

Related Articles

Previous Tutorial

← What is React

Next Tutorial

Let's learn why React is special! → Why React

← Back to Syllabus