How to reuse react components across projects?

How to build reusable react components?

Need to create a component as we required any where across the project as we need to different data  on the header section or the footer section OR the left side section but all elements are same but data are only different so we need to create a reusable component. We go to the reusable component create rendering method in there and use to header section and create data object as need to header section… And same create data in the other components. As below example.

Note: not required import “import React from 'react';” in the latest version of the react as: "react": "^17.0.2"

React components examples: 

App.js

import './App.css';

import Header from '../src/containers/header'

import Footer from '../src/containers/footer'

import Leftside from './containers/leftside';

function App() {

  return (

    <div className="mainApp">

      <Header/>

      <hr />

      <Leftside />

      <hr />

      <Footer />

    </div>

  );

}

export default App;

header.js

import Navigation from '../components/navigation/navigation'

export default () => {

    const headerClass = "headerSection"

    const navLists = [

        {linkName:'Home', linkHref:'home'},

        {linkName:'About us', linkHref:'aboutus'},

        {linkName:'Header nav', linkHref:'headernav'},

    ]

    return(

        <>

            <h3>Header Section</h3>

            <Navigation navList={navLists} navNewClass={headerClass} />

        </>

    )

}

navigation.js

export default ({navList, navNewClass}) => {

    const renderNavlist = () => {

        return navList.map((item, i) => 

<li key={i}><a href={item.linkHref}>{item.linkName}</a></li>)

    }

    return(

        <div className={navNewClass}>

            <ul>

                {renderNavlist()}

            </ul>

        </div>

    )

}

leftside.js

import LeftNav from '../components/navigation/navigation'

export default () => {

    const headerClass = "LeftSection"

    const navLists = [

        {linkName:'Services 1', linkHref:'services1'},

        {linkName:'Services 2', linkHref:'services2'},

        {linkName:'Services 3', linkHref:'services31'},

    ]

    return (

        <>

        <h3>Left Side Section</h3>

            <LeftNav navList={navLists} navNewClass={headerClass} />

        </>

    )

}

footer.js

import NavFooter from '../components/navigation/navigation'

export default () => {

    const headerClass = "footerSection"

    const navLists = [

        {linkName:'Home Footer', linkHref:'homefooter'},

        {linkName:'Terms & condition', linkHref:'termscondition'},

        {linkName:'Privacy Policy', linkHref:'privacypolicy'},

    ]

    return (

        <>

        <h3>Footer Section</h3>

            <NavFooter navList={navLists} navNewClass={headerClass} />

        </>

    )

}

Folder Structure will be as screenshot below:

you will be find result as below screenshot: