GettingStarted pt BR

Primeiros Passos

🌐 Esta página em: English · Português

Não quer instalar nada ainda? Experimente no playground o mesmo compilador, no seu browser.

Três comandos, sem Node, sem bundlers, sem JavaScript:

dotnet new install eQuantic.UI.Templates

dotnet new equantic-app -n MeuApp

cd MeuApp && dotnet run

Abra a URL impressa: uma página com tema, renderizada no servidor, cujo contador é um componente C#: um campo de estado, um handler e um método Build. O build compilou tudo para JavaScript por você (a toolchain embarcada faz o bundling; não há nada para instalar).

O que o template te dá

MeuApp/
├─ MeuApp.csproj       # <Project Sdk="eQuantic.UI.Sdk">, essa linha É o pipeline de build
├─ global.json         # pina a versão do SDK (carimbada pelo template)
├─ Program.cs          # AddUI → UseTheme → MapUI, UseRequestLocalization para as culturas
├─ Components/
│  └─ StatTile.cs      # seu primeiro componente; a factory dele é gerada a partir dele
├─ Pages/
│  └─ HomePage.cs      # [Page("/")], um StatefulComponent write-once
└─ Resources/
   ├─ Strings.resx     # suas strings: resx .NET comum, o único artefato de localização
   ├─ Strings.pt-BR.resx
   └─ Strings.Designer.cs

• Páginas são classes com [Page("/rota")]. SSR, hidratação, navegação client-side, um 404 de verdade para rotas desconhecidas (declare [Page("/404")] para personalizá-lo), tudo ligado.
• Dois idiomas de nascença. A home lê Strings.Tagline do resx e renderiza um CultureSwitcher: clique em Português e a página re-renderiza no lugar, com Contado {0} vezes. reformatando junto com o contador. Adicione um terceiro idioma criando Strings.fr.resx e listando fr no UseRequestLocalization. Veja Localização para entender como a mesma classe responde no servidor, no browser e numa janela nativa.
• Escrever uma árvore não precisa de new nem de import: Column(gap: Space.S4, children: [ Text("Oi"), Button("Vai") ]). Seus próprios componentes entram nessa superfície automaticamente, e o StatTile(…) do template é seu. Veja Declarative Surface.
• Tema é uma linha: troque PhotonTheme.Instance por MaterialTheme.FromSeed(cor) no Program.cs e todo componente se rebrandiza, servidor e cliente.
• Dados do servidor passam por métodos [ServerAction], chamados do browser como await C# comum.
• Hot reload: rode com dotnet watch, salve um arquivo, e o browser atualiza com o estado da sua página preservado.
• O mesmo componente realiza NATIVAMENTE no engine Photon (shells macOS/iOS/Android). Veja Photon.

Feeds locais/preview

Enquanto os pacotes não estão no nuget.org, aponte um nuget.config para o feed que os carrega:

<configuration>
  <packageSources>
    <add key="equantic" value="CAMINHO-OU-URL-DO-FEED" />
  </packageSources>
</configuration>