08.1 Components as Objects - biswajitsundara/react GitHub Wiki

We have seen React.Fragment, React.StrictMode, Context.Provider etc can we create a similar structure

In boot strap also we have seen Card.body, Card.footer etc
Let's say we have two timelines FB & Instagram in both the timelines we have posts & reels
To manage this efficiently, we can follow this approach.

FB Posts

const Posts = () => {
  return <h1>FB Posts </h1>;
};

export default Posts;

FB Reels

const Reels = () => {
  return <h1>FB Reels</h1>;
};

export default Reels;

FB TimeLine

import Posts from "./Posts";
import Reels from "./Reels";

const FBTimeLine = {
    Posts,
    Reels
}

export default FBTimeLine;

The App

import FBTimeLine from "./FB/FBTimeLine";

const SocialMedia = () => {
  return (
    <>
      <FBTimeLine.Posts />
      <FBTimeLine.Reels />
    </>
  );
};

export default SocialMedia;

⚠️ GitHub.com Fallback ⚠️