component composition example

App.jsx

import React from 'react'
import './App.css'

function MyButton() {
    return <button>Hello</button>
}

function BorderedButton() {
    return (
        <div className="bordered">
            <MyButton />
        </div>
    );
}

export class MyHeader extends React.Component {
    render() {
        return <h1>Hello</h1>
    }
}

function App() {
    return (
        <>
            <MyButton/>
            <MyHeader/>
            <BorderedButton />
        </>
    )
}

export default App

/*
додати в App.jsx:

.bordered {
  border: 2px solid blue;
  padding: 10px;
  display: inline-block;
}
*/