After creating the React app you want to embed, run:
npm run build
This command generates a build folder with optimized files.

Navigate to the build directory created in the previous step. It contains files like index.html, static/js/main.js, and static/css/main.css.

Copy the contents of the build folder to a designated directory within your existing website project. For example, you might use a directory named embedded-react/.

In the HTML file where you want the React app to appear, include the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="embedded-react/static/css/main.css">
</head>
<body>
  <!-- This is where the React app will be embedded -->
  <div id="react-app"></div>

  <script src="embedded-react/static/js/main.js"></script>
</body>
</html>

Ensure that the paths (embedded-react/static/css/main.css and embedded-react/static/js/main.js) correctly point to where you placed the build files.

If you want the React app to load only when the user triggers an event (e.g., clicking a button), use the following approach:

<div id="react-app"></div>
<button id="load-react">Load React App</button>

<script>
  document.getElementById('load-react').addEventListener('click', function () {
    const script = document.createElement('script');
    script.src = 'embedded-react/static/js/main.js';
    document.body.appendChild(script);
  });
</script>

Uh oh!

React Application Embedded Script #13641

Description

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions