ReactJs

Step 1 )   Create  folder componants in src folder and create a file header.jsx

import '../css/header.css'
const Header = ()=>{
    return(
        <>
        <div id="header">This is an Header</div>
        </>
    )
}
export default Header

Step 2) Create header.css file in css folder at src folder

#header{
    height: 100px;
    background-color: lightgray;
}

Step 3 )   Create footer.jsx in   folder componants  

import '../css/footer.css'
const Footer = ()=>{
    return(
        <>
        <div id="footer">This is an Footer</div>
        </>
    )
}
export default Footer

Step 4) Create footer.css file in css folder at src folder

#footer{
    height: 50px;
    background-color:lightgray;
}

Step 5 )   Create home.jsx in   folder componants  

const Home =()=>{
    return(
        <div id="home">
                <h1> This is home area</h1>
        </div>
    )
}
export default Home;

Step 6) Create home.css file in css folder at src folder

#home{
    height: 400px;
    background-color: rgb(240, 234, 234);
}

Step -7 Add some code in app.js 

import Footer from './componants/footer';
import Header from './componants/header';
import Home from './componants/home';

function App() {
  return (
    <>
     {<Header/>}
     {<Home/>} 
     {<Footer/>}
    </>
  );
}

export default App;
Output will be