Imagina que tengo el siguiente componente React

 import { useEffect } from "react" export default function AwesomeHelloWorld(props) { useEffect(() => { let targetDiv = document.getElementById("hello-world-component-will-use-this-after-load"); if (targetDiv) { //Do something with retrieved div } }, []); return ( <div>Hello World from a React Component</div> ) }

¿Cómo puedo construirlo en un solo archivo helloworld.js de modo que alguien pueda importar fácilmente el script en una etiqueta html <script/> normal para usar de esta manera?

 <script async type="text/javascript" src="./helloworld.js"/>

Luego, dentro de su cuerpo html, tendrán un div en el que actuará el script generado arriba después de que la página se cargue de esta manera

 <div id="hello-world-component-will-use-this-after-load"/>

Gracias