CODEWITHSUNDEEP
javascriptreactjswordpresscreate-react-app
RustyJames
RustyJames

Reputation: 133

How do I render React on Wordpress page?

Im trying to get a React app to render as a part of a Wordpress page.

I created my app using create-react-app and added

"homepage": "."

to package.json before building.

At first I tried out the functionality by embeddning the necerssary core-files in a standard html document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<div id="wp-root"></div>

<script src="runtime-main.363857b3.js"></script>
<script src="main.ef284662.chunk.js"></script>
<script src="2.319ef205.chunk.js"></script>

</body>
</html>

And sure enough it worked!

When approaching Wordpress I enqued the script-files in functions.php.

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/test.js', true);
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/2.319ef205.chunk.js', true);
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/main.ef284662.chunk.js', true);
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/runtime-main.363857b3.js', true);

I also enqued a simple test script alert("test") in the same folder to make sure it was responding.

My test script fired on every page as expected, so I went ahead by including my <div id="wp-root"> on a page, and for science in the header.php just under the body-tag

My test script works and my React build works in the index.html test.

Why won't Wordpress render it?

create-react-app: 3.4.1
wordpress: 5.5.3
theme: Blankslate

Upvotes: 1

Views: 1094

Answers (1)

RustyJames
RustyJames

Reputation: 133

This worked!

If I load the scripts from a remote host direcly in to the footer.php just before </header> it works prefectly!

<?php wp_footer(); ?>
<script src="http://localhost/react_app/build/static/js/runtime-main.363857b3.js"></script>
<script src="http://localhost/react_app/build/static/js/main.ef284662.chunk.js"></script>
<script src="http://localhost/react_app/build/static/js/2.319ef205.chunk.js"></script>
</body>

I also tried importing the React CDN successfully, but that didn't solve the issue.

This might be an issue with the way wp_enqeue_scripts works. In this case it just ignored all the scripts exept test.js

Upvotes: 1

Related Questions