React in WordPress: Complete Integration Guide

Last updated: 20 June 2026

When you’re working with WordPress, you might want to bring in modern front-end development practices like React. This tutorial shows how to use React with WordPress. It starts with setting up Local by Flywheel and ends with turning an HTML template into React components for WordPress. Whether you are a developer or a business owner, this guide shows you how to use React with WordPress. It gives clear steps for each part.

Setting Up Your Local Environment

Before we jump into React integration, I want to show you how I set up my local development environment. I’m using Local by Flywheel to run WordPress locally, which is a great tool for developers who want to test changes without affecting a live site. I already have WordPress installed and running on a local domain, which I can access through http://word.local.

For example, I opened Local by Flywheel and created a new WordPress site. I named it ‘word.local’ and set it up to run on my local computer. This way, I could test changes without affecting a live site.

Once I’m in the WordPress admin, I navigate to the Themes section and activate the Twenty Twenty-Four theme. This theme is what I’ll be using to demonstrate how React components are rendered. I also open up my text editor to start working on the project files.

When I look at the directory structure, I can see the standard WordPress theme files like index.php, header.php, and footer.php, along with a style.css file that defines the theme. I also see a src folder which contains React-related files including a build folder, scripts, and styles directories. There’s also a package.json file that has the necessary scripts defined for running React development.

The key thing to remember is that WordPress themes are structured around PHP files, and React components need to be rendered into a specific part of the WordPress page. I’ll be using the index.php file as the main entry point for React, and I’ll make sure that React knows where to render the components by matching the ID in the PHP file with the ID in the React code.

Installing React in WordPress

Once the installation is complete, I check the package.json file to make sure the scripts are properly defined. I see that there are two main commands: npm run start and npm run build. These are the commands I’ll use to start the development server and build the React application.

{
  "scripts": {
    "start": "wp-scripts start",
    "build": "wp-scripts build"
  }
}

This is how I ensure that the React application stays in sync with the WordPress site.

To get React working in WordPress, I need to install the @wordpress/scripts package. This package is what makes it possible to use React within WordPress. I run the following command in my terminal:

style={{ marginTop: '100px' }}

Instead of using class attributes, I use className and I make sure that all HTML tags are properly closed. For example, <img> tags must be self-closing in React, so I write them as <img src="image.jpg" alt="Image" />.

I also need to handle input tags and other self-closing elements correctly. I check for any unclosed tags and make sure they are properly formatted. For instance, I have to make sure that <input> tags are closed properly, and that <br> tags are self-closing.

Once I have the navigation component working, I continue with the rest of the template. I create another component called page-content.js to hold the main content of the page. I copy the HTML content and convert it to React format, again making sure to change all class attributes to className.

I also need to handle image tags carefully. Since I’m working in a WordPress environment, I can’t just use relative paths to images. I have to upload images through the WordPress admin and then get their URLs. I go to the Media section in the WordPress dashboard, upload an image, and then copy the URL. I paste this URL into the React component where the image should appear.

For example, if I have an image tag in the HTML like this:

<img src="newyork.jpg" alt="New York" />

I update it in the React component like this:

<img src="http://word.local/wp-content/uploads/2023/04/newyork.jpg" alt="New York" />

This ensures that the image loads correctly in the WordPress environment. I also need to make sure that the styles are applied correctly. I check for any errors in the browser console and correct them by adjusting the styles in React.

Finally, I make sure to include the components in the main component file. I import the navigation and page content components and then render them inside the main component. This is how I tie everything together to create a complete React application within WordPress.

Pro Tip: When working with templates this size, I keep a find-and-replace window open. It saves me from missing class attributes and helps me convert HTML to React faster.

By following these steps, I’ve successfully integrated React components into a WordPress theme. I’ve shown how to set up the local environment, install React, and convert an HTML template into React components that work within WordPress. This approach gives you the flexibility to build modern, dynamic interfaces while still leveraging the power of WordPress for content management.

For more detailed information on WordPress theme development, check out our guide on WordPress Theme Development from Scratch. If you’re interested in how to use React with WordPress in more advanced ways, you can also explore our tutorial on Laravel + React.js Project Tutorial.

Integrating React with WordPress

Now I’ll show you how to integrate the React components with WordPress. I open the `index.php` file in my project and I see that it includes `get_header()` and `get_footer()`. These are standard WordPress functions that load the header and footer of the site. I also see that there is a loop that displays posts in the middle of the page. This is the standard WordPress way of displaying content.

I need to make sure that my React app is rendering inside this structure. I see that I have a div with the ID `render-react`. This is where React will inject the components. I also see that I have a `container` div that wraps the content. This is important because it sets the width and margin for the content.

I go to the `src/index.js` file, which is the entry point for the React app. In this file, I see that React is rendering the main component into the div with the ID `render-react`. This is how the React app connects to the WordPress site. I also see that I have a `main-component.js` file inside the `src/scripts` directory. This is where I’ll be putting the main logic for my React app.

