import React from 'react'
import PropTypes from 'prop-types'

// об'єкт міг би називатися як завгодно, але за домовленністю має бути саме props
function Header(props){  
    return (
        <header style={{
margin: props.margin, 
padding: props.padding, 
border: props.border, 
color: props.color, 
background: props.background}}>
            { props.content + '... ' }
        </header>
    )
}

// дефолтні значення полів нашого об'єкта
Header.defaultProps = {
    margin: '5px',
    padding: '10px',
    border: '2px solid tomato',
    color: 'green',
    background: 'yellowgreen'
}

// типи для полів нашого об'єкта
Header.propTypes = {
    margin: PropTypes.string,
    padding: PropTypes.string,
    border: PropTypes.string,
    color: PropTypes.string,
    background: PropTypes.string,
}

export default Header

Ідентично (але такий стиль написання більш компактний та зрозумілий):

import React from 'react'
import PropTypes from 'prop-types'

function Header({ margin, padding, border, color, background, content }){
    return (
        <header style={{ margin, padding, border, color, background }}>
            { `${content} ...` }
        </header>
    )
}

Header.defaultProps = {
    margin: '5px',
    padding: '10px',
    border: '2px solid tomato',
    color: 'green',
    background: 'yellowgreen'
}

Header.propTypes = {
    margin: PropTypes.string,
    padding: PropTypes.string,
    border: PropTypes.string,
    color: PropTypes.string,
    background: PropTypes.string,
}

export default Header

•