React 03 — Operador Ternário, useState e Input Controlado

Repositório criado para registrar a terceira aula de React da disciplina de Programação Web II.

Nesta atividade, foram desenvolvidos componentes funcionais para praticar estruturas condicionais, gerenciamento de estado com useState, captura de valores digitados pelo usuário e atualização dinâmica da interface.

---

Sobre o projeto

O projeto apresenta dois exemplos principais:

• Condicional ternária para exibir mensagens diferentes
• Verificação de idade utilizando input, botão e estado

A aplicação demonstra como o React pode reagir às ações do usuário e alterar o conteúdo exibido sem recarregar a página.

---

Tecnologias utilizadas

• HTML5
• JavaScript
• JSX
• React
• React Hooks
• Vite
• Node.js
• npm
• Git
• GitHub

---

Conceitos praticados

• Criação de componentes funcionais
• Exportação padrão com export default
• Importação de componentes
• Composição de componentes
• Operador ternário
• Valores booleanos
• Hook useState
• Gerenciamento de estado
• Input controlado
• Evento onChange
• Evento onClick
• Captura de dados digitados
• Atualização dinâmica da interface
• Estruturas condicionais com if, else if e else
• Renderização de variáveis dentro do JSX

---

Estrutura do projeto

react03/
├── public/
├── src/
│   ├── components/
│   │   ├── CondicionalComInput.jsx
│   │   └── CondicionalTernaria.jsx
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── .gitignore
├── index.html
├── package.json
├── package-lock.json
├── vite.config.js
└── README.md

---

Componente principal

O arquivo App.jsx importa e renderiza os dois componentes desenvolvidos na aula:

import CondicionalTernaria from "./components/CondicionalTernaria";
import CondicionalComInput from "./components/CondicionalComInput";

export default function App() {
  return (
    <div style={{ padding: 20 }}>
      <CondicionalTernaria />

      <CondicionalComInput />
    </div>
  );
}

Cada componente é criado em um arquivo separado e depois reutilizado no componente principal.

---

Condicional ternária

O componente CondicionalTernaria utiliza uma variável booleana para decidir qual mensagem deve ser exibida.

export default function CondicionalTernaria() {
  const logado = false;

  return (
    <div>
      <h2>Condicional Ternária</h2>

      <p>
        {logado
          ? "Bem-vindo de volta"
          : "Você precisa fazer login."}
      </p>
    </div>
  );
}

A estrutura do operador ternário é:

condicao ? valorSeVerdadeiro : valorSeFalso

Neste exemplo:

logado
  ? "Bem-vindo de volta"
  : "Você precisa fazer login."

Quando logado for verdadeiro, a primeira mensagem será exibida. Quando for falso, a segunda mensagem será apresentada.

---

Estado com useState

O componente CondicionalComInput utiliza o hook useState para armazenar dois valores:

const [idade, setIdade] = useState("");
const [mensagem, setMensagem] = useState("");

Estado idade

Armazena o valor digitado pelo usuário.

const [idade, setIdade] = useState("");

Estado mensagem

Armazena o resultado da verificação.

const [mensagem, setMensagem] = useState("");

---

Input controlado

O valor do campo está ligado ao estado idade:

<input
  type="number"
  placeholder="Digite sua idade"
  value={idade}
  onChange={(e) => setIdade(e.target.value)}
/>

Esse padrão é chamado de input controlado, pois o React controla o valor exibido no campo.

---

Evento onChange

O evento onChange é executado sempre que o usuário altera o conteúdo do input:

onChange={(e) => setIdade(e.target.value)}

O objeto e representa o evento.

O valor digitado é obtido por:

e.target.value

Depois, esse valor é armazenado no estado:

setIdade(e.target.value)

---

Evento onClick

O botão executa a função verificar quando é clicado:

<button onClick={verificar}>
  Verificar
</button>

A função é passada ao evento sem parênteses:

onClick={verificar}

Assim, ela será executada somente quando ocorrer o clique.

---

Verificação da idade

A função verificar analisa o valor digitado:

function verificar() {
  if (idade === "") {
    setMensagem("Digite uma idade válida.");
  } else if (idade >= 18) {
    setMensagem("Você é maior de idade.");
  } else {
    setMensagem("Você é menor de idade.");
  }
}

As possibilidades são:

Campo vazio:
Digite uma idade válida.

Idade maior ou igual a 18:
Você é maior de idade.

Idade menor que 18:
Você é menor de idade.

---

Componente completo

import { useState } from "react";

export default function CondicionalComInput() {
  const [idade, setIdade] = useState("");
  const [mensagem, setMensagem] = useState("");

  function verificar() {
    if (idade === "") {
      setMensagem("Digite uma idade válida.");
    } else if (idade >= 18) {
      setMensagem("Você é maior de idade.");
    } else {
      setMensagem("Você é menor de idade.");
    }
  }

  return (
    <div>
      <h2>Condicional com input</h2>

      <input
        type="number"
        placeholder="Digite sua idade"
        value={idade}
        onChange={(e) => setIdade(e.target.value)}
      />

      <button onClick={verificar}>
        Verificar
      </button>

      <p>{mensagem}</p>
    </div>
  );
}

---

Renderização dinâmica

A mensagem exibida na tela está ligada ao estado:

<p>{mensagem}</p>

Sempre que setMensagem() é executado, o React atualiza o componente e mostra o novo conteúdo.

Esse comportamento permite criar interfaces interativas sem recarregar a página.

---

Padrão básico do useState

A estrutura do hook é:

const [estado, setEstado] = useState(valorInicial);

Exemplo:

const [nome, setNome] = useState("");

• nome contém o valor atual
• setNome atualiza o valor
• useState("") define o valor inicial

---

Como executar o projeto

Clone o repositório:

git clone https://github.com/Luanlhp777/react03.git

Entre na pasta:

cd react03

Instale as dependências:

npm install

Inicie o servidor:

npm run dev

O terminal exibirá um endereço semelhante a:

http://localhost:5173

Abra o endereço no navegador.

Para interromper:

Ctrl + C

---

Scripts disponíveis

Executar em desenvolvimento:

npm run dev

Gerar versão de produção:

npm run build

Visualizar a versão de produção:

npm run preview

Analisar o código:

npm run lint

---

Objetivos da aula

• Compreender o operador ternário
• Trabalhar com valores booleanos
• Introduzir o hook useState
• Criar estados dentro de componentes
• Capturar valores de formulário
• Trabalhar com inputs controlados
• Utilizar eventos de alteração e clique
• Aplicar estruturas condicionais
• Atualizar a interface dinamicamente
• Organizar componentes em arquivos separados

---

Evolução em relação às aulas anteriores

Na primeira aula, foi estudada a estrutura básica de um projeto React com Vite.

Na segunda aula, foram praticados:

• componentes funcionais
• importação e reutilização
• condicionais simples e compostas
• estilização inline

Nesta terceira aula, o projeto passou a incluir:

• operador ternário
• interação com o usuário
• hook useState
• input controlado
• eventos
• atualização dinâmica da tela
• validação de dados

---

Próximos estudos

Com o avanço das aulas, poderão ser abordados:

• múltiplos campos de formulário
• validações mais completas
• operador lógico &&
• props
• eventos de formulário
• onSubmit
• listas e método map
• estado de objetos e arrays
• useEffect
• consumo de APIs
• navegação entre páginas

---

Autor

Luan Araujo

Estudante de Desenvolvimento de Sistemas

• GitHub: https://github.com/Luanlhp777
• Site de estudos: https://luanlhp777.github.io/meu-site-estudos/

---

Projeto acadêmico desenvolvido para prática de React, JSX, hooks, eventos e estruturas condicionais.