I go to the `src/scripts/main-component.js` file and I start to build the React component. I import the `Navigation` component from the `components` directory. I also import the `PageContent` component. I make sure that I have the correct paths for the components. I also make sure that I have the correct syntax for importing the components. I also make sure that I have the correct syntax for rendering the components in the main component.

I go back to the `src/scripts/main-component.js` file and I render the `Navigation` component. I also render the `PageContent` component. I make sure that I have the correct syntax for rendering the components. I also make sure that I have the correct paths for the components. I also make sure that I have the correct syntax for importing the components.

I go back to the browser and refresh the page. The navigation and page content show up. I check that the styles work correctly. I also see the page content rendered. I make sure that the styles are working correctly. I also make sure that the components are rendering in the correct order. I also make sure that the components are not conflicting with each other.

I also need to make sure that I handle the WordPress loop correctly. I go to the `index.php` file and I see that there is a loop that displays posts in the middle of the page. I want to make sure that I can hide this loop if I don’t want to display posts. I comment out the loop in the `index.php` file. I also make sure that I have the correct syntax for commenting out the loop.

I go back to the browser and I refresh the page. I see that the posts are now hidden. I also see that my React components are still rendered correctly. I also make sure that the styles are working correctly. I also make sure that the components are rendering in the correct order. I also make sure that the components are not conflicting with each other.

I also need to check the component paths. I open src/components/navigation.js and make sure the syntax is correct. I go to the `src/components/navigation.js` file and I make sure that I have the correct syntax for the

Adding the Page Content Component

I’m going to show you how to add the rest of the page content to your React component. I started by copying the HTML structure from W3 Schools, which you can see in the template. The first thing I did was create a new component file called page-content.js inside the components directory. I then copied all the HTML content from the template and pasted it into this file. You’ll notice that I had to make a few changes to get it working in React. The biggest change was converting all the class attributes to className — I had to do this about 78 times in this template. I also had to close all the self-closing tags like <img />, <input />, and <br />. These were causing errors in the React component. I also had to remove all the HTML comments that were in the original template. These comments are not valid in JSX and would break your component. After making all these changes, I imported the component in main-component.js and added it to the render function. I placed it right after the navigation component so it would appear below the navigation bar.

Pro Tip: When working with templates this size, I keep a find-and-replace window open. It saves me from missing class attributes.

Handling Styles and Images in React

For images to work properly, you need to upload them through the WordPress admin and then use their URLs in your React component. I uploaded the images in the media library and copied the URLs to use in my code.

For example, I uploaded a photo of New York through the WordPress media library. I copied the URL and used it in my React component. This made sure the image loaded correctly in the WordPress site.

This was the quickest way to get the images working in the template.

Now we need to handle the styles and images properly in React. The original template had styles in the head section, but in React we need to apply them differently. I had to convert all the inline styles to React style objects. For example, instead of using style="margin-top: 46px", I used style={{marginTop: '46px'}}. I also had to change the max-width property from max-width: 2000px to maxWidth: '2000px'. The camelCase naming is required in React. For images, I had to make sure all the <img> tags were properly closed. I also had to update the image paths to use the WordPress media library. I uploaded the images through the WordPress admin and then copied their URLs to use in the React component. This was the quickest way to get the images working in the template. I also had to remove the container div that was wrapping everything in the index.php file to make sure the navigation would display correctly. The container div was setting a fixed width and margin that was interfering with the layout.

Pro Tip: If you’re dealing with many images, consider using WordPress’s built-in media library functions to dynamically fetch image URLs instead of hardcoding them.

Final Integration and Testing

After setting up all the components, I tested them together. I ran npm run start to start the development server. I ran the command npm run start to start the development server. Then I refreshed the browser to see if all components were rendering correctly. I noticed that the navigation bar was appearing in the middle of the page, so I had to adjust the styling. I added some margin to the top of the navigation component to push it down. I also had to remove the WordPress loop that was displaying posts in the index.php file to avoid conflicts with my React component. I commented out the post loop in index.php to ensure my React app would be the main content. This was important because I wanted to make sure that the WordPress site would display only my React application. I also removed any unused imports and state variables from the main component to improve performance. The final result was a fully functional single-page application embedded within WordPress. The navigation bar and page content were both displaying correctly, and the styling matched the original template.

Pro Tip: Always test your React components in isolation first before integrating them into WordPress. This helps identify issues early in the development process.

Conclusion

This tutorial showed you how to convert an HTML template into a React component and integrate it into WordPress. The key steps involved setting up the React development environment with WordPress scripts, creating separate components for navigation and page content, and properly handling styles and images. I demonstrated how to convert HTML classes to React’s className, close all self-closing tags, and convert CSS properties to React style objects. The most important part was ensuring that your React app renders correctly within WordPress by properly configuring the index.php file and removing conflicting WordPress loops. You learned how to handle image assets by uploading them through WordPress and using their URLs in your React components.

Need help with this for your Melbourne business? CloudyWP specialises in WordPress development and web development services — get in touch.