React with WordPress API

React with WordPress API


Published at - Aug 13, 2021

Hello, Today I am going to explore how you can use WordPress API to run a reactjs website. We all know that WordPress is a very popular CMS for blogging, e-commerce, and tons of other features. We can add new features by installing various kinds of plugins. So we are going to use WordPress API to create a reactjs blogging website.

Learn react Click here

WordPress

WordPress is the most popular cms framework for blogging. WordPress provides many features such as 

  • Ease of use
  • No coding knowledge required
  • Search engine optimized
  • Control over website
  • 100% customizable

and many others.

Why use React WordPress

Because WordPress provides tons of features, it becomes slow. To speed up and running smoothly we required to react js to convert it into a single page application for frontend users. Some other advantages of using WordPress react given below

  • Speed up our application
  • PWA Application
  • Easy to customize
  • Easy to manage content

WordPress API

WordPress provides API to perform all kinds of actions. Here is the dummy link by which we can access our API – http://yourdomain.com/wp-json/wp/v2/posts. We need to change the domain name from the above link and then by hitting it with our web browser we will receive our posts in JSON data format.

The React framework for WordPress

There is a quick and customizable solution to convert your existing WordPress website into React Js Website using the Frontity framework for WordPress. This framework is free and open-source to use.

How Frontity works

A server-side, dynamic framework for headless WordPress sites and blogs

How to install Frontity

Frontity cli and entry point to other packages.

npm install frontity -g

Once your package is installed we need to follow 4 steps to run our website successfully.

  • Create new project 
    • Create a new Frontity project with a single command.
    • Everything (bundling, transpiling, routing, server rendering…) is already configured for you.
$ npx frontity create my-app

✔ Creating package.json.
✔ Creating frontity.settings.js.
✔ Cloning @frontity/mars-theme.
✔ Installing dependencies.

Frontity project created!

Run cd my-app && npx frontity dev and have fun! 🎉

$ cd my-app

Read More

  • Connect Frontity

We need to change our URL in the frontity.settings.js file under the source object.

// frontity.settings.js

export const settings = {
  packages: [
    {
      name: "@frontity/wp-source",
      state: {
        source: {
          url: "https://frontity.org/"
        },
      },
    }
  ],
};

Read More

  • Setup your theme and style it

Frontity provides a default theme and we can also change this theme and customize it as per our requirement 

import { styled } from "frontity";

const StyledDiv = styled.div`
    width: 100%;
    text-align: center;
    color: white;
`;

Read More

  • Deploy

Now we can deploy our application to the server

npx frontity build
npx frontity serve

Conclusion

Frontity is a great tool to use react with WordPress website it provides easy-to-customize features and you can start building a website in just 2 minutes or less with 100% customizable components. It is very easy to install and run your WordPress website with react js by using the frontity framework we can learn more from the official website. Thank you for reading. 



About author

Harendra
Harendra Kanojiya

Hi I'm Harendra Kumar Kanojiya. Currently I am FSD (Full-stack developer) and I have expertise with Angular ,PHP, Node JS, Laravel, Codeigniter and front end. Done few live projects and portfolio work in above.



Follow Us

Follow us on facebook Click Here

Facebook QR
Scan from mobile
Join our telegram channel Click Here
Telegram QR
Scan from mobile