How to Create a React Site With WordPress

A few months ago we embarked on an adventure to completely redevelop the Drewberry site using fresh new designs, whilst maintaining our 1,000+ highly ranking WordPress pages intact.

We researched a lot, trying to figure out the best approach, and we found out that most online tutorials attempted to give you a crash course on React and WordPress, ignoring important aspects of SEO such as being able to work with Server Side Rendering (SSR) pages.

I’m not here to do that. Instead, I would like to give you a practical example and quickly point you in the right direction.

I will however make a few assumptions:

Preparing your SSR React App

I’ll go ahead and assume SEO is a concern which really, it should be! Don’t be fooled by articles out there saying Google is clever enough to deal with Javascript-only pages; whilst it’s true to some extent, you must ensure the content is available, even if JS is not present.

To achieve that I’ll make yet another recommendation, Razzle.

Razzle is the closest thing you will get from the great experience it is Create React App, and at the same time enabling SSR.

Before we set it up, let’s make sure we have a WordPress API we can connect to.

WordPress API End Point

Using the WordPress Rest API you should be able to get full pages in the JSON format.

However, most sites nowadays are not just a plain WordPress installation, and will include some sort of plugin, and at times even custom data processing.

Well, the good news is the WordPress Rest API is extendable and we’ve created a custom plugin — clone / download it using this link.

Place the contents inside of a folder of your preference under your plugins directory, then edit the content generator file.

ContentGenerator.php

As an optional step, you can change the name Drewberry to something more suitable to your company, but please bear in mind I’ll carry on referring to Drewberry in the api path in this tutorial:

init function

Note the file ContentGenerator.php is where all the magic happens. From here you can transform your content response in any way you like, extend it using new functions, integrate with with some other API — the world is your oyster.

Once your plugin is enabled, you should be able get get an API response for it. In my example, I created one with the slug /news/this-is-a-test and I navigated to it: /wp-json/drewberry/v1/get-by-slug?slug=/news/this-is-a-test

Your resulting page is something like:

json response

You are now ready to serve this content to our React front end.

Getting Started With Razzle

We now get back to our React Razzle application, and we’ve created a quick example, which will connect to the WordPress back end we’ve prepared earlier, clone / download using this link.

Modify the file config file below, so the WP_END_POINT matches yours:

Config File

From your terminal run:

npm install && npm start

Navigate to: http://localhost:3000/news/this-is-a-test

You should be able to load a basic page, containing the text contents of your post.

This means you now have a working copy of a basic SSR React Application, connected to a WordPress end point.

Complete Your Application

Now that you have a very basic SSR React integration with WordPress running, you should head out to Razzle’s git hub, and learn everything you need to take your application to a production ready state.

From our WordPress API plugin, you should now create any actions, filters, and really any data processing required.

The reality is it’s actually pretty simple nowadays to get started with a React SSR site with WordPress, and you can then make your implementation as a simple or as complex as you may need it.

Hope this article has been useful to you.

About Drewberry

Our goal is simple: to improve our clients’ financial wellbeing.

We help our clients take control of their finances by building lasting relationships where we support them to make informed decisions.

We provide financial advice services to individuals and businesses throughout the UK. Whether it’s setting up personal insurance to protect your lifestyle, managing your pensions, investments and other assets to improve your financial future or setting up employee benefits for a company, we’re here to help.

Drewberry reviews

I have always received great service and a great line of product for my employees. The staff has been very knowledgeable and I have enjoyed working with Nadeem on setting up our plan.

Kim Sysak
03/06/2020

I have always received great service and a great line of product for my employees. The staff has been very knowledgeable and I have enjoyed working with Nadeem on setting up our plan.

03/06/2020
Kim Sysak
Contact Us
Head Office & Pensions and Investments
Millennium Bridge House
2 Lambeth Hill
London
EC4V 4GG
Personal Insurance & Accounts Payable
Telecom House
125-135 Preston Road
Brighton
BN1 6AF
Drewberry London Office MapDrewberry Brighton Office Map
Our Core Principles
  • 1You Come FirstWe are a client focused business who always aim to put you first.
  • 2We are ExpertsTo provide you with the best advice, we need to know our stuff!
  • 3We are HumanWe are real people with feelings who are here to help you.
  • 4We are ProfessionalProviding a 5-star service requires a professional approach to everything we do.
  • 5We are here to EducateWe don't believe in sales, we are here to educate so you can make informed decisions.
Finalist - Moneyfacts AwardsFinalist - Cover Excellence AwardsHighly Commended - Protection Review Awards
Proud member of AMII (Association of Medical Insurers & Intermediaries)Proud member of Money Advice ServiceProud member of UnbiasedProud member of BIBA (British Insurance Brokers' Association)
Cookie Use

Drewberry™ uses cookies to offer you the best experience online. By continuing to use our website you agree to the use of cookies. If you would like to know more about cookies and how to manage them please view our privacycookie policy.