March 16th, 2019
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.
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.
We are supposed to use JSX, Webpack, and Babel to create a WP Plugin with React. So let’s explore each of them:
const element = <h1>Hello World!</h1>
There are 3 files required to build a wordpress plugin with react:
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.
Install node JS in the system. Click here to download Node JS.
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.
This will create a setting page in the WordPress backend called “React Page” and there will be a welcome message, “This is ‘root’ div”.
Download 3 required files from Github and put these files in the root of your plugin directory.
Please do not worry about creating these if you have already downloaded/cloned the Git repo to your plugin’s root in Step 3.
Open command line interface (CMD) on the root of your plugin and execute the following command.
This will install required libraries and modules and automatically creates pakcage-lock.json file and node_modules folder on the root of plugin.
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.
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:
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 email@example.com.
Like this article? Follow @CipherBright on Twitter