Introduction to React and Single Page Apps
Coding with React is a high-in-demand skill for developers. Start learning React today. Your future-bank-account will thank you.
What You Need
To understand this article, you need basic knowledge of the following:
DOM (Document Object Model)
Client-Side Routing and Rendering
Why Use React? What is Its Use-Case?
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
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
What role does tooling play when you're developing a React app?
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.
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.
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.
Refer to React's official documentation here.
Watch this free introduction to React at Egghead.io.