Create amazing websites using WordPress & React in a matter of minutes

Even the biggest companies in a given space need to adapt to survive. Apple with the iPod. Google with AdWords. You get the idea.

Another tech big fish, WordPress, has been keeping up with a recent trend β€” headless CMS showing a will to stay relevant and evolve:

Every developer and their dog have something to say about WordPress, and it’s not always flattering. Far from it. However, even its most avid detractors are forced to take notice of this feature, because it has already transformed the way we use the popular CMS.

WordPress Rest API is a huge step forward for frontend developers looking to combine the power of JavaScript tools like React.js with WordPress. But the making of this kind of website is not an easy task as that involves lots of development time & money.

In this post, I’m telling you how to create an amazing website using WordPress & React in just a matter of minutes. In this, we are using Frontity framework.

Frontity is a free and open source framework to build super fast WordPress themes using React.

Basic Intro

Frontity is a free and open source framework to build super fast WordPress themes using React. You can check the official website at https://frontity.org/

What do you need?

WordPress website (An existing WordPress website will work) + Node.js Server

Step 1

Create a new Frontity project. Frontity has it’s own CLI so you can just create a new Frontity project with a single command:

npx frontity create first-app && cd first-app

This command will create a new directory with the following structure:

first-app/
|__ node_modules/
|__ package.json
|__ frontity.settings.ts
|__ favicon.ico
|__ packages/
|__ mars-theme/

Step 2

Start development or production server

Start a development server with:

npx frontity dev

Or

Start a production server with:

npx frontity build

Step 3

Connect your WordPress website with frontity.

You just need to replace a website URL in the file frontity.settings.js in the project root. In my case website, URL is https://smitpatadiya.com

{
   "name": "@frontity/wp-source","state": {
     "source": {
         "apiUrl": "https://smitpatadiya.com/wp-json"
     }
   }
}

Done. Now you connected your WordPress website with frontity.

Step 4

Configure the Header menu

You can configure what to display in the header menu. You just need to modify the header menu in the same file (frontity.settings.js).

{
    "name": "@frontity/mars-theme",
    "state": {
      "theme": {
        "menu": [
          [
            "Home",
            "/"
          ],
          [
            "Nature",
            "/category/nature/"
          ],
          [
            "Travel",
            "/category/travel/"
          ],
          [
            "Japan",
            "/tag/japan/"
          ],
          [
            "About Us",
            "/about-us/"
          ]
        ],
      
      }
    }
},

In the above configuration

  1. Nature & Travel are blog categories
  2. Japanis tags
  3. About Usis a custom page

πŸ‘ πŸŽ‰ You have successfully converted your WordPress blog to React Website.

β€” Some useful links

Like & Share this article

No alt text provided for this image
import { WordPress, WooCommerce, React } from "@smit";

I’m a Digital Nomad & Fullstack developer (LAMP + MERN). I’m working from Himalayan Valley to the west coastal area, mostly working around WordPress, WooCommerce, React.js & wp-rest api.

You can check my WordPress plugin at https://wordpress.org/plugins/orion-sms-otp-verification/ (8300+ Downloads & 900+ Active Installs while writing this blog).

Are you Hiring? Feel free to reach me out. Contact details are available in my LinkedIn profile.

Leave a Reply