Oi, Leonardo, tudo bem?
A function component é a maneira mais simples, por ele somente receber uma única props, de definir um componente, segue um exemplo:
function goodMorning(props){
return <h2> Bom dia, {props.name} </h2>;
}
const name = <goodMorning name="Leonardo" />;
ReactDOM.render(
element,
document.getElementById('root'));
)
Quando chamado o ReactDOM.render(), ele renderiza para nós o < GoodMorning name="Leonardo" />
. Aqui, o react chama o componente goodMorning
cujo nome, "Leonando" é a props. O component goodMorning
retorna o <h2> Bom dia, Leonardo</h2>
no DOM.
Pegou melhor a ideia da function component? Se tiver alguma dúvida é só falar!