Introdução às props

  • 3 minutos

Os componentes React são desenvolvidos para serem unidades reutilizáveis. Para habilitar a reutilização, os componentes permitem que os dados sejam passados para eles por meio de propriedades ou props.

As props são valores somente leitura disponíveis para uma única instância de um componente. Elas podem ser definidas programaticamente ou com a mesma sintaxe que você usa ao configurar atributos para elementos HTML. Diferentemente do HTML normal, as props não são limitadas a cadeias de caracteres ou valores primitivos; elas podem ser matrizes ou objetos complexos. As props estão disponíveis como uma propriedade de this dentro de um componente. props podem conter quantas propriedades forem necessárias para o componente e são capazes de armazenar objetos ou qualquer outro tipo de dados.

Cenário

Para tornar os componentes reutilizáveis, você normalmente passa os dados a serem exibidos como props. Aqui, você criará um componente chamado RecipeTitle para exibir o título da receita, que será passado como uma propriedade.

Criar o componente

  1. Abra a pasta inicial no Visual Studio Code, conforme destacado na visão geral.

  2. No Visual Studio Code, abra src/RecipeTitle.jsx.

  3. Adicione o seguinte código antes da linha // TODO: Create RecipeTitle component:

    // TODO: Create RecipeTitle component
function RecipeTitle(props) {
    return (
        <section>
            <h2>{ props.title }</h2>
        </section>
    )
};

export default RecipeTitle;

Explore o código

RecipeTitle é semelhante a um componente React de base, com duas atualizações principais.

Primeiro, ele aceita um parâmetro chamado props. Isso conterá automaticamente todos os atributos ou propriedades passados para o componente quando ele for usado.

Em segundo lugar, você pode usar os valores contidos em props como faria com qualquer parâmetro normal. Você está procurando um valor chamado title, que é exibido dentro de um elemento h2.

Usar o componente

Agora, vamos atualizar App.jsx para usar o novo componente RecipeTitle com a propriedade title.

  1. Abra App.jsx

  2. Adicione o seguinte código na linha em que está escrito TODO: Add import for RecipeTitle, a fim de importar o componente RecipeTitle recém-criado:

    // TODO: Add import for RecipeTitle
import RecipeTitle from './RecipeTitle'

  3. Adicione o seguinte código debaixo da linha TODO: Add recipe object para criar um objeto para nossa receita:

    // TODO: Add recipe object
const recipe = {
    title: 'Mashed potatoes',
    feedback: {
        rating: 4.8,
        reviews: 20
    },
    ingredients: [
        { name: '3 potatoes, cut into 1/2" pieces', prepared: false },
        { name: '4 Tbsp butter', prepared: false },
        { name: '1/8 cup heavy cream', prepared: false },
        { name: 'Salt', prepared: true },
        { name: 'Pepper', prepared: true },
    ],
};

    Observação

    No decorrer dos exercícios deste módulo, você usará o objeto recipe inteiro. Por enquanto, seu foco está em title.

  4. Adicione o seguinte código debaixo da linha TODO: Add RecipeTitle component:

    {/* TODO: Add RecipeTitle component */}
<RecipeTitle title={ recipe.title } />

Explore o código

Comece criando um objeto para representar a receita que você deseja exibir e adicione uma propriedade title a ele. Em seguida, use o componente RecipeTitle da mesma maneira que usaria um elemento HTML ou qualquer outro componente React. A principal diferença é que você define o atributo title como o valor de recipe.title. Usando handlebars ( { } ), você é capaz de ler o valor dinamicamente.

Observação

Se o valor que deseja usar para title for um literal de cadeia de caracteres, você poderá definir a propriedade usando a sintaxe title='Recipe title.

Exibir a página

  1. Salve todos os arquivos.
  2. Retorne ao seu navegador e atualize a página. Agora você deve ver o título Purê de batata exibido na página.