React Front Ends for WordPress, Without the Pain

WordPress sites are normally rendered through PHP-based themes, which is fine for a lot of projects. But if your team lives in the React world, the mismatch between the editor experience and the front-end stack can be jarring. Frontity is a React framework that consumes a WordPress site's API and renders the entire front end as React components. Essentially, you keep WordPress as the content backend and build the presentation layer with the component tooling you already use.

Scaffolding a Site Takes Seconds

Setting up a new project is just a couple of commands:

npx frontity create my-app

Then move into the generated folder and start the dev server:

npx frontity dev

That's enough to get a working site running locally. To see how it handles an existing WordPress installation, you can point the framework at a real source by editing frontity.settings.js. Changing the source API to a live site like CSS-Tricks immediately pulls in the content:

{
  name: "@frontity/wp-source",
  state: {
    source: {
      api: "https://css-tricks.com/wp-json",
    },
  },
},

The result looks like a fully formed site ready for production:

For some projects, the default setup is close to deployable right out of the box.

Theming Is Component Work

The default template is the Mars theme, and the docs walk through how it's structured. Styling is handled with Emotion, so each component carries its own styles. The <HeadContainer> component in index.js is a good place to start experimenting:

const HeadContainer = styled.div`
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: red;
`;

Changes sink in immediately via hot module replacement:

Not Another Client-Side-Only SPA

One concern with React front ends is losing server-rendered HTML, which matters for SEO and initial load performance. Frontity uses isomorphic rendering, which means a Node server produces fully formed HTML for each page. That also makes it a natural fit for Vercel.

Building for production is no more complicated than development. Prepare the production bundle:

npx frontity build

Then start the Node server:

npx frontity serve

There's also an active community for troubleshooting and best practices.

WordPress and React, Together

The appeal here isn't just developer preference. You get the WordPress block editor for content creation, a component architecture with fast hot reloading during development, and the SEO and performance benefits of server-side rendering in production. Automattic has taken notice too, and is a major investor in Frontity — a signal that React-based front ends are becoming a legitimate part of the WordPress ecosystem rather than an alternate path. If you want to build with WordPress and React, Frontity does the heavy lifting so you don't have to compromise on either.