Why React? A Deeper Look into Facebook’s Hit Framework

By: Mark Palfreeman

JavaScript Framework Overload

In 2010, Google released AngularJS. Within a couple years, it was the front-end web framework to use when building a “Single Page App” experience. Angular’s Model-View-* approach was familiar enough to web developers and added magical data binding to speed up development of rich, responsive interfaces.

What makes React unique?

React embodied the concept that UI can be distilled down to components as a function of state. Every piece of a web application can be split into smaller maintainable components, which take in some type of state (data) as input, and render UI (HTML) as output. This simple idea — which gained traction in front-end development with help from React — changed front-end web application development and is a common practice today.

UI as Components

In many ways, web/UI developers are already used to the idea of components — we use things like <button type="submit"> and <input type="text"> all the time. React components are meant to divide parts of an app or website into small, maintainable pieces that are easy to reason about, and can be reused wherever possible.

// PlayingCard.js (component)
const PlayingCard = ({suit, number}) => (
<div className="playing-card">
<span className="playing-card__number">{number}</span>
<div className="playing-card__img">
<img src={`img/suits/${suit}.png`} alt={suit} />
<span className="playing-card__number—inverted">{number}</span>
// data from somewhere
const cards = [
suit: 'diamond',
number: 'J'
suit: 'spade',
number: 'Q'
suit: 'heart',
number: '5'
suit: 'club',
number: '2'
// render to DOM
{cards.map(card => (
<PlayingCard suit={card.suit} number={card.number} />

The React Ecosystem

React has always been a smaller library focused primarily on the UI. One of its main selling points is its (relatively) small size and abstraction from how the rest of the application is structured. It can be dropped into multiple contexts (even within apps built with other JS frameworks), and developers can manage their data however they prefer.


Ryan Florence and the folks at React Training maintain React Router and keep it right in step with React updates. It treats routes as React components (noticing a theme?), which feels familiar to developers already using React.

State management

When keeping track of state across multiple React components/routes, Redux has become the state manager of choice, providing a simple way to store state for access anywhere. Redux was written by Dan Abramov, who was later hired by Facebook and is an active maintainer of React and its surrounding tools.


In response to tools like Yeoman and the Ember CLI, Facebook built Create React App to reduce configuration and setup for React development. Developers can get started by running $ create-react-app myproject, and a simple project will be bootstrapped with a development server, transpiling, and dev/test/build scripts.

Getting Started

There are a lot of fantastic resources around the web for any developer who wants to get started in React. To really grasp React concepts, I encourage using it on small side projects and trying out the tools listed above. The following video tutorials are incredibly helpful for guided explanation and practice:



Learn to Code. Get a Job. Start Here! Learn more at www.codefellows.org

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store