Hello JSX

First React component rendered in the playground.

REACTbeginner

jsx
componentes
basico

Defina App na aba TSX: o playground compila com Sucrase e monta em #root (veja o painel “Esqueleto HTML”). A aba HTML é só para markup extra fora do React — experimente mudar o texto do componente.

HTML shell (how React mounts)

The playground injects #root, an import map (esm.sh), and Sucrase. The HTML tab is only extra markup outside React. Name the top-level component App.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <style>/* CSS tab */</style>
  <script type="importmap">
  {
    "imports": {
      "react": "https://esm.sh/react@19",
      "react-dom/client": "https://esm.sh/react-dom@19/client"
    }
  }
  </script>
</head>
<body>
  <div id="root"></div>
  <!-- HTML tab: optional markup outside React -->
  <script type="module">
    // Sucrase compiles the TSX tab, then:
    // createRoot(document.getElementById('root')).render(<App />)
  </script>
</body>
</html>

Local Vite: index.html → src/main.tsx → <App /> into #root. Here the playground does the equivalent with esm.sh + Sucrase.

HTML (outside #root)

CSS

TSX / React

Live preview