React 02 — Componentes e Estruturas Condicionais

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

Nesta atividade, foram desenvolvidos componentes funcionais com JSX para praticar organização de código, importação de componentes e estruturas condicionais em uma aplicação React criada com Vite.

---

Sobre o projeto

O projeto apresenta exemplos simples de lógica condicional dentro de componentes React.

Foram criados componentes separados para demonstrar:

• condicional simples com if
• condicional composta com if/else
• reutilização de componentes
• passagem de valores JavaScript para o JSX
• estilização inline
• organização dos arquivos na pasta components

---

Tecnologias utilizadas

• HTML5
• JavaScript
• JSX
• React
• React DOM
• 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
• Estrutura condicional simples
• Estrutura condicional composta
• Declaração de constantes e variáveis
• Uso de expressões JavaScript no JSX
• Renderização de valores com chaves
• Estilização inline
• Organização de componentes reutilizáveis
• Execução de projeto com Vite

---

Estrutura do projeto

react02/
├── public/
├── src/
│   ├── components/
│   │   ├── CondicionalComposta.jsx
│   │   ├── CondicionalSimples.jsx
│   │   └── Separador.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 reúne os componentes da aplicação:

import CondicionalSimples from "./components/CondicionalSimples";
import CondicionalComposta from "./components/CondicionalComposta";
import Separador from "./components/Separador";

export default function App() {
  return (
    <div style={{ padding: 20 }}>
      <CondicionalSimples />
      <Separador />
      <CondicionalComposta />
      <Separador />
    </div>
  );
}

Cada componente é chamado utilizando uma tag JSX:

<CondicionalSimples />

Isso permite dividir a interface em partes menores e reutilizáveis.

---

Condicional simples

O componente CondicionalSimples verifica se uma pessoa é maior de idade.

export default function CondicionalSimples() {
  const idade = 20;
  let mensagem = "";

  if (idade >= 18) {
    mensagem = "Você é maior de idade";
  }

  return (
    <div>
      <h2>Condicional Simples</h2>
      <p>Idade: {idade}</p>
      <p>{mensagem}</p>
    </div>
  );
}

Neste exemplo, a mensagem somente recebe um valor quando a condição é verdadeira.

A condição utilizada é:

idade >= 18

---

Condicional composta

O componente CondicionalComposta verifica a situação de um aluno com base em sua nota.

export default function CondicionalComposta() {
  const nota = 6;
  let situacao = "";

  if (nota >= 7) {
    situacao = "Aprovado";
  } else {
    situacao = "Reprovado";
  }

  return (
    <div>
      <h2>Condicional Composta</h2>
      <p>Nota: {nota}</p>
      <p>Situação: {situacao}</p>
    </div>
  );
}

A regra utilizada é:

Nota maior ou igual a 7: Aprovado
Nota menor que 7: Reprovado

---

Componente reutilizável

O componente Separador retorna uma linha horizontal estilizada:

export default function Separador() {
  return (
    <hr
      style={{
        border: "1px solid #49055e",
        margin: "20px",
      }}
    />
  );
}

Esse componente é utilizado mais de uma vez no App.jsx, demonstrando reutilização.

---

JavaScript dentro do JSX

No JSX, valores JavaScript são inseridos utilizando chaves:

<p>Idade: {idade}</p>

Outro exemplo:

<p>Situação: {situacao}</p>

As chaves permitem exibir:

• variáveis
• constantes
• resultados de operações
• chamadas de funções
• expressões JavaScript

---

Estilização inline

O projeto utiliza objetos JavaScript para aplicar estilos diretamente nos elementos.

Exemplo:

<div style={{ padding: 20 }}>

No React, o valor de style recebe um objeto:

style={{
  border: "1px solid #49055e",
  margin: "20px",
}}

As propriedades CSS com hífen são escritas em camelCase.

Exemplo:

background-color → backgroundColor
font-size → fontSize

---

Padrão básico de um componente

Um componente funcional pode seguir esta estrutura:

export default function NomeDoComponente() {
  const valor = "Exemplo";

  return (
    <div>
      <h2>{valor}</h2>
    </div>
  );
}

Depois, ele deve ser importado no componente onde será utilizado:

import NomeDoComponente from "./components/NomeDoComponente";

E renderizado:

<NomeDoComponente />

---

Como executar o projeto

Clone o repositório:

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

Entre na pasta:

cd react02

Instale as dependências:

npm install

Execute o servidor de desenvolvimento:

npm run dev

O terminal exibirá um endereço semelhante a:

http://localhost:5173

Abra esse endereço no navegador.

Para interromper o servidor:

Ctrl + C

---

Scripts disponíveis

Executar em desenvolvimento:

npm run dev

Gerar a 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 a estrutura de um componente React
• Criar componentes em arquivos separados
• Importar e reutilizar componentes
• Utilizar estruturas condicionais
• Trabalhar com variáveis dentro do JSX
• Exibir resultados dinamicamente
• Aplicar estilos inline
• Organizar melhor a aplicação

---

Evolução em relação à aula anterior

Na primeira aula, o foco foi conhecer a estrutura inicial de um projeto React criado com Vite.

Nesta segunda aula, o projeto passou a trabalhar com:

• componentes separados
• importação e exportação
• composição de interface
• lógica condicional
• valores dinâmicos no JSX
• componente reutilizável
• estilização inline

---

Próximos estudos

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

• props
• operador ternário
• operador lógico &&
• renderização de listas
• eventos
• estado com useState
• formulários
• componentes controlados
• hooks
• consumo de APIs
• navegação entre páginas

---

Autor

Luan Araujo

Estudante de Desenvolvimento de Sistemas

---

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