A Beginner’s Guide to Integrating React with WordPress

Introduction

React is a JavaScript library that provides a simple yet powerful way to create user interfaces that are interactive, fast and scalable. WordPress, on the other hand, is a popular content management system that powers over 40% of websites on the internet.

Are you interested in building a website with WordPress and want to add some React components to your site? Well, you’ve come to the right place! In this article, we will show you how to integrate React with WordPress in a step-by-step approach.

Prerequisites

Before we dive into the tutorial, you should have some prior knowledge of React and WordPress. You will also need the following tools installed on your computer:

• Node.js and npm
• A local WordPress installation (we recommend using a development environment like Local by Flywheel)

Once you have these tools set up, we can begin with the integration process.

Step 1: Create a React App

The first step is to create a React app. Open your terminal and navigate to the directory where you want to create your app. Run the following command to create a new React app:

npx create-react-app my-react-app

This command will create a new React app with the name ‘my-react-app’ in your current directory. Once the app is created, navigate to its directory using the ‘cd’ command:

cd my-react-app

Step 2: Install React Libraries

To use React with WordPress, we need to install the following libraries:

• ReactDOM: This library provides integration between React and the DOM.
• React Router: This library is used to handle routing in a React application.

Run the following command to install the required libraries:

npm install --save react-router react-router-dom react-dom

Step 3: Build the React App

Now that we have installed the React libraries, it’s time to build our React app. Run the following command to build the app:

npm run build

This command will create a new ‘build’ directory in your React app, which will contain all the necessary files for your app to run in the browser.

Step 4: Create a WordPress Theme

To integrate the React app with WordPress, we need to create a custom theme. In your WordPress installation directory, navigate to the ‘wp-content/themes’ directory. Create a new folder with the name of your theme, for example, ‘my-theme’.

Inside the ‘my-theme’ folder, create a new file called ‘index.php’. This file will be the starting point of your theme. Open the ‘index.php’ file in a text editor and add the following code:

<?php
/**
 * Front Page
 *
 * @package My_Theme
 */

get_header();

?>

<!-- React root -->
<div id="root"></div>

<?php get_footer(); ?>

This code includes the WordPress header and footer, and a div element with the ID ‘root’, where we will render our React app.

Step 5: Add React to WordPress Theme

Now that we have created a custom theme, it’s time to add the React app to it. Copy the ‘build’ directory from your React app and paste it inside the ‘my-theme’ folder in your WordPress installation.

Next, create a new file called ‘functions.php’ inside the ‘my-theme’ folder. This file will be used to enqueue the necessary JavaScript files for our React app. Add the following code to the ‘functions.php’ file:

<?php
/**
 * Functions
 *
 * @package My_Theme
 */

function my_theme_enqueue_assets() {
   wp_enqueue_script(
      'my-theme-react',
      get_template_directory_uri() . '/build/static/js/main.chunk.js'
   );
   wp_enqueue_script(
      'my-theme-react-vendor',
      get_template_directory_uri() . '/build/static/js/2.chunk.js'
   );
   wp_enqueue_script(
      'my-theme-react-runtime',
      get_template_directory_uri() . '/build/static/js/runtime-main.js'
   );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );

This code enqueues the main JavaScript file of your React app and its dependencies.

Step 6: Render React App

The final step is to render the React app inside the ‘root’ div element in your ‘index.php’ file. Add the following code just above the closing ‘body’ tag:

<?php
/**
 * Front Page
 *
 * @package My_Theme
 */

get_header();

?>

<!-- React root -->
<div id="root"></div>

<!-- Render React app -->
<script>
   ReactDOM.render(
      <BrowserRouter>
         <App />
      </BrowserRouter>,
      document.getElementById('root')
   );
</script>

<?php get_footer(); ?>

This code uses the ReactDOM library to render the React app inside the ‘root’ div element. The ‘BrowserRouter’ component from React Router is used to handle routing in the app.

Conclusion

In this tutorial, we have shown you how to integrate React with WordPress. You should now have a basic understanding of how to create a custom theme and render a React app inside it.

This is just a starting point, and you can customize your theme and React app further based on your project requirements. With React, you can create highly interactive and dynamic web pages that will enhance the user experience of your WordPress site. Happy coding!