que - what is component composition in react

​

ans - Component composition is a core concept in React that enables developers

to build complex user interfaces by combining smaller, reusable components.

This approach promotes reusability, maintainability, and flexibility, making

it easier to develop scalable and robust applications.

​

​

exmaple -

const Avatar = ({ imageUrl }) => {

  return <img src={imageUrl} alt="User Avatar" className="avatar" />;

};

const UserName = ({ name }) => {

  return <h1 className="username">{name}</h1>;

};

const UserBio = ({ bio }) => {

  return <p className="userbio">{bio}</p>;

};

const UserProfile = ({ user }) => {

  return (

    <div className="userprofile">

      <Avatar imageUrl={user.imageUrl} />

      <UserName name={user.name} />

      <UserBio bio={user.bio} />

    </div>

  );

};

​

// Example usage

const user = {

  imageUrl: 'https://example.com/avatar.jpg',

  name: 'John Doe',

  bio: 'Software Developer at Example Inc.'

};

​

const App = () => {

  return (

    <div>

      <UserProfile user={user} />

    </div>

  );

};

​

export default App;