To create a Quiz with React, we need to configure our scripts that will compile modern JavaScript (ESNext) and JSX. We could go into and construct everything on our own or we can use tools that already exist. In this tutorial, we will see how to use the react-wp-scripts by Human Made.

If you would like to learn how to set up your own configuration that could compile modern JavaScript, you can read Configuring Webpack in WordPress for the First Time.

Human Made, a well-known WordPress Development Agency, created a tool for using React in your WordPress Plugins or Themes. It is essentially, a wrapper of the react-scripts tool and you can find it here.

Installing react-wp-scripts

To install this tool in our plugin, we need to have npx installed. Be sure you have your nodejs version updated if you can’t use npx.

To use it, we need to go into our plugins folder wp-quiz-tut through the terminal (command line) and then type:

npx create-react-app --scripts-version react-wp-scripts --php-namespace="WPQR" inc/react-wp

By adding --php-namespace="WPQR" we will set the PHP namespace of the tool so we can use it without worrying about breaking the site due to multiple usages of this tool. With inc/react-wp we are defining the location of the tool.

If you get an error saying that the directory does not exist, just create an empty folder react-wp inside the folder inc.

Integrating with our Plugin

Now that the tool is installed, we need to integrate it with our plugin. Since our Quiz plugin will be done through a shortcode, we need to register a shortcode first.

Adding our Shortcode

This will be the simplest shortcode you’ve ever seen probably. Open our main file wp-quiz-tut.php and inside the load method add this:

We have now registered our shortcode wpqr, but we still need to define the output of it. Let’s create the method shortcode:

Can’t be simpler than that, right? We are only outputting the container of our Quiz because we will use React to put the rest of it inside the element #wpqr.

Enqueueing react-wp-scripts

Now, we need to enqueue the scripts from the tool React WP Scripts. We will now hook our enqueue method inside our load method:

And our enqueue method will be responsible to load the tool.

Open a post or a page and add our shortcode there. For now, you won’t see anything.

Loading our App inside the shortcode

Open the file index.js inside inc/react-wp/src and we will just change the container of our App.

Also, to compile your JavaScript, we would need to position ourselves, with terminal (command line), to the folder inc/react-wp and then run npm start. This is something that we will use in the next tutorial to compile our new JavaScript code.

Try opening the page with our shortcode now and you should see something similar to this.

Conclusion

React WP Scripts Tool is a great tool to start using React inside of your plugins or themes. With just a few modifications, you can start writing React within minutes.

In the next tutorial, we will start writing our React Quiz app.

Posted by Igor Benic

Web Developer who mainly uses WordPress for projects. Working on various project through Codeable & Toptal. Author of several ebooks at https://leanpub.com/u/igorbenic.

Leave a reply

Your email address will not be published. Required fields are marked *