Estoy tratando de representar un componente React en un archivo html sin usar demasiado código o demasiados archivos. El objetivo final es permitir que otros rendericen mi componente React en sus archivos html con el menor trabajo posible, de ahí la necesidad de pocos archivos.
Si configuro un proyecto que contiene dos archivos (index.html e index.js), uno para definir el componente de reacción y otro para representarlo, no obtengo un error, pero mi componente no aparece.
Mis archivos se ven así:
índice.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>índice.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 />);Cuando ejecuto el proyecto en el navegador, el componente de reacción no se carga, mientras que todos los demás componentes sí lo hacen.
¿Qué debo hacer?