As a web developer, you probably have some basic knowledge of React and how to build web applications with it. What you may be missing, however, is the knowledge of how to integrate React with WordPress.
While there are many great tutorials out there on how to use React on the editor screen for creating a Gutenberg block type, there isn’t really an official “WordPress” way of using React on the frontend.
In this article, we are going to show you the official WordPress package from npm, how, with zero configuration, we can get it up and running, and how we can use React for both the editor screen and the face of our WordPress website.
We will also look at how React can be integrated into WordPress when creating a WordPress theme or a WordPress plugin, and we’ll show how to create boilerplate version of each.
While You Are at It, Learn More About React Dynamic Imports and How To Use Them
Prerequisites
- Code editor
- XAMPP is installed on your device
What Is Boilerplate?
In its original definition, boilerplate is a term used to describe:
standardized text, copy, documents, methods, or procedures that may be used over again without making major changes to the original.
Investopedia
The term is also used in web development (and programming as a whole), and is applied to reusable programming, i.e. “boilerplate code”.
More specifically, the terms “boilerplate” or “boilerplate code” refer to sections of code (collections & snippets) that can be reused to accelerate the development process.
Good developers take this idea further and create generic templates that can be modified and shared with others.
In our article, we will be focusing on WordPress boilerplate code for themes and plugins, using React.
Official WordPress Package
Now, before we start getting into WordPress, we just quickly want to show you, in an empty folder that is not connected to a WordPress installation, how easy it is with zero configuration to get things up and running, and how we can connect it to WordPress.
Installing the Package
The first thing you need to do is to go into your terminal and type in the command npm init -y. Once you do this, you will automatically have a package.json file as shown below:
Now that we have the package.json file, the next thing we need to do is install the official WordPress package. To do this, clear your terminal and run the command below:
npm install @wordpress/scriptsOnce the installation is complete, you should be able to see something like this below:
and that is it! Your WordPress package has been installed.
Setting Up React
To set up our React, we will first create a new folder called src as shown below:
Then inside the src folder, create a file named index.js and include the following code:
import "./main.scss"
import React from 'react'
import ReactDOM from 'react-dom'
import TestComponent from './TestComponent'
ReactDOM.render(<TestComponent />, document.querySelector("#app"))By default, the WordPress package knows how to look inside the src folder for the index.js file. So, we do not need to write any configuration that points towards the index.js file.
Another cool thing about this package is that we don’t even have to run npm i react. WordPress will automatically load React on its side and even treat React as an external in webpack, i.e it will look in the browser’s global scope for React.
Let’s assume we have a React component and we do not want it in the main JavaScript file, we can just create a new file in our src folder, and we can name it TestComponent.js and paste in the following code:
import React from "react"
function TestComponent() {
return (
<div className="test">
<h1>Hello</h1>
<p>Hello hello</p>
</div>
)
}
export default TestComponentThis is just a simple boilerplate where we just have a div and a paragraph, and then we are exporting it.
Another thing we want to show you is sass CSS. To use this, go to your src folder and create a file named main.scss and add in the following code:
div {
p{
padding: 10px;
}
}Here, we have a selector and a nested selector.
We are now ready to have the package bundle and export the code. To do this, you have to open up the package.json file, go to the scripts area. and edit it as seen below.
Once you are done doing this, save it, go to your terminal, and run the command below:
npm run startYour terminal should look like this after:
You will also automatically see a build folder like the one below:
You will see that in the build folder, it automatically splits out our CSS. If you click on the index.css, you will also see that it figured that our nested CSS code should be bundled up into regular CSS to look like this:
div p {
padding: 10px;
}and that is it!
Now that you know the basics of how this works, let’s dive into how we can use this with WordPress when creating a theme or plugin, and how we can integrate this into WordPress.
From this point forward, it’s just a lot of boring, loading certain files from certain directories, so, in order for us to save some time, a GitHub repo was created for the purpose of this article.
What it does is it uses that same official WordPress script package that we just covered, but it already contains the boilerplate skeleton or files and folder structure for our theme and our plugin.
All you need to do is clone the repo or download the zip file. It contains one folder for the theme and one folder for a Gutenberg block-type plugin.
XAMPP and WordPress on XAMPP Installation
For this article, we will be using XAMPP for our local WordPress dev installation, but you can use other tools of your choice for your local WordPress dev installation. If you haven’t installed XAMPP on your device, and you do not know how to do it, you should follow this tutorial for Windows OS, and this tutorial for Ubuntu OS.
Now for the WordPress installation on XAMPP, the first thing you need to do is go to Bitnani site, scroll down, and you will see something like this.
Click on your preferred OS (in our case, Linux) to download the file for WordPress. Next, go to your downloads, right-click on the downloaded WordPress file, and then click on “Allow executing file as program” as shown below.
Next, go into your terminal and open up XAMPP. Go to manage servers and click “Start all” to start all the servers. It should be like this.
Go to the welcome page, click on “open application folder” navigate to the temp folder, and then copy and paste the downloaded Bitnani WordPress file into the temp folder. Next, go into your terminal and run the following command.
cd /opt/lampp/temp
ls
sudo ./bitnami-wordpress-5.9.3-1-module-linux-x64-installer.runUse your own downloaded WordPress package name when running the sudo command. You should be able to see something like this after running the above command.
Then you will see a prompt to set up your WordPress account. Follow the prompts and click on “Next” until you are done installing.
Once you are done installing, go to your preferred browser and type in localhost/wordpress to access the face of our website, which should look like this.
To access the WordPress dashboard or editor screen, open up another browser and type localhost/wordpress/wp-admin, then you should see this.
and that’s it! We now have access to our local WordPress dev installation.
Boilerplate Theme
Now to be able to use the Boilerplate theme, first, you have to go to the “open application folder “ on your XAMPP welcome page, then go to the Apps folder, then the WordPress folder, and navigate to the wp-content folder, and finally click on themes. Then copy and paste the boilerplate-theme folder from the downloaded GitHub zip or cloned repo. It should be like this:
Next, head back to your admin dashboard, go to appearance, click on themes, and then click on activate the boilerplate theme.
Once you have activated it, go back to your WordPress site and you will automatically see this:
Each time you click on the “You have clicked on this component 0” counter, it increases as shown below:
You can now open the Boilerplate theme folder on your code editor and make your preferred changes.
Boilerplate Plugin
For our Boilerplate plugin, follow the steps above and copy and paste the boilerplate block plugin into our WordPress plugin folder. Then navigate back into our admin dashboard and click on “Plugins”. You will see the Plugin, then click on activate.
Let’s assume we want to write a blog post. We can click on “Posts”. Then click on the plus sign on the top left corner of your screen. Scroll down and you will see our Plugin Boilerplate called Brad’s Boilerplate Block. Click on it and you should see something like this:
Here we input Blue for the sky color and Green for the grass color. Let’s go back to our Website and we should be able to see this:
You can click on any of the “Toggle” commands to reveal or hide the colors.
So, that’s basically it! We have looked at how React can be integrated into WordPress with little to no configuration. While the example may not be very impressive, you can use these building blocks of taking dynamic data and use it on client-side JavaScript. You can use the examples and build anything you want.
Conclusion
In this article, we looked at how we can use XAMPP for our local WordPress Dev installation and how React can be integrated into WordPress with React Boilerplates.
