React is my obvious choice amongst the tons of available JavaScript frameworks. I love it and would never go back. Here's why.

It's true—React really is the new jQuery.

In the past all I'd used was jQuery, but it's not feasible for robust, single-page applications. Sure, you can get away with using anything, but the code won't be maintainable, the app will probably be slow, and it'll be a huge pain to build.

I can attest to this. My previous apps contained unmaintainable spaghetti code. But since picking up React and learning other best practices, my developer experience has improved dramatically.

Whilst the JavaScript ecosystem is fairly complex nowadays, like anything once you get the hang of it it's pretty simple. The benefits absolutely outweigh the complexity—and not to mention an app with poor architecture will be complex as hell in comparison.

Its architecture makes perfect sense

Component architecture

First of all, everything in your app is defined as a component. Components are like Lego blocks.

In Lego there's different types of blocks, such as standard rectangular blocks for building a house; body-part blocks for building people; and switches.

These blocks can be assembled together to build something. For instance, you can build a house with a door, walls, windows, and a roof. These components comprise a house—a component itself comprised of other components.

React works the same way: everything in your app is defined as a reusable component. And some of these components contain other components.

For instance, in a standard web app you'd have a component for buttons, form inputs, icons, modals, posts, or messages. These reusable components would be assembled together to form your app as a whole.

One of the main reasons this is awesome is because React's reusable, isolated architecture naturally leads to maintainable code. The reusable component architecture follows the DRY (Don't Repeat Yourself) pattern and composition over inheritance.

This isolation also naturally provides exceptional granularity in unit tests. You can easily test every aspect of your app's behaviour by testing each component in isolation and how those components interact with each other.

State

So if a React app is comprised of components, the state of the app describes a snapshot of what the app looks like at any given moment.

For example, consider this view in Twitter:

Twitter view example

The current state of the app would include:

  • The current view is 'Home' (my feed)
  • A modal is open which contains a tweet
  • The tweet is from Screely (who I'm following), with some text, an image, a timestamp, 1 retweet, and 3 likes

This state is passed down to each component as props, determining how they're rendered. For example, the rendered Tweet component would be passed an author, timestamp, message, et cetera.

The state is a single, immutable source of truth for what your application looks like. This is contrary to traditional apps where state was all over the place and thus unmaintainable.

It's also awesome for debugging. Some tools take advantage of this, such as Redux, which provides tools for developers to traverse the app's state and find bugs.

For instance, when a user encounters an error you can log the state of the application. Then developers can traverse each phase of the state to see exactly what the user saw and what went wrong. Usually that'd be very difficult to implement, but React makes it super easy.

There's many different ways to manage state which I won't get into, but this is essentially how it works.

It's super fast

This post won't delve into the internals, but React is super fast, even for mobile devices. It's built by some very smart engineers at Facebook.

The main reason for this is because React utilises the browser's virtual DOM, which is essentially a replica of the browser's DOM tree.

When the app's state changes it calculates the virtual DOM's last state and new state; figures out the difference; and then only re-renders the nodes that have changed. DOM manipulations are expensive so this lends itself to fast rendering.

It's very popular

React is here to stay. It's super popular and has even surpassed jQuery in job opportunities:

JavaScript framework job opportunities

Source: indeed.com

It's backed by Facebook and tons of reputable companies already use it. This means it's highly stable with tons of support when you need it.

It's fun

All of the reasons mentioned thus far all lead to a great developer experience: great design patterns, maintainability, performance, and support.

It's super satisfying building a React app. If you love building complex, organised, and robust systems, you'll definitely find React fun to use.

Example

To see this in action, here's what a simple Button component could look like in React:

import PropTypes from 'prop-types';
import React from 'react';

import './__styles__/Button.scss';

const Button = ({ children, onClick }) => (
  <button className="Button" onClick={onClick}>
    {children}
  </button>
);

Button.propTypes = {
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func.isRequired,
};

export default Button;

This code may look unfamiliar to you since it's using ES6 syntax and JSX, but I'll explain those briefly in a moment.

You'll notice a few main things here:

  1. Some modules are imported, including a stylesheet, Button.scss
  2. A Button component is defined containing HTML (using JSX syntax)
  3. The Button has a propTypes property defined

Essentially what's happening here is the Button is a component containing some HTML. The markup is written directly in the JavaScript because the file uses JSX syntax, which enables you to couple your logic and presentation together into a single reusable component.

The Button component is passed two props: children and onClick. These are defined as requirements in the Button's propTypes attribute—essentially a contract that'll throw errors if voided.

The Button's props are rendered in its markup. The props define the state it expects.

It renders children, which could be anything, such as HTML or text because it's defined as PropTypes.node. It's also assigned an onClick prop (expected as a function according to PropTypes.func) which is fired any time the button is clicked. Additionally the rendered button has a className attribute (automatically rendered as class) corresponding to the imported stylesheet.

You'll also notice the import and export default Button statements, which is essentially JavaScript's ES6 syntax for modular JavaScript, similar to how modules work in other languages like Python.

There's also some other ES6 syntax, such as the use of const, arrow functions (() => (<button>...</button>)), and object destructuring ({ children, onClick }).

All of this is basically how a React component works. There's plenty more of course, but these are the basics.

Conclusion

As I mentioned earlier, since learning React I'd never go back. There's only a few cases I can think of where it'd be worth using something else like jQuery; today React is my primary front-end tool.