With headless wordpress development over 165k GitHub stars, React, a frontend framework established at Facebook in 2013, is currently one of the most popular Frontend frameworks used by JavaScript developers. React is a sophisticated framework that allows developers to construct reusable code blocks called components, update DOM elements using the Virtual DOM making web projects more performant, and offers a large library of tools to make developers’ life simpler.
WordPress, on the other hand, was founded ten years before the initial version of React was released, and the framework is still going strong today. WordPress still powers over 40% of the internet and is not going anywhere anytime soon. We will use the strength of both frameworks to build an app with React on the front end and WordPress as the backend or, more accurately, as the Content Management System (CMS) that drives our app.
Setup the backend
First, we will set up the WordPress backend. Before continuing with this method, make a few posts in your WordPress backend that are set up with Local. Make a request to http://YOUR SITE NAME.local/wp-JSON/wp/v2/posts using Postman.We are set to go after you check that the POSTS endpoint is operational. Using the WordPress GUI, you can add more POSTS, build new post kinds, and so on in the backend.
Setting up the FrontEnd
We will use Next.JS and TailwindCSS to create the application’s frontend. Image optimization, routing, serverless functions, and more features come included with Next JS. It is no surprise that the project has a GitHub star count of over 64,000. TailwindCSS is a utility-first framework that lets you create CSS in your HTML using low-level classes. NextJS includes a simple CLI shortcut that will produce a boilerplate for us using NextJS and TailwindCSS. Make sure you have Node and NPM installed on your PC before running the code below.
yarn create next-app-example with-tailwindcss wordpress-react-app && cd wordpress-react-app
The wordpress-react-app line at the end of the program above creates a folder named wordpress-react-app that contains the sample files. After the installation is complete, navigate to the project’s root directory. Make a folder called lib > constants.js in your project.
Getting and Displaying Posts on the FrontEnd
We may utilize the JavaScript Fetch API or Axios to make queries to our backend WordPress server. An HTML Parser is also required to assist in parse the HTML tags given by the WordPress server. WordPress offers a /post/[id] endpoint by default, which provides details about a post.Â
This endpoint will only provide the authorId and featuredImageId for a post; we will need to use the /author/[id] and /media/[id] endpoints to acquire further information about the author and featured image of a post. After that, navigate to pages > index.js. We will create a request to retrieve all of the posts from our WordPress server and save them in a React state here.
Let’s create the Post component
Make a new folder named components in your project folder. Create a Post.js file within that component. Our Post component will get a post object containing the media and author ids, and then perform further queries to retrieve the name and url, respectively.
Displaying Individual Posts
Let’s now look at specific posts. NextJS features built-in routing that allows us to render pages and content dynamically. To pre-render our pages at build time, we will utilize the getStaticProps and getStaticPaths functions. More information may be found here. When Nextjs develops and publishes our site, the pages for each post are automatically built at the same time. When a user attempts to navigate to a certain article, our site loads quickly since it does not need to make repeated journeys to gather data from our WordPress server.
We will need to call two extra Nextjs methods: getStaticPaths and getStaticProps. At the moment where our site is being developed and compiled, the getStaticPaths function will get all of the postIds. Nextjs will begin the process of pre-rendering pages based on the ids given from this function, ensuring that our site remains quick! The getStaticProps function is then called. Using the postId handed down by the getStaticPaths function, this method will get all the additional parameters required for a post.
