React

const nome = "Ana"
const ativo = true
const preco = 49.9

function App() {
  return (
    <div>
      {/* string */}
      <h1>Olá, {nome}!</h1>

      {/* expressão JS */}
      <p>2 + 2 = {2 + 2}</p>

      {/* método de string */}
      <p>{nome.toUpperCase()}</p>

      {/* atributo dinâmico */}
      <button disabled={!ativo}>Comprar</button>

      {/* formatação de número */}
      <p>R$ {preco.toFixed(2)}</p>

      {/* ternário para conteúdo condicional */}
      <p>{ativo ? "✅ Ativo" : "❌ Inativo"}</p>
    </div>
  )
}

// ❌ Erro — dois elementos raiz
return (
  <h1>Título</h1>
  <p>Parágrafo</p>
)

// ✅ OK — wrapper div (mas adiciona nó ao DOM)
return (
  <div>
    <h1>Título</h1>
    <p>Parágrafo</p>
  </div>
)

// ✅ MELHOR — Fragment (não adiciona nó extra ao DOM)
return (
  <>
    <h1>Título</h1>
    <p>Parágrafo</p>
  </>
)

// Componente: função com nome iniciado em MAIÚSCULA
function Saudacao() {
  return <h1>Olá, Dev Atlas! 👋</h1>
}

// Usando o componente como se fosse uma tag HTML
function App() {
  return (
    <div>
      <Saudacao />
      <Saudacao />  {/* reutilizável quantas vezes quiser */}
    </div>
  )
}

export default App

src/
  components/         ← componentes reutilizáveis
    Button.tsx
    Card.tsx
    Header.tsx
  pages/              ← componentes de página inteira
    Home.tsx
    About.tsx
  hooks/              ← hooks customizados
    useAuth.ts
  App.tsx             ← componente raiz
  main.tsx            ← ponto de entrada (ReactDOM.render)

// Definindo o tipo das props com TypeScript
type ButtonProps = {
  label:    string
  variant?: "primary" | "danger"   // ? = opcional
  onClick:  () => void
  disabled?: boolean
}

function Button({ label, variant = "primary", onClick, disabled }: ButtonProps) {
  return (
    <button
      className={`btn btn--${variant}`}
      onClick={onClick}
      disabled={disabled}
    >
      {label}
    </button>
  )
}

// Usando o componente com diferentes props
function App() {
  return (
    <>
      <Button label="Salvar"     onClick={() => console.log("salvo")} />
      <Button label="Excluir"   variant="danger"  onClick={() => {}} />
      <Button label="Desabilitado" disabled onClick={() => {}} />
    </>
  )
}

import { ReactNode } from "react"

type CardProps = {
  title:    string
  children: ReactNode   // qualquer coisa renderizável
}

function Card({ title, children }: CardProps) {
  return (
    <div className="card">
      <h2 className="card__title">{title}</h2>
      <div className="card__body">
        {children}
      </div>
    </div>
  )
}

// Usando — tudo entre <Card>...</Card> vira "children"
function App() {
  return (
    <Card title="Meu Produto">
      <p>Descrição do produto aqui.</p>
      <Button label="Comprar" onClick={() => {}} />
    </Card>
  )
}

import { useState } from "react"

function Contador() {
  // useState retorna [valorAtual, funçãoParaAtualizar]
  // o argumento é o valor inicial
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Contagem: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  )
}

import { useState } from "react"

function Formulario() {
  const [nome,  setNome]  = useState("")
  const [email, setEmail] = useState("")
  const [enviado, setEnviado] = useState(false)

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    console.log({ nome, email })
    setEnviado(true)
  }

  if (enviado) {
    return <p>✅ Obrigado, {nome}! Formulário enviado.</p>
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Nome"
        value={nome}
        onChange={(e) => setNome(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Enviar</button>
    </form>
  )
}

import { useState } from "react"

function ExemplosEventos() {
  const [texto, setTexto] = useState("")
  const [hover, setHover] = useState(false)

  // Handler separado (recomendado para lógica não trivial)
  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    setTexto(e.target.value)
  }

  function handleKeyDown(e: React.KeyboardEvent) {
    if (e.key === "Enter") alert("Enter pressionado!")
  }

  return (
    <div>
      {/* Click */}
      <button onClick={() => alert("clicou!")}>Clique</button>

      {/* Hover */}
      <div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{ background: hover ? "#6c63ff" : "#1a1d27" }}
      >
        {hover ? "Mouse em cima!" : "Passe o mouse aqui"}
      </div>

      {/* Input controlado */}
      <input
        value={texto}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
        placeholder="Digite algo..."
      />
      <p>Você digitou: {texto}</p>
    </div>
  )
}

function Painel({ logado, carregando, erro }: {
  logado:     boolean
  carregando: boolean
  erro?:       string
}) {
  // 1. if antes do return — para casos que mudam todo o layout
  if (carregando) return <p>⏳ Carregando...</p>
  if (erro)       return <p style={{color:"red"}}>❌ {erro}</p>

  return (
    <div>
      {/* 2. Ternário — quando há dois casos distintos */}
      {logado
        ? <p>👋 Bem-vindo de volta!</p>
        : <button>Fazer Login</button>
      }

      {/* 3. && — quando há só um caso (mostrar ou não) */}
      {logado && <button>Painel Admin</button>}

      {/* Cuidado: && com número! 0 renderiza "0" na tela */}
      {logado && minhasNotas.length > 0 && <Lista />}
    </div>
  )
}

type Produto = {
  id:    number
  nome:  string
  preco: number
}

const produtos: Produto[] = [
  { id: 1, nome: "Teclado", preco: 350 },
  { id: 2, nome: "Mouse",   preco: 180 },
  { id: 3, nome: "Monitor", preco: 1200 },
]

function ListaProdutos() {
  return (
    <ul>
      {produtos.map((p) => (
        // key é obrigatória — use o id único do item, NUNCA o índice
        <li key={p.id}>
          {p.nome} — R$ {p.preco.toFixed(2)}
        </li>
      ))}
    </ul>
  )
}

// Adicionando e removendo da lista com state
function ListaDinamica() {
  const [itens, setItens] = useState(["Café", "Leite", "Pão"])
  const [novoItem, setNovoItem] = useState("")

  function adicionar() {
    if (!novoItem.trim()) return
    setItens([...itens, novoItem])  // spread cria nova array
    setNovoItem("")
  }

  function remover(index: number) {
    setItens(itens.filter((_, i) => i !== index))
  }

  return (
    <div>
      <input value={novoItem} onChange={(e) => setNovoItem(e.target.value)} />
      <button onClick={adicionar}>Adicionar</button>
      <ul>
        {itens.map((item, i) => (
          <li key={item + i}>
            {item} <button onClick={() => remover(i)}>×</button>
          </li>
        ))}
      </ul>
    </div>
  )
}

import { useState, useEffect } from "react"

function ExemploEffect() {
  const [dados, setDados] = useState(null)
  const [id, setId]     = useState(1)

  // 1. Sem array de dependências → roda em TODA renderização
  useEffect(() => {
    console.log("Componente renderizou")
  })

  // 2. Array vazio → roda UMA VEZ, quando o componente monta
  useEffect(() => {
    console.log("Componente montou!")
  }, [])

  // 3. Com dependência [id] → roda quando "id" muda
  useEffect(() => {
    // Busca dados sempre que o id muda
    fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
      .then(r => r.json())
      .then(setDados)
  }, [id])  // ← lista de dependências

  return (
    <div>
      <button onClick={() => setId(id + 1)}>Próximo usuário</button>
      <pre>{JSON.stringify(dados, null, 2)}</pre>
    </div>
  )
}

function Relogio() {
  const [hora, setHora] = useState(new Date())

  useEffect(() => {
    // Inicia o intervalo quando o componente monta
    const timer = setInterval(() => {
      setHora(new Date())
    }, 1000)

    // Função de cleanup: roda quando o componente desmonta
    // Sem isso, o timer continuaria rodando para sempre — memory leak!
    return () => clearInterval(timer)
  }, [])  // ← [] = só monta/desmonta uma vez

  return <p>🕐 {hora.toLocaleTimeString("pt-BR")}</p>
}

import { useRef, useEffect } from "react"

function FocoAutomatico() {
  // useRef cria uma referência mutável que não causa re-render
  const inputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    // Foca o input quando o componente monta
    inputRef.current?.focus()
  }, [])

  return (
    <input
      ref={inputRef}
      placeholder="Foco automático ao abrir a página"
    />
  )
}

import { useState } from "react"

// Hook que sincroniza state com o localStorage automaticamente
function useLocalStorage<T>(chave: string, valorInicial: T) {
  const [valor, setValor] = useState<T>(() => {
    const salvo = localStorage.getItem(chave)
    return salvo ? JSON.parse(salvo) : valorInicial
  })

  function salvar(novoValor: T) {
    setValor(novoValor)
    localStorage.setItem(chave, JSON.stringify(novoValor))
  }

  return [valor, salvar] as const
}

// Usando o hook customizado em qualquer componente
function Preferencias() {
  const [tema, setTema] = useLocalStorage("tema", "dark")

  return (
    <button onClick={() => setTema(tema === "dark" ? "light" : "dark")}>
      Tema atual: {tema}
    </button>
  )
}

// Peças pequenas
function Preco({ valor }: { valor: number }) {
  return <span className="preco">R$ {valor.toFixed(2)}</span>
}

function Badge({ texto }: { texto: string }) {
  return <span className="badge">{texto}</span>
}

function BotaoComprar({ onClick }: { onClick: () => void }) {
  return <button className="btn-comprar" onClick={onClick}>Comprar</button>
}

// Composição: montando o card a partir das peças
type Produto = { nome: string; preco: number; novo: boolean }

function ProdutoCard({ produto, onComprar }: { produto: Produto; onComprar: () => void }) {
  return (
    <div className="produto-card">
      {produto.novo && <Badge texto="Novo" />}
      <h3>{produto.nome}</h3>
      <Preco valor={produto.preco} />
      <BotaoComprar onClick={onComprar} />
    </div>
  )
}

// Usando a composição completa
function App() {
  const produto = { nome: "Teclado Mecânico", preco: 350, novo: true }
  return <ProdutoCard produto={produto} onComprar={() => alert("Adicionado!")} />
}

# Criar projeto React com TypeScript
npm create vite@latest meu-app -- --template react-ts

# Entrar na pasta e instalar as dependências
cd meu-app
npm install

# Iniciar o servidor de desenvolvimento
npm run dev
# → Local: http://localhost:5173

meu-app/
  public/              ← arquivos estáticos (ícones, imagens)
  src/
    App.tsx            ← componente raiz — edite aqui!
    App.css            ← estilos do App
    main.tsx           ← ponto de entrada (renderiza o App no DOM)
    index.css          ← estilos globais
    vite-env.d.ts      ← tipos do Vite para TypeScript
  index.html           ← HTML base — o React injeta tudo aqui
  package.json
  tsconfig.json        ← configurações do TypeScript
  vite.config.ts       ← configurações do Vite

import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import "./index.css"
import App from "./App.tsx"

// Pega o elemento #root do index.html e injeta o App React dentro dele
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
)

// StrictMode: ativa avisos extras em desenvolvimento.
// Ele renderiza os componentes duas vezes para detectar problemas.
// Não tem efeito em produção.