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.

React LogoShapes

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?