Introduction to React

The Web Before React

In the early 2010s, front-end development was a completely different universe. Three technologies dominated:

jQuery: The King of DOM Manipulation

jQuery embraced the reality of the web: a tree of DOM nodes. Your application's "state" effectively lived in the DOM itself. Updating the UI meant:

• 1.Finding the right DOM node
• 2.Mutating it
• 3.Hoping you didn't break something somewhere else

// jQuery example - imperative DOM manipulation
$('#submit-btn').click(function() {
  var name = $('#name-input').val();
  if (name) {
    $('#greeting').text('Hello, ' + name + '!');
    $('#greeting').show();
    $('#name-input').val('');
  }
});

jQuery revolutionized browser compatibility and developer ergonomics... but it also created a world of shared mutable state. As applications grew, that state became impossible to track. jQuery projects often devolved into unpredictable "spaghetti code."

Backbone.js: Minimalism and the Rise of MVC

Backbone.js introduced a lightweight, JavaScript-friendly version of MVC:

• •Models stored application state
• •Views re-rendered when models changed

// Backbone.js example
var UserModel = Backbone.Model.extend({
  defaults: {
    name: '',
    email: ''
  }
});

var UserView = Backbone.View.extend({
  render: function() {
    // Developer had to define their own rendering logic
    this.$el.html('<h1>' + this.model.get('name') + '</h1>');
    return this;
  }
});

At only ~2,000 lines of code, it was intentionally minimal and unopinionated. So unopinionated, in fact, that Backbone's default render() method did nothing. Developers had to define their own rendering and templating strategies.

AngularJS: "What if HTML Was More Powerful?"

AngularJS took the opposite approach. It was a fully opinionated, batteries-included framework offering:

<!-- AngularJS example - two-way data binding -->
<div ng-app="myApp" ng-controller="myCtrl">
  <input ng-model="name">
  <p>Hello, {{name}}!</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = 'World';
});
</script>

It was incredibly powerful, especially for backend developers suddenly tasked with building frontends. But Angular's biggest feature was also its biggest problem:

The Common Problem: Mutation Everywhere

Despite their differences, nearly all frameworks of the era shared one characteristic:

Mutation made complex apps harder to reason about and maintain. Developers needed a better mental model. And that's exactly what React introduced.

React's Breakthrough: UI as a Pure Function of State

One of React's core innovations was the idea that your UI is a function of your state:

Instead of manually manipulating the DOM:

• 1.You update the state
• 2.React figures out how the UI should look

Components: Bringing Functional Thinking to UI

React wrapped this idea inside a component-based architecture. Components:

// React component - declarative UI
function Greeting({ name }) {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

JSX: The Most Hated Feature That Became a Superpower

React needed a way to describe UI inside components. The logical answer was HTML — but HTML couldn't exist directly inside JavaScript... until React invented JSX.

JSX combined:

• •The expressiveness of JavaScript
• •The readability of HTML

But React had a different interpretation:

Once developers built real applications with JSX, they quickly realized its power.

React Today: A UI Primitive for Modern Frameworks

From 2014 to 2020, React was mostly used for single-page applications with React Router. But modern development has evolved.

Today, React is treated as a UI primitive inside larger metaframeworks like:

These frameworks add features like server-side rendering, routing, streaming, and bundling — while React stays focused on what it does best:

Summary

React succeeded because it dared to challenge the status quo: