Creé un archivo HTML simple y agregué React a través de los enlaces CDN.
<html> <head> <title>React App</title> <script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin="anonymous" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script crossorigin="anonymous" src="https://unpkg.com/babel-standalone@6/babel.min.js" ></script> <script type="text/babel" src="App.js"></script> <script type="text/babel" src="Button.js"></script> <-- I don't want to include this in the HTML file, rather it should be included in App.js </head> <body> <div id="root"></div> <script type="text/babel"> ReactDOM.render(<App />, document.getElementById('root')); </script> </body> </html>He creado dos componentes React:
Aplicación.js
const App = () => { return ( <Button/> ); }Botón.js
const Button = () => { return ( <input type="button" value="Click Me" /> ); } Esto funciona perfectamente bien. Sin embargo, no quiero incluir <script type="text/babel" src="Button.js"></script> en el archivo HTML, sino que estoy tratando de encontrar una manera de incluir el componente Button.js en App.js y yo solo debemos agregar <script type="text/babel" src="App.js"></script> en el archivo HTML.
Probé varias opciones, como importar/exportar, requerir, pero parece que ninguna funciona. Agradezco cualquier ayuda en torno a esto.