Adicionar o estado a um aplicativo

Concluído

O React gerencia o estado de algumas formas. Nós nos concentraremos em uma das principais formas, ganchos do React.

Um gancho é um mecanismo que permite que você acesse os mecanismos internos do React. Você pode usar os ganchos para executar código quando algo mudar no React. Ou usá-lo para registrar algo com o React, como o estado. Quando criamos o estado usando o gancho useState, por exemplo, obtemos o objeto de estado e uma função de atualizador para atualizar o valor do gancho.

Cenário

Uma técnica comum que muitos usam é o mise en place, que é "colocar no lugar" em francês. Os cozinheiros garantem que todos os itens estejam arrumados antes de começarem a cozinhar.

Em nosso aplicativo de receitas, queremos permitir que os usuários toquem nos ingredientes para marcá-los como preparados. Começaremos criando o estado e passando as informações de exibição para o componente. Na próxima unidade, exploraremos como lidar com os eventos.

Adicionar estado

Qualquer objeto ou tipo de dados JavaScript pode ser registrado como com estado no React. A função usada para registrar o objeto é useState. A função useState especifica o valor inicial. Ela retorna o objeto com estado recém-criado e outra função que você pode usar para atualizar o valor.

Observação

No React, o estado é imutável, o que significa que ele não pode ser alterado. Para modificar o valor de um objeto com estado, substitua-o por uma nova instância que contenha os valores apropriados. A função retornada por useState gerencia esse processo.

1. No VS Code Explorer, expanda a pasta src e abra o arquivo App.jsx. Observe o objeto initialRecipe existente. Usaremos esse objeto como o valor padrão para nosso recipe com estado.

2. Crie o objeto de estado recipe e a função setRecipe de useState. Para fazer isso, adicione o código a seguir após a linha TODO: Create recipe state.

   const [ recipe, setRecipe ] = useState(initialRecipe);
   

   Nesse código, recipe é o objeto com estado. A função setRecipe será usada para substituir recipe por novas versões.

3. Podemos usar recipe para passar as props para os componentes. No código a seguir, o componente RecipeTitle será usado para exibir o título e os comentários. Passe os valores title e feedback para RecipeTitle adicionando o código a seguir após o comentário TODO: Pass recipe metadata to RecipeTitle.

   <RecipeTitle title={recipe.title} feedback={recipe.feedback} />
   

4. Abra o arquivo RecipeTitle.jsx. Observe o componente existente que exibe as props title e feedback.

Testar a página

1. Salve todos os arquivos.

2. Volte para o navegador e atualize-o. Agora você deve ver os metadados da receita exibidos na página.