Build Your Own React Universal Blog App
Close
    • Build Your Own React Universal Blog App
    • Notice of Rights
    • Notice of Liability
    • Trademark Notice
    • About SitePoint
    • Conventions Used
    • React is:
    • React uses a “virtual DOM”
    • How React works
    • When should you use React?
    • JSX
    • Properties
    • Composable Components
    • How Does Create React App Work?
    • Starting a Local Development Server
    • Running Unit Tests
    • Creating a Production Bundle
    • Opting Out
    • Getting Started
    • Our Blog App Components (Basic Example)
    • The Store: the Single Source of Truth
    • React Components: Higher and Lower Level
    • Page Components
    • Actions: Last Stop Before the Store
    • Configure Your Cosmic JS CMS
    • OK, so... now what?

Wait, what is React?

React is:

... a Facebook creation which simply labels itself as being a JavaScript library for building user interfaces. It’s an open-source project which, to date, has raked in over 74,000 stars on GitHub.

It is:

  • Declarative: you only need to design simple views for each state in your application and React will efficiently update and render just the right components when your data changes.
  • Component-based: you create your React-powered apps by assembling a number of encapsulated components, each managing its own state.
  • Learn Once, Write Anywhere: React is not a full-blown framework; it’s just a library for rendering views.

React uses a “virtual DOM”

That's what makes React fast and responsive. The HTML Document Object Model or DOM is a representation of the document as a structured group of nodes and objects that have properties and methods. It connects web pages to scripts or programming languages.

Whenever you want to change any part of a web page programmatically, you need to modify the DOM. Depending on the complexity and size of the document, traversing the DOM and updating it could take longer than users might be prepared to accept. Every time the DOM gets updated, browsers need to recalculate the CSS and carry out layout and repaint operations on the web page.

The Virtual DOM is a lightweight, abstract model of the DOM. React uses the render method to create a node tree from React components and updates this tree in response to changes in the data model resulting from actions.

Each time there are changes to the underlying data in a React app, React creates a new Virtual DOM representation of the user interface.

How React works

  • Whenever something changes, React re-renders the entire UI in a Virtual DOM representation.
  • React then calculates the difference between the previous Virtual DOM representation and the new one.
  • Finally, React patches up the real DOM with what has actually changed. If nothing has changed, React won’t be dealing with the HTML DOM at all.

Efficient diff algorithms, batching DOM read/write operations, and limiting DOM changes to the bare minimum necessary, make using React and its Virtual DOM a great choice for building performant apps.

When should you use React?

React is great at making super reactive user interfaces — that is, UIs that are very quick at responding to events and consequent data changes.

React would be a great fit for web apps where you need to keep a complex, interactive UI in sync with frequent changes in the underlying data model.

React is designed to deal with stateful components in an efficient way (which doesn’t mean devs don’t need to optimize their code). So projects that would benefit from this capability could be considered good candidates for React.

Community Questions