I am trying to render a React component in an html file without using all too much code or too many files. The end goal is to let others render my React component in their html files with as little work for them as possible, hence the necessity for few files.
If I set up a project containing two files (index.html and index.js), one for defining the react component and another for rendering it, I do not get an error, but my component does not show up.
My files look like this:
index.html
<html>
<head>
<title>hello world</title>
</head>
<body>
<div>hello world</div>
<p>trying to load a react component</p>
<div id="root"></div>
</body>
</html>
index.js
import React from "react";
import { createRoot } from "react-dom/client";
const Component = () => {
return <div>hello this is literally react. not a joke LOL</div>;
};
const root = createRoot(document.getElementById("root"));
root.render(<Component />);
When I then run the project in the browser, the react component does not load whereas all other components do laod.
What do I do?