zinebelouarradi
commented
2 months ago 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>
Hello Team,
I want create a react application in embedded so we can use in other directly in other proejcts when call this script