Some developers just prefer working in React. I don’t blame them really, because I like React too. Maybe that’s what they learned first. I’ve been using it long enough there is just some comfort to it. But mostly it is the strong component model that I like. There is just something nice about a codebase where things are constructed from components with clear jobs and responsibilities.
It’s not terribly common to see WordPress sites built with React though. The standard way to use WordPress is through themes that are essentially styles and PHP files that handle the templating. Frontity is changing that though. Frontity is a React-powered framework that digests your WordPress site’s API and builds the entire front end in React with all the powerful tools you’ve come to expect from that type of environment.

OMG, Now That’s a Fast Setup
This is how I was able to get started. At the command line, I did:
npx frontity create my-app
Then I went into the folder it created and did:
npx frontity dev
That instantly spins up a site for you to start working with.
To make it feel more real for me, I did went into frontity.settings.js
and changed the source API to point at CSS-Tricks:
{
name: "@frontity/wp-source",
state: {
source: {
api: "https://css-tricks.com/wp-json",
},
},
},
And now look at what I get:

That’s wild. For some projects, that’s straight up ready to deploy.
Check out their intro video which steps through this exact thing
Getting to Work
My first instinct with things like this is to get my hands into the styling right away. The theme that installs by default is the Mars theme and they have a nice guide to help wrap your mind around how it works. The theme uses Emotion for styling, so the components have styles you can mess with right in them. I found the <HeadContainer>
component in index.js
and immediately did the background: red
change!
const HeadContainer = styled.div`
display: flex;
align-items: center;
flex-direction: column;
background-color: red;
`;
It hot-module-reloaded that sucker instantly:

Is this one of those client-side only technologies?
That’s what I thought to myself. I mean, one of the advantages of using WordPress as-is is that you get the server rendering for free. That means no SEO worries (we know client-side rendered sites can take a week or more to be crawled for every change). That means resiliency and speed.
Frontity does do server side rendering! It uses Isomorphic rendering, meaning you need a Node server to render the pages, but that means the browser will get fully formed HTML for pages!
It’s a perfect match for Vercel, basically.
Similarly to how easy a new site is to scaffold and run in development, all you have to do to prep it for production is:
npx frontity build
Then run the Node server:
npx frontity serve
Cool.
I also really like that there is community around all this. If you need help, you’ll get it.
This is a best-of-all-worlds scenario.
I’m always very happy building sites with WordPress, and doubly so now that we have the block editor to use. I really like having an editor experience that helps me write and craft the kind of pages I want to create.
But I also like working with component-based architectures that have fast, easy-to-use, hot refreshing local development environments. Once you work in this kind of dev environment, it’s hard to use anything else! Beautiful DX.
And I also also want to make damn sure the sites I deploy to production are fast, robust, resilient, accessible, and SEO friendly.
I’d get all that with a Frontity site.
Another thing I like here is that Automattic themselves is on board with all this. Not just in spirit, but they are literally big investors. I think they are very smart to see this as an important part of the WordPress ecosystem. Building with WordPress doesn’t mean not building with React, especially with Frontity doing so much of the heavy lifting.
this is just great! I love it!! takes wp to the next level
Just sit back and love react these are tools you don’t have to like them
I don’t know why the WP team choose React over Vue, but I really don’t like react for the JSX and it’s spaghetti code. I wish WP had a similar Vue based system. That would have been awesome.
React doesn’t make spaghetti code, bad developers make spaghetti code… Ye??
Agreed. Would prefer a Vue solution.
It’s the developer who made the spaghetti code not react. If you are not familiar with react you would just do it in a wrong way. Those who doesn’t dwell on it won’t understand that!
Thank you for providing compelling information for anyone who is building a website in WordPress.
This is awesome love this
I’m not familiar with react, but see how excited you are about it makes me interested. Could u explain some of the benefits of this? U deployed a site in 12 seconds so that is impressive, but where did the content come from?
Hi Joseph! I’m JuanMa and I’m at the Developers Relations team in Frontity.
Frontity is a free and open source framework. It enables you to easily build a React-based frontend for a headless (or decoupled) WordPress site. Your WordPress site serves its data via the REST API, and the frontend that you build with Frontity consumes this data and renders it in the browser which you can configure and style to your liking (using React components).
You can find more info at our docs site: https://docs.frontity.org/
Hi Sir,
I am Frontend devloper and working on React js applications as well as WordPress sites. I would like to use Frontity React framework for my website after reading above article. My current WordPress site taking too much time to load. I think React Frontity will be helpfull me.
WordPress has an API where information like Blog Post and Menu can be pulled
That was impressive I will definitely give it a try!
It’s worth to mention this is just using WordPress as headless CMS. You will lose out of the box WP server-side rendering and compatibility with many plugins.
True, but people are making packages like frontity-contact-form-7 to add back functionalities.
Hi Roberto! I’m JuanMa and I’m at the Developers Relations team in Frontity.
Let me give some more info about SSR and WP plugins with Frontity.
– Frontity provides server-side rendered pages from React components. This reduces the time required for the first contentful paint and ensures that the SEO is not harmed.
– There’s a movement in the WP ecosystem towards Headless WP so lots of plugins are taking care of their integration with the REST API. And once in the REST API, Frontity simplifies for you the process of using this data from your React components
You can find more info at our docs site: https://docs.frontity.org/
At this time I was thinking about doing something with React to wordpress. It was good that I saw this article.
does this generate static WP site?
can I host WP for free anywhere?
does this work with woocommerce ?
Hi Tan! ! I’m JuanMa and I’m at the Developers Relations team in Frontity.
Let me answer your questions
does this generate static WP site?
No, Frontity will generate your pages dinamically from your WP REST API content. This means you won’t need to rebuild your site every time you update your content in WP. If you add a good cache strategy to this, you can have best of worlds with Frontity (good performance and real time connection with your content).
can I host WP for free anywhere?
Of course, there are a lot of ways of having your WP installation for free. The most popular one is wp.com. You can use your wp.com as source of data of your site built w/ React by using Frontity.
does this work with woocommerce ?
With Frontity you have the same challenges than with any other isomorphic React app. In the case of WooCommerce most of the endpoints are protectec so you’ll need a strategy to access these endpoints from both the client side and the server side. You can find some discussions (and some solutions) about this in our community forum https://community.frontity.org/
You can find more info about all of this at: https://docs.frontity.org/
Hi Tan
Frontity does not generate a static site. The content is dynamically pulled from the WP REST API and so each page view shows up-to-date content. Frontity does produce a server-side rendered version of your site which is beneficial both for your SEO and for first contentful paint (improving perceived response time – so great for UX). Once client-side React hydration has completed all requests to the WP REST API are then made by the client.
For free WP hosting you can use a wordpress.com site, though you’re limited in the range of plugins that you can install with that option. If using wordpress.com please note that the ‘api’ address is formatted differently. It should follow this format:
https://public-api.wordpress.com/wp/v2/sites/your-wp-site.wordpress.com
See the docs here for more info: https://docs.frontity.org/getting-started#initial-checks
If you just want to try out Frontity you can use a locally installed version of WordPress.
Frontity can be made to work with WooCommerce but it does require some effort, as the WooCommerce REST API requires authentication.
It comes with quite a learning curve for WordPress developers. So generally I am observing a negative attitude towards Frontity from the community. It was the same when Gutenberg was introduced initially.
To be honest we were also sceptical about it. We preferred Vue and Nuxt over React for WordPress headless development. But at the same time, we wanted to try our hand on React so badly and we pushed ourselves to do an experimental project in Frontity. There were challenges, but we did not retreat. We ended up building our own website in Frontity along with a Frontity package for one of our own plugin – Wp Job Openings.
Frontity is still not a perfect solution but it is getting there. We now look forward to building more projects using the framework and React. We have shared the whole experience as a case study on our blog.