Integrate the power of React front-end with the web’s best CMS
WordPress has captured the current market for building web apps. No wonder developers are thinking about expanding it to make WP React Theme. It is not only the popular and most used Content Management System but also the one that can be used as a headless CMS. Your mind might be questioning what a headless CMS is! But You know Headless definitely does not mean that the CMS is missing the header section. 😉 This platform has unique flexibility and strength to combine with JavaScript’s front-end interface.
Wanna gear up to a modern React Single Page Application (SPA), but need a back-end that feels familiar? However, we’ll go through how to set up WordPress’s REST API, and how to fetch those data inside React. Let’s talk about the WordPress Themes that are developed with React code firstly. We can fetch WordPress data in the React application, including custom post types and fields. But there are no React-based WordPress Themes to date(as per our research). If there are some of those, we will love to explore them.
To talk about the complete WP-React Theme, we can see some of the ways on the internet. Although they don’t seem perfect, Let’s have a look at them too.
- Using create-react-wptheme
This is how it works. Do the following steps at the git bash/command line of the theme directory:
- npx create-react-wptheme demotheme
Note that “demotheme” is the name of our theme. So, You can simply replace this with the name of your preference.
Once the process is complete, you’ll get the message like above! The installation will create a root folder “react-src”, which holds all the un-compiled code.
But our theme isn’t ready yet. If you look inside wp-admin > themes, you’ll see your recently created theme under the “Broken Themes” section.
To be a valid theme, we need a styles.css file. There are also other necessary files like index.php to hold the js and CSS files together.
Open the terminal and run the following commands:
- cd barebones/react-src
- npm run wpstart
This will resolve the broken issue. Now you can see your theme like this:
Once you click on Activate inside the theme, your theme should be running in the browser. But it shows a message -> “Please restart the Nodejs watcher now…”
To get the theme running in the browser, click “Ctrl+c” in the git bash and re-run the command: npm run wpstart. Once it’s done, it should be like this:
File Structure
As mentioned previously, react-src contains the uncompiled and “editable” version of code. But all other folders are “non-editable”. Take note of that text file !DO_NOT_EDIT_THESE_FILES!.txt.
Each of the files here is not so familiar. Because, In the regular WP theme, there would be all PHP and CSS files. To get the build files for the theme, use the command given below:
- npm run wpbuild
After building the theme, there you can see the build folder and all files outside the “react-src” folder will be gone automatically.
All this file structure is what we use in the react. Here, only the “public” folder is a non-react folder.
Now, you can use WordPress Rest API and connect it to the static react application. But it’s not possible to create a whole react-based WP theme using this method.
- Using a React-powered framework “Frontity”
Frontity is a react framework for WordPress which creates a template for WP React Theme. It helps you to create templates. It covers all the WordPress site’s APIs and builds the entire front end in React with all the powerful tools that you expect from that type of environment.
Follow the given commands to create a new frontity project:
- npx frontity create my-first-project
Select the starter theme to clone: @frontity/mars-theme (recommended from frontity official site)
You will see the structure like this:
my-first-frontity-project/
-> node_modules/
-> package.json
-> frontity.settings.js
-> favicon.ico
-> packages/
-> mars-theme/
To run the project locally, follow the given commands,
- cd my-first-project
- npx frontity dev
A development server will be started on http://localhost:3000 also for any changes inside the packages directory.
You can easily build the project using code “npx frontity build”. Frontity enables you to easily build a React-based frontend for your WordPress Theme. Your 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 as a SPA which you can configure and style to your liking.
Data Fetch Method through API
Showing in the command below, you can add fetch to a method inside your React class component:
- fetchPostData() { fetch(`http://localhost/yoursitename/wp-json/wp/v2/posts?per_page=100`) .then(response => response.json()) .then(myJSON => { // Logic goes here});}
Most users want to run this function sooner after the React component has mounted, and we can specify this using the componentDidMount() method:
- componentDidMount() { this.fetchPostData();}
There are hooks and methods available to fetch posts, page data. As well as we can manage the pagination for the posts.
So, if you are eager to code in react, you can make it with the casual and easy PHP backend available in WordPress.
