Hi all i'am having problems when exporting React components to a App.js file, this App.js referenced on index.html is not been loaded.
I'am using react cdn on index.html
There follows (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>
There follows (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"));
There follows (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>
);
}
There follows (Footer.js):
export default function FooterComponent() {
return (
<footer className="footer">
<small>© 20xx Nathanzeira development. All rights reserved.</small>
</footer>
);
}
There follows (MainContent.js):
export default function AbcOrderedList() {
return (
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ol>
);
}
Thank you all!