Create Nested Components in React Functional Components

This project will demonstrate how to Create Nested Components in React Functional Components

  • ReactFunctionalComponents
    • src
      • App.js
      • Body.js
      • index.js
import React from 'react';

function Body() {
    return (
        <h3>Body Component</h3>
    );
}

export default Body;
import React from 'react';

import Body from './Body';

function App() {
    return (
        <div>
            <HeaderComponent/>
            <Body/>
            <FooterComponent/>
        </div>
    );
}

function HeaderComponent() {
    return (
        <h3>Header Component</h3>
    );
}

function FooterComponent() {
    return (
        <h3>Footer Component</h3>
    );
}

export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

Screenshots