Intro to React


React is a declarative, efficient and flexible JavaScript library for building user interfaces. It allows you to take individual code in isolation and compose them together to build complex UI.

Why React?

Facebook introduced React in 2013. Back then, complex web applications were struggling to control changes within the HTML DOM. It was hard to predict what was going to be rendered to the screen and race conditions updating the HTML was the most common bug.

Facebook and the React team set to fix this problem with two main innovations:

  • Unidirectional Dataflow
  • Immutable Component state

These fundamentally changed how JavaScript frameworks worked and controlled the mutation problem by providing deterministic view renders.

Flux Architecture

Unidirectional Dataflow

In order to build complex & robust yet predictable applications it is important to known when and how state change. React was able to isolate the rendering of an HTML view from the model and introduced a new architecture called “Flux” to the JavaScript ecosystem.

Previous to React, frontend developers were defining event listeners which were responsible for updating the state of a web application. As the application grows, event handlers take on more updates making hard to predict what get’s render in the HTML.

Instead of attaching event listeners to objects to then trigger updates to the HTML DOM, React provides a single way to manipulate a component state: send dispatch to a store. When the store changes, it then ask the component to render.

Immutable Component state

The state of a component can not change once set. Changes to the states won't change an existing view. Instead, these changes will trigger a new view render with a new state.

This allows to think of UI as a function of the application state:

UI = fn(state)

The main benefit of immutability is that it helps developers build pure components. With Immutable component states, React can easily determine if changes have been made and request re-rendering.


  • Why did we build React? React Team Official blogpost going over why they build React and why would you want to use it.
  • Facebook Flux Project. The application architecture introduced by Facebook utilizing a unidirectional data flow.
Fork me on GitHub