🖋️ Ops! Props!

Olá meus queridos leitores!

Estamos agora conhecendo o mundo React com nosso mentor Abrãao. Lema de sempre: Respira, não pira!

Um dos objetivos durante o desenvolvimento do projeto Face2Face será passar informações das páginas para os componentes através de propriedades.

Por exemplo para definir qual imagem vai aparecer no banner ou qual texto irá aparecer no título. Ex:

    <Banner imagem="home"></Banner>
      
    <Titulo>Mostre que você é um bom detetive! Descubra o rosto antes do seu oponente!</Titulo>

No React chamamos essas propriedades 👆 de props.

O que são props?

Props são propriedades de uma classe ou função JavaScript que podem ser passados aos seus componentes filhos.

É possível enviar como “prop” diferentes tipos de dados e até mesmo outros componentes. É fundamental na criação de componentes por ser o meio de comunicação entre eles.

Mas perceba que enviamos propriedades de duas maneiras diferentes. A segunda maneira, onde inserimos o texto do componente título, é chamada de props.children.

O que é props.children?

A props.children (propriedade filha) é uma propriedade especial do React que contém qualquer elemento filho definido no componente. Ela é usada para exibir o que você inclui entre as tags de abertura e fechamento ao chamar um componente.

A documentação do React diz que você pode usar props.children em componentes que são genéricos, que não tem filhos pré-determinados, flexibilizando o uso do componente.

Podemos ver no nosso Titulo que dependendo de onde ele for usado você pode definir como:

    <h1>, <h2>, <h3>, entre outros.

Entendeu? Então bóra praticar! :)

Por enquanto é isso, um forte abraço!