How to develop WordPress Plugin with React?

How to develop WordPress Plugin with React?

March 16th, 2019

One of the most powerful modern JavaScripts is React. WordPress has also adopted React in its core and released on December 6th, 2018. That was one of the major releases in the History of WordPress. It was a version 5.0 called “Bebo”.

Latest technologies are growing as fast as the light! Every day when we wake up, we hear about something new in the tech industry. Every day, new terms, new names, new phrases are being released and heard. In this case, this is impossible to learn everything.

“We cannot eat all our favorite dishes at once”

But, if look at the other side of the coin, it seems, most of us are not even trying to eat even a single piece from this big dining table of internet. Not learning anything or not having an interest to learn something new is pushing them behind every day.

So let’s don’t be one of them and learn React! Following are some details on how to build a WordPress plugin with React and print a simple “Hello World” test in the backend of WordPress.

Important Terms

We are supposed to use JSX, Webpack, and Babel to create a WP Plugin with React. So let’s explore each of them:

JSX

1*G6rj2IevhkL3hxDWdFX9cg

JSX = JavaScript + XML

Using JSX, we are able to write HTML code (without quotes) direct into the JavaScript files!

Example,

const element = <h1>Hello World!</h1>

Babel

1200px-Babel Logo.svg

Babel is a compiler which compiles and converts the JSX code into a Vanilla JavaScript, so that browsers can understand the JS code.

Webpack

webpack

Webpack is a module bundler. It bundles (wraps) Javascript files and makes it usable for the browsers.

Required files to build a WP Plugin with React

There are 3 files required to build a wordpress plugin with react:

  1. package.json
  2. webpack.config.js
  3. .bablerc

These files should be created manually and put on the root of the plugin.

You can download these 3 files from the Github. Click here to visit page.

Objective of Practical - Print “Hello World” with React in WP Backend

wpreactobjective

Steps

Step 1 - Install Node in the system

Install node JS in the system. Click here to download Node JS.

installnode

Step 2 - Create a Setting Page

Creating a setting page in WordPress is very easy. We just have to put the following code in the funtions.php file or in the main PHP file of our plugin.

This code is also available on the GitHub. Click here to see.

wpsetting

settingcallback

This will create a setting page in the WordPress backend called “React Page” and there will be a welcome message, “This is ‘root’ div”.

Step 3 - Download required files

Download 3 required files from Github and put these files in the root of your plugin directory.

Step 4 - Create component files

We have to create a main component file, index.jsx in the src folder. Other required components should be created in the components folder.

Please do not worry about creating these if you have already downloaded/cloned the Git repo to your plugin’s root in Step 3.

Step 5 - Execute Install Command

Open command line interface (CMD) on the root of your plugin and execute the following command.

~npm install

This will install required libraries and modules and automatically creates pakcage-lock.json file and node_modules folder on the root of plugin.

Step 6 - Execute Run/Watch Command

Execute the following command in CMD.

~npm run dev

Executing this command will automatically generate a bundle.js file in the dist folder and a WATCH over the React App will be started so that if you change anything in the index.jsx or any other components’ of index.jsx, the bundle.js file will be updated automatically.

Objective accomplished!

Now we will be able to see the Hello World printed in the WordPress backend using your WordPress Plugin and React. You will see following output in the backend:

wpreactobjective

Click here to see the PPT prepared by Faisal Alvi which contains step by step explanation of this practice.

If you have any questions, please send your queries on faisal@cipherbright.com.

Like this article? Follow @CipherBright on Twitter