Free tools Windows power users keep installed
One-click scans. No signup required.
The dependable way to embed an existing React application in WordPress is to let WordPress render a controlled mount element, then enqueue the React production bundle and stylesheet through WordPress’s asset APIs. React mounts into that element; it does not replace the page unless you deliberately choose a headless architecture. For data, the React code can call WordPress REST API endpoints such as /wp-json/wp/v2/posts, while authenticated writes require WordPress authentication, nonces, server-side validation, and authorization.
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
This approach keeps the theme, menus, editor workflow, and SEO templates under WordPress control while limiting React to the part of the page that needs it.
As an Amazon Associate I earn from qualifying purchases.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Choose the right embedding architecture first
“Embedding React in WordPress” can describe three different designs. Decide where the document, routing, data, and deployment should live before writing code.
| Architecture | Best when | Main trade-off | What WordPress owns | What React owns |
|---|---|---|---|---|
| Theme or plugin React island | WordPress should render the page and editors should place the app on selected pages | Assets and CSS must coexist safely with the active theme | Document shell, navigation, editor workflow, SEO templates, and page routing | The interactive feature inside one mount element |
| Headless React frontend | React should own nearly all routing and presentation, with WordPress used as a content backend | Adds hosting, preview, authentication, CORS, caching, and deployment coordination | Content management and API responses | The complete page application, routing, and usually the document output |
| Iframe or external embed | The app is a separately maintained product and isolation matters more than integration | Weak integration with WordPress navigation, styling, accessibility, analytics, and shared state | The containing page | The isolated document inside the frame |
For most existing WordPress sites, start with a React island. It gives editors a normal page while avoiding a second frontend deployment. Choose headless only when React must control the whole user experience, and use an iframe only when deliberate isolation outweighs the integration limitations.
What you need before implementation
- A working React project that can produce a production build containing JavaScript and CSS files.
- Access to a WordPress theme or plugin where PHP can render markup and enqueue assets.
- A clear location for the compiled files: a plugin directory, a theme directory, or an approved asset host.
- A decision about placement: a shortcode or block for editor-selected pages, a template for a fixed location, or an admin screen for dashboard-only functionality.
- A data plan: public REST endpoints, a custom REST route, or authenticated requests for private operations.
Do not copy a development server URL into production PHP. WordPress should reference the files generated by the production build.
Step 1: Define the WordPress–React boundary
React island boundary
Keep the WordPress page in charge of the document and expose one specific element for React:
<div id='my-react-app' class='my-react-app-root'></div>React should render inside that element rather than replacing body or the entire document. This preserves the theme’s header, menus, footer, metadata, and editor output.
Headless boundary
In a headless build, React renders the page and WordPress serves content through its REST API. That is a separate deployment model, not merely a different enqueue call. Plan preview behavior, authentication, CORS, caching, and how WordPress URLs map to React routes before committing to it.
Placement boundary
If editors need to choose which pages contain the application, a shortcode or block is preferable. If every page of a specific template needs it, render the mount point from that template. Avoid adding an empty mount element site-wide unless the application genuinely belongs on every page.
Step 2: Build the React application for production
Run the production build command defined by your React project. The output should contain the final JavaScript bundle and any generated stylesheet or chunk files. Copy those files into a stable directory inside the plugin or theme, preserving the relative paths expected by the build.
Before integrating, inspect the build output for these conditions:
Rank #2
- The entry JavaScript file exists at the path your PHP code will enqueue.
- Any CSS file generated by the build is present and has the expected relative location.
- Code-split chunks, images, and fonts use URLs that remain valid when served from the production WordPress URL.
- The build does not depend on a development server, localhost address, or development-only environment variable.
If the build emits hashed filenames, either update the enqueue code whenever the filename changes or generate an asset manifest that PHP can read. A fixed filename is simpler for a small plugin, while a manifest avoids stale references in larger deployments.
Step 3: Render a mount point from WordPress
Shortcode placement
A shortcode lets an editor place the app in post or page content. The callback should return only the controlled mount element and any data attributes the React entry point needs.
<?php
function my_react_app_shortcode( $atts = array() ) {
$atts = shortcode_atts(
array(
'view' => 'default',
),
$atts,
'my_react_app'
);
return sprintf(
'<div id="my-react-app" class="my-react-app-root" data-view="%s"></div>',
esc_attr( $atts['view'] )
);
}
add_shortcode( 'my_react_app', 'my_react_app_shortcode' );An editor can then insert [my_react_app] or pass a controlled value such as [my_react_app view='scores']. Escape every value that crosses from shortcode attributes into HTML.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Template or block rendering
For a fixed template location, put the same mount element in the page template. A dynamic block render callback is useful when the block needs server-side attributes or editor controls. In either case, keep the ID or data attributes stable so the React entry code can find the intended element.
Step 4: Enqueue the JavaScript and CSS correctly
Use WordPress’s wp_enqueue_script() function rather than inserting a raw <script> tag. It handles the script handle, source URL, dependencies, version, and loading arguments. Front-end files belong on the wp_enqueue_scripts hook; dashboard files belong on admin_enqueue_scripts.
Plugin example
<?php
function my_react_app_enqueue_assets() {
if ( ! is_page( 'interactive-tools' ) ) {
return;
}
$version = '1.0.0';
$base_url = plugin_dir_url( __FILE__ ) . 'dist/';
wp_enqueue_style(
'my-react-app',
$base_url . 'index.css',
array(),
$version
);
wp_enqueue_script(
'my-react-app',
$base_url . 'index.js',
array(),
$version,
array(
'in_footer' => true,
'strategy' => 'defer',
)
);
}
add_action( 'wp_enqueue_scripts', 'my_react_app_enqueue_assets' );Replace the conditional with the real condition used by your mount point. A shortcode can set a flag while it renders, or a block/template condition can determine whether the assets are needed. The important result is that the bundle is not downloaded on unrelated pages.
Theme example
In a theme, use the theme URL helper instead of a hardcoded domain:
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Rank #3
<?php
function my_theme_react_assets() {
if ( ! is_page_template( 'page-interactive.php' ) ) {
return;
}
wp_enqueue_style(
'theme-react-app',
get_template_directory_uri() . '/dist/index.css',
array(),
'1.0.0'
);
wp_enqueue_script(
'theme-react-app',
get_template_directory_uri() . '/dist/index.js',
array(),
'1.0.0',
array(
'in_footer' => true,
'strategy' => 'defer',
)
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_react_assets' );The defer strategy allows the browser to delay execution while respecting dependency order. If your bundle depends on another registered script, list its handle in the dependency array and verify that the resulting order is correct.
Passing the REST URL and a nonce
Do not assume that the site is installed at the web root. Pass the REST base and other configuration from PHP to the enqueued script:
<?php
wp_localize_script(
'my-react-app',
'myReactConfig',
array(
'restUrl' => esc_url_raw( rest_url() ),
'nonce' => wp_create_nonce( 'wp_rest' ),
)
);Place this call after the script has been registered or enqueued. The object becomes available to the React bundle as window.myReactConfig.
Step 5: Keep application CSS from leaking into the theme
Enqueue the generated stylesheet through wp_enqueue_style() and scope selectors below the root class. A rule such as .my-react-app-root button is safer than a global button rule, which could restyle the theme’s menus or forms.
.my-react-app-root {
box-sizing: border-box;
}
.my-react-app-root *,
.my-react-app-root *::before,
.my-react-app-root *::after {
box-sizing: inherit;
}
.my-react-app-root .app-button {
/* application-specific styles */
}Check inherited font, line-height, color, and focus styles from the active theme. Decide deliberately whether the app should inherit them or set its own values. Avoid a global reset unless the application is isolated in an iframe or otherwise owns the entire document.
Step 6: Mount React only when the element exists
The entry file should fail quietly on pages where the mount point is absent. This protects shared bundles and makes accidental placement easier to diagnose.
import { createRoot } from 'react-dom/client';
import App from './App';
import './index.css';
const mount = document.getElementById('my-react-app');
if (mount) {
const root = createRoot(mount);
root.render(<App />);
}If the shortcode can appear more than once, use a class selector and mount each element separately instead of assigning duplicate IDs. Pass each element’s data-* attributes as props so one bundle can support several configured instances.
Step 7: Connect React to WordPress data
Reading public content
The WordPress REST API uses resource-oriented URLs, JSON responses, HTTP methods, and discoverable endpoints. A simple React request can read public posts:
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →async function loadPosts() {
const response = await fetch(
`${window.myReactConfig.restUrl}wp/v2/posts`
);
if (!response.ok) {
throw new Error(`Request failed: ${response.status}`);
}
return response.json();
}Depending on the site configuration, the REST base may include a trailing slash. Build the path consistently rather than concatenating arbitrary user input. Handle loading, empty, error, and retry states in the component; a network failure should not leave a blank area with no explanation.
Custom app-specific routes
When the app needs a purpose-built response, register a custom REST route in WordPress instead of making the browser reconstruct data from unrelated endpoints. Return only the fields the application needs, define the accepted HTTP methods, and set a permission callback appropriate to the operation.
<?php
add_action( 'rest_api_init', function () {
register_rest_route(
'my-app/v1',
'/summary',
array(
'methods' => WP_REST_Server::READABLE,
'callback' => 'my_app_summary',
'permission_callback' => '__return_true',
)
);
} );
function my_app_summary( WP_REST_Request $request ) {
return rest_ensure_response(
array(
'title' => 'Public summary',
)
);
}A public permission callback is appropriate only for genuinely public information. Private data must not be made public merely because a browser component requests it.
Authenticated reads and writes
Treat everything delivered to the browser as visible to the user. Never put database credentials, private API keys, or authorization decisions in the JavaScript bundle.
Recommended Free Tools
For same-origin authenticated REST requests, WordPress commonly uses the logged-in session together with a REST nonce. Send the nonce in the request header and enforce permission checks on the server:
async function saveItem(payload) {
const response = await fetch(
`${window.myReactConfig.restUrl}my-app/v1/item`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-WP-Nonce': window.myReactConfig.nonce,
},
body: JSON.stringify(payload),
}
);
if (!response.ok) {
throw new Error(`Save failed: ${response.status}`);
}
return response.json();
}On the server, validate the shape and values of the request, confirm the current user is allowed to perform the action, sanitize or escape data at the appropriate boundary, and return a useful HTTP error when authorization fails. A nonce helps prove request context; it is not a substitute for capability checks.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Step 8: Load assets conditionally and invalidate caches
Loading the React bundle only where the mount point exists reduces unnecessary downloads and lowers the chance of conflicts. A version string passed to the enqueue functions becomes a cache-busting query value when the asset changes. Update it for every production build, or derive it from the build’s release identifier.
After deployment, purge any page, object, CDN, or browser cache that can retain old HTML pointing to a removed hashed file. Keep old assets available briefly when a rolling deployment could serve old and new HTML at the same time.
Admin-screen React applications
A dashboard tool should not be enqueued on the public front end. Use admin_enqueue_scripts and check the current screen before loading the bundle:
<?php
function my_react_admin_assets( $hook_suffix ) {
if ( 'toplevel_page_my-react-tool' !== $hook_suffix ) {
return;
}
wp_enqueue_style(
'my-react-admin',
plugins_url( 'dist/admin.css', __FILE__ ),
array(),
'1.0.0'
);
wp_enqueue_script(
'my-react-admin',
plugins_url( 'dist/admin.js', __FILE__ ),
array(),
'1.0.0',
array(
'in_footer' => true,
'strategy' => 'defer',
)
);
}
add_action( 'admin_enqueue_scripts', 'my_react_admin_assets' );Use capability checks for the page and its REST operations. Hiding an admin menu item does not protect the underlying endpoint.
When an iframe is the better choice
An iframe can be justified when a separate team deploys the React product, the product must retain its own CSS and JavaScript environment, or the WordPress site should have no access to the app’s internal state. The WordPress page can include a responsive iframe container, but the boundaries are real:
- Theme navigation and React navigation do not automatically share state.
- Parent-page analytics cannot automatically observe every interaction inside the frame.
- Keyboard focus, screen-reader context, sizing, and error messaging need deliberate handling.
- Cross-origin communication requires an explicit messaging design and careful origin validation.
- Branding and responsive behavior can diverge from the surrounding site.
If those costs are unacceptable, use a React island and integrate through WordPress’s normal markup and asset pipeline.
Production testing checklist
- Open the real production URL and confirm the mount element is present in page source or the rendered DOM.
- In browser developer tools, verify that the JavaScript and CSS URLs return the expected files rather than an HTML error page.
- Check the console for module, chunk, MIME-type, and dependency-order errors.
- Test a cold cache and a warm cache after changing the version string.
- Disable JavaScript temporarily and confirm that the surrounding WordPress page still has a sensible fallback or explanation.
- Test keyboard navigation, visible focus, color contrast, reduced-motion preferences, and screen-reader labels inside the app.
- Test the active theme at narrow and wide viewport sizes; look for overflow, inherited styles, and stacking-context problems.
- Exercise REST loading, empty responses, permission failures, validation errors, and a temporary network outage.
- Confirm that authenticated requests fail safely when the session expires and that no private response is rendered for an unauthorized user.
- Verify that unrelated pages do not download the React bundle.
Troubleshooting common failures
| Symptom | Likely cause | Fix |
|---|---|---|
| The page shows an empty mount element | The bundle was not enqueued, the selector does not match, or JavaScript stopped on an earlier error | Inspect the network and console panels, compare the PHP mount ID with the React selector, and confirm the entry file is the production build. |
| Styles affect the whole site | Global selectors or a reset escaped the app boundary | Scope selectors beneath the root class and remove global element rules. |
| The browser reports a missing chunk | Hashed build files were not copied, or cached HTML points to an older release | Deploy the complete build directory, update the enqueue version, and purge relevant caches. |
| REST requests return 404 | The REST base was hardcoded incorrectly, pretty-permalink configuration is incomplete, or the custom route was not registered | Pass rest_url() from PHP, inspect the endpoint path, and confirm route registration during rest_api_init. |
| REST writes return 401 or 403 | The session or nonce is missing, expired, or the server permission callback rejects the user | Send the current nonce, require the appropriate login state, and review capability checks rather than weakening them. |
| The app works in development but not in WordPress | Asset paths, environment variables, or public URL assumptions differ in production | Inspect the generated files and their URLs, then test the production build from the actual WordPress origin. |
| The app loads on every page | The enqueue callback has no conditional guard | Gate the callback by page, template, shortcode flag, block render, or admin screen. |
React island or headless: a practical decision rule
- Choose a React island when WordPress editors, templates, menus, and search-engine-facing markup should remain authoritative.
- Choose headless when React needs application-wide routing and WordPress is intentionally only a content service.
- Choose an iframe when independent deployment and isolation are more important than shared styling, navigation, accessibility, and analytics.
For a first integration, the island path has the smallest operational boundary: production-build the app, render one mount element, enqueue assets on the correct hook, scope CSS, and use REST endpoints for data. Expand to a headless deployment only when the WordPress-rendered document has become a genuine constraint.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
