Construir Componentes React Interativos

Introdução

Neste projeto, você aprenderá como criar uma funcionalidade simples de mostrar/ocultar usando React. Você implementará um botão que alterna a visibilidade de uma imagem na página.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar um projeto React com arquivos HTML, CSS e JavaScript
• Como usar o hook useState para gerenciar o estado da aplicação
• Como renderizar condicionalmente componentes com base no estado
• Como estilizar os componentes usando CSS

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Criar uma aplicação React básica
• Implementar gerenciamento de estado para controlar a visibilidade de elementos
• Integrar HTML, CSS e JavaScript em um projeto React
• Compreender os fundamentos da construção de interfaces de usuário interativas com React

Configurar o Projeto

Nesta etapa, você configurará o projeto e se familiarizará com os arquivos fornecidos.

1. Abra o editor à direita. Você pode ver os seguintes arquivos no diretório do seu projeto:

├── style.css
├── index.html
├── script.js
└── dog.png

2. Clique em "Go Live" no canto inferior direito para abrir o projeto na porta 8080.

Implementar a Funcionalidade Mostrar/Ocultar

Nesta etapa, você implementará a funcionalidade para mostrar e ocultar a imagem usando um botão.

1. Abra o arquivo script.js.
2. Crie o componente App:

function App() {
  const [show, setShow] = React.useState(true);

  return React.createElement(
    React.Fragment,
    null,
    React.createElement(
      "button",
      { onClick: () => setShow(!show) },
      show ? "Hide Element" : "Show Element"
    ),

    show && React.createElement("img", { src: "dog.png" })
  );
}

Neste componente:

• Usamos o hook useState para criar uma variável de estado show e uma função setShow para atualizá-la.
• O valor inicial de show é definido como true.
• Renderizamos um botão que alterna o valor de show quando clicado.
• O texto do botão muda com base no valor de show.
• Renderizamos condicionalmente a imagem usando a variável de estado show.

3. Salve o arquivo App.js.
4. Atualize a página no seu navegador.
5. Clique no botão "Hide Element" para ocultar a imagem.
6. Clique no botão "Show Element" para mostrar a imagem novamente.

Parabéns! Você concluiu o projeto "Mostrar e Ocultar". Você aprendeu como usar React para criar uma funcionalidade simples de mostrar/ocultar com um botão.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.