WEBINAR Headless e-Commerce Driving More Revenue with Shopify and Gatsby - Register Now

Gatsby Guides

Creating UIs with React

For most of recent web history, website development has been closely tied to
content platforms like Wordpress and Drupal.

But in the last couple of years, headless CMSs have given website development
teams the freedom to build on their own stack. With this new flexibility to
innovate, website teams are looking for technologies that will allow them to
create rich experiences while iterating quickly.

One compelling option is React.

Currently the most popular framework for developing web

apps, React comes with powerful tooling that enables
developers to build rich UIs quickly without shipping bugs.

After being open-sourced by Facebook in 2013, React quickly grew to overtake Angular,
Backbone, Ember, and other frameworks in the frontend landscape.

React has many advantages for website development:

Component-based layout. Quickly assemble pages from elements you’ve already pre-
built — without bug-prone copypasta.

Easy gradual adoption. SPA-based frameworks like Angular want to be the sole source
of truth for your frontend, which makes incremental adoption difficult. With React,
convert one page or template over at a time.

Declarative, not imperative. React components always render the same data in the same
way. Forget jQuery’s manual manipulation of the DOM — which introduces hidden state
and causes difficult-to-find bugs.

Familiar structure for PHP developers. Many template-based frameworks separate out
HTML files from the Javascript needed to make them interactive. Similar to PHP
development in Wordpress, Drupal, and other CMS systems, React combines HTML with
scripting code in its .JSX file format.

Using React with Gatsby

Gatsby enables frontend developers to iterate quickly on React websites, by solving

common problems like:

Pulling in data. In Gatsby, GraphQL and plugins help you use data from nearly any source
(including both traditional CMSs and headless CMSs).

Creating pages and routes. Gatsby gives you an intuitive interface for creating pages
and routes, including internationalization.

Solving performance problems. Gatsby sites are blazing fast by default due to Gatsby’s
way of loading static files.

Site hosting & serving. Gatsby’s static file output can be hosted on a CDN such as
Netlify without operational complexity or the hosting cost of app servers and databases.
 Ready to Get Started?

Request a demo

See the Hello World React + Gatsby example

Read documentation about how Gatsby uses React components

Read the case study of an agency that’s moving from Wordpress to Gatsby + React

OPEN SOURCE

GATSBY CLOUD

FEATURES

COMMUNITY

EVENTS

COMPANY

Gatsby is powered by the amazing Gatsby

community and Gatsby, the company.

Subscribe to our newsletter

you@example.xyz

Accessibility Statement Brand Guidelines

Terms of Use Privacy Policy

© 2021 Gatsby, Inc.