Parent/Child Component
Parent/Child Component
It's a good practice to divide components into parent/child relation.
import React from "react"
// Header Component
function Header() {
return (
<header>This is the header</header>
)
}
export default Headerimport React from "react"
// MainContent Component
function MainContent() {
return (
<main>This is the main section</main>
)
}
export default MainContentimport React from "react"
import Header from "./Header"
import MainContent from "./MainContent"
import Footer from "./Footer"
// Parent App Component
function App() {
return (
<div>
<Header />
<MainContent />
<Footer />
</div>
)
}
export default Appimport React from "react"
import ReactDOM from "react-dom"
import App from "./App"
ReactDOM.render(<App />, document.getElementById("root"))<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="index.pack.js"></script>
</body>
</html>Last updated
Was this helpful?