Especialização Frontend com React & TypeScript • Demonstrações Práticas Executáveis

🎯 Contexto e Objetivo Prático

Inicialização de uma aplicação React 19 moderna com Vite, TypeScript e o novo ponto de montagem createRoot com tipagem estrita no elemento raiz.

💻 Código Fonte React 19 (TSX)

// main.tsx
import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";

interface AppBannerProps {
  version: string;
  environment: "development" | "staging" | "production";
}

export function AppBanner({ version, environment }: AppBannerProps) {
  return (
    <header className="p-4 bg-slate-900 text-white rounded-lg shadow-md">
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-bold">Portal React 19 Enterprise</h1>
        <span className="text-xs px-2 py-1 bg-cyan-600 rounded-full font-mono">
          v{version} [{environment.toUpperCase()}]
        </span>
      </div>
      <p className="text-sm text-slate-400 mt-2">
        Renderização com Virtual DOM e React Fiber reconciler.
      </p>
    </header>
  );
}

// Ponto de Entrada Seguro
const rootElement = document.getElementById("root");
if (!rootElement) {
  throw new Error("Elemento container #root não encontrado no DOM.");
}

createRoot(rootElement).render(
  <StrictMode>
    <AppBanner version="19.0.0" environment="development" />
  </StrictMode>
);

🖥️ Saída de Renderização Visual e Comportamento

[Renderização em Navegador]
┌────────────────────────────────────────────────────────┐
│ Portal React 19 Enterprise          v19.0.0 [DEVELOPMENT] │
│ Renderização com Virtual DOM e React Fiber reconciler. │
└────────────────────────────────────────────────────────┘