Componente como matriz
Cada classe Component funciona como uma matriz tipografica: voce define a forma e reutiliza.
Mainz, 1450
mainz: tutorial de componentes inspirado na imprensa de Gutenberg
Esta pagina e uma introducao guiada ao framework mainz. Cada secao apresenta um conceito e leva voce para o proximo nivel com exemplos praticos em TSX.
Trilha guiada
Avance pelos conceitos do framework
Comece criando uma classe que estende Component e devolve seu markup em render().
Codigo da etapa selecionada
import { Component } from "mainz";
// Fundacao: crie seu componente raiz
export class HomePage extends Component {
override render() {
return (
<main>
<h1>mainz</h1>
</main>
);
}
}Conceitos base
Fundamentos para imprimir sua primeira pagina
Estado como tinta viva
A cada setState, a interface recebe nova impressao e o DOM e atualizado com patch incremental.
Eventos de oficina
Handlers no TSX simplificam as interacoes sem perder controle sobre o ciclo de vida.
Secoes compostas
Separar Hero, Cards e Sandbox deixa o projeto escalavel e facil de manter.
Checkpoint
Checagem rapida de entendimento
Antes de seguir, valide uma ideia-chave do framework.
Pergunta 1/3
Qual metodo deve inicializar estado antes da primeira renderizacao?
Voltar ao inicioOficina
Construa seu componente Todo
Complete desafios escrevendo codigo. Um validador JavaScript confere sua entrada e libera a proxima etapa.
Desafio 1/3
Desafio 1: Fundacao
Crie `import { Component } from "mainz"` e uma classe chamada `Todo` com `class Todo extends Component`.