I want to import subfiles (Header.js; Footer.js, MainContent.js) into index.js instead of coding similar subfunctions in index.js file. I put the functions in index.js and it worked but splitting the file and importing it didn't. When I write the import, it doesn't work and doesn't show the elements. There ara list of my folders and code.
(index.js)
import Header from "./Header";
import Footer from "./Footer";
import MainContent from "./MainContent";
function App() {
return (
<div>
<Header />
<MainContent />
<Footer />
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
(index.html)
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
(Header.js)
export default function Header() {
return (
<header>
<nav className="nav">
<img src="./react-logo.png" className="nav-logo" />
<ul className="nav-items">
<li>Pricing</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
);
}
(MainContent.js)
export default function MainContent() {
return (
<div>
<h1>Reasons I'm excited to learn React</h1>
<ol>
<li>
It's a popular library, so I'll be able to fit in with the cool kids!
</li>
<li>I'm more likely to get a job as a developer if I know React</li>
</ol>
</div>
);
}
(Footer.js)
export default function Footer() {
return (
<footer>
<small>© 2021 Ziroll development. All rights reserved.</small>
</footer>
);
}
Please help me with the answer, thanks