React from 30k feet: Building Dynamic UIs with Ease

TLDR; I’m going to attempt to explain the finer points of building dynamic user interfaces (UIs) using React. React is a Javascript library (not a framework!) for building user interfaces. It is incredibly popular and has revolutionized front-end development.

What is React?

Developed by Facebook in 2013, React brought a refreshing approach to building web interfaces. Imagine a painter who, instead of creating a whole landscape in one go, focuses on painting trees, houses, and the sky separately and then combines them into a single picture. Similarly, React allows developers to build UIs in a modular way using components.

Component-Based Architecture

React’s architecture is centered around components. Components are independent and reusable bits of code. They serve the same purpose as Javascript functions, but work in isolation and return HTML via a render function.

Think of components like LEGO blocks. Each block is a standalone unit but can be combined with other blocks to create complex structures. In React, these structures are your UIs.

Here’s a simple React component:

function Welcome() {
  return <h1>Hello</h1>;
}

This component, Welcome, very simply returns a greeting message.

JSX: A Syntactic Sugar

JSX stands for Javascript XML. It’s a syntax extension for Javascript, and React uses it to describe what the UI should look like. JSX may look like HTML, but it’s actually closer to Javascript.

Let’s modify our Welcome component with JSX:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

In this version, Welcome, takes props (short for properties) and returns a greeting message. The expression {props.name} is embedded within JSX and will be evaluated as Javascript.

State Management in React

State management is like the memory of your components. It’s where you store property values that belong to the component. When the state changes, the component responds by re-rendering.

useState Hook

React introduced Hooks in version 16.8, which allow you to use state and other React features without writing a class. useState is one such Hook.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

In this Counter component, useState is used to keep track of the number of button clicks.

The Virtual DOM

React’s efficiency largely comes from its use of the Virtual DOM. The Virtual DOM is like a staging area for changes that need to be made to the actual DOM. It’s a lightweight copy where React first applies changes. Only the differences between the real and virtual DOMs get updated on the real DOM.

Imagine you’re editing a photo in Photoshop. Instead of applying filters directly to the original, you make a copy and apply filters to that. Once you’re happy with the changes, you merge them with the original. This process is similar to how React updates the DOM.

React’s component-based architecture, combined with its efficient state management and the use of the Virtual DOM are just some of the reasons it is such a popular choice for building UIs. This was just a quick overview, but in a later post we will dive into some of the more advanced topics in React. I’m thinking it would be fun to talk about React Hooks, what they do and how they differ. Stay tuned!