Introdução

Concluído

Para criar um aplicativo interativo, você precisa ser capaz de modificar os dados e responder às solicitações do usuário. No React, essa funcionalidade é gerenciada por meio do estado e eventos.

O estado são dados que podem ser atualizados e compartilhados entre componentes em todo o aplicativo. Os eventos permitem que você lide com todas as maneiras como um usuário pode interagir com seu aplicativo: cliques, digitação e toques.

Objetivos

Neste módulo, você vai:

• Adicionar estado a um aplicativo.
• Adicionar manipuladores de eventos.
• Usar o gancho de efeito para responder às alterações de estado.

Pré-requisitos

• Conhecimento de JavaScript, HTML e CSS
• Noções básicas sobre os componentes do React
• Um editor de códigos, como o Visual Studio Code
• Node.js instalado localmente
• Git instalado localmente
• O projeto inicial descrito na próxima seção

Clonar o projeto

Este módulo usa um projeto inicial. Clone o projeto e abra-o no Visual Studio Code.

1. Para obter o projeto inicial, execute as etapas a seguir em uma janela Comando ou em uma janela Terminal. Essa etapa clona o repositório e abre a pasta inicial no Visual Studio Code.

   # Windows
   git clone https://github.com/MicrosoftDocs/mslearn-react
   cd mslearn-react\code\3-state-events\start
   code .
   

   # macOS or Linux
   git clone https://github.com/MicrosoftDocs/mslearn-react
   cd mslearn-react/code/3-state-events/start
   code .
   

2. No Visual Studio Code, abra o terminal integrado selecionando Exibir>Terminal. Ou selecione Ctrl+`. (Em um Mac, selecione Cmd+`.)

3. No terminal, execute o código a seguir para instalar os pacotes necessários e iniciar o servidor de desenvolvimento.

   npm install
   npm start
   

4. Seu navegador padrão deve ser aberto automaticamente. Se isso não acontecer, abra-o manualmente e vá para http://locahost:8080. A página inicial é aberta.