Hola a todos, tengo problemas al exportar componentes de React a un archivo App.js, este App.js al que se hace referencia en index.html no se ha cargado.
estoy usando reaccionar cdn en index.html
A continuación (index.html):
<html> <head> <link rel="stylesheet" href="index.css" /> <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js" ></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" ></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </head> <body> <div id="page"></div> <script src="App.js" type="text/babel"></script> </body> </html>A continuación (App.js):
import HeaderComponent from "./Header"; import FooterComponent from "./Footer"; import AbcOrderedList from "./MainContent"; //Parent component function App() { return ( <div> {/* Children component */} <HeaderComponent /> <AbcOrderedList /> <FooterComponent /> </div> ); } ReactDOM.render(<App />, document.getElementById("page"));A continuación (Header.js):
export default function HeaderComponent() { return ( <header> <nav className="nav"> <img className="nav-logo" src="react-removebg-preview.png" alt="react logo" /> <ul className="nav-items"> <li>Tools</li> <li>View</li> <li>Log out</li> </ul> </nav> </header> ); }A continuación (Footer.js):
export default function FooterComponent() { return ( <footer className="footer"> <small>© 20xx Nathanzeira development. All rights reserved.</small> </footer> ); }A continuación (MainContent.js):
export default function AbcOrderedList() { return ( <ol> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ol> ); }¡Gracias a todos!