Introduction to React and Single Page Apps

React.JS is a JavaScript library that a lot of the hottest companies are adopting for their front-end stack. As a developer, you gain access to more jobs once you start building with React.

What You Need

To understand this article, you need basic knowledge of the following:

AJAX

JSON

HTML

JavaScript

DOM (Document Object Model)

Client-Side Routing and Rendering

Why Use React? What is Its Use-Case?

React, not to be confused with React Native (an iOs and Android library), is an open-source JavaScript library created by Jordan Walker, a Facebook engineer. It was initially implemented into Facebook's and Instagrams's newsfeed and is now adopted by companies like Imgur, Netflix, and Airbnb.

You can use React to build user interfaces. The best application for React is building Single Page App User Interfaces (SPA UIs). An excellent code playground for React apps is CodeSandbox.

Finally, React is the most trending and in-demand front-end library for building SPA UIs. Adopting React translates into more job opportunities.

What is the difference between a SPA and a traditional web application?

In a traditional web application, when we submit a form or click on a link, we go to a new page or view. In a single page app, we see the user interface change without a full-page refresh.

How do we avoid full-page refreshes?

Three main methods make SPAs possible:

1. Client and Server Communication with AJAX

In a React app, when the browser loads the index.html file, it loads the app's UI (user interface). Asynchronous JavaScript and XML, or AJAX for short, fetches and provides data in JavaScript Object Notation (JSON).

2. Client-side routing

By utilizing the browser's History API or Hash URIs, you can manipulate a URL so that an HTTP request to the host isn't triggered when the URL changes. The popular React Router uses the History API to perform client-side routing.

Hash URIs include a # in the URI. For example, when you click on this link, it takes you directly to the references section of the page. Hovering over the h2s and h3s of this page triggers a link icon to pop up. When you click on these links, you go to the section of the page, but the page doesn't refresh.

3. Client-side rendering

JavaScript manipulates the DOM in client-side rendering. Animated and interactive websites such as drag-and-drop interfaces and drop-down menus usually use client-side rendering.

What role does tooling play when you're developing a React app?

Tooling automates and enhances a developers workflow by enabling the development of complex web apps. It processes source code and makes it ready for production. In React, tooling takes JSX, syntactic sugar specific to React, and transforms it into JavaScript.

JSX

JSX stands for JavaScript XML. It looks very similar to HTML, but it is NOT HTML. JSX is later transpiled with tooling into pure JavaScript. Naturally, JSX does not behave like HTML, so when you first start learning React be aware that the code you're looking at is JavaScript XML.

Components

A React app's UIs consist of components. Every single thing you see on the page, the navigation, the footer, and the content is a React component. You can also refer to components as React Elements.

Like HTML, you can nest components within other components like you can nest tags. You can style components and give them user-interaction functionality. However, as stated in the JSX section, you create all components with JavaScript. There is entirely no HTML in React components.

State

Components can hold state (stored data). Each component can hold its separate state. For example, if you wanted to change the state of a component named Button, then you couldn't change that state by building on a component named Header. When the state of a component changes, the entire component re-renders.

Rendering

React apps quickly render because React renders a Virtual DOM, which is an in-memory representation of the DOM. When rendering completes, React compares the current Virtual DOM to the previous Virtual DOM. It only computes the differences between the two. Finally, React updates that difference to the browser's DOM.

Further Learning

Refer to React's official documentation here.

Watch this free introduction to React at Egghead.io.