diff --git a/i18n/pt-BR/articles/comecando.md b/i18n/pt-BR/articles/comecando.md index edc3d8da..56f85a7d 100644 --- a/i18n/pt-BR/articles/comecando.md +++ b/i18n/pt-BR/articles/comecando.md @@ -28,13 +28,13 @@ cd project-name Instale as dependências: ```sh -npm install +npm install # ou yarn ``` Inicie a aplicação em modo de desenvolvimento: ```sh -npm start +npm start # ou yarn start ``` ## Entendendo os arquivos gerados @@ -43,13 +43,13 @@ As seguintes pastas e arquivos serão gerados: ### server.js -Esta é a ponto de entrada e geração do servidor. +Esta é a entrada do servidor e o ponto do gerador. É um lugar conveniente para configurar coisas globais como [banco de dados](/pt-br/como-usar-mongodb-com-nullstack) e manipular o `contexto` do servidor, detalhes em [inicialização da aplicação](/pt-br/inicializacao-da-aplicacao). ### client.js -Esta é a ponto de entrada e geração do cliente. +Esta é a entrada do cliente e o ponto do gerador. É um lugar conveniente para importar dependências globais como frameworks CSS e manipular o `contexto` do cliente. diff --git a/i18n/pt-BR/articles/componentes-com-estado.md b/i18n/pt-BR/articles/componentes-com-estado.md index dfcd09a5..cf9a2ea3 100644 --- a/i18n/pt-BR/articles/componentes-com-estado.md +++ b/i18n/pt-BR/articles/componentes-com-estado.md @@ -2,6 +2,7 @@ title: Componentes com estado description: Um framework web full stack produtivo não deve forçar você a pensar sobre detalhes de estrutura --- +Componentes com estado são classes que estendem nullstack e são capazes de manter o estado que reflete na interface do usuário. Um framework web full stack produtivo não deve forçar você a pensar sobre detalhes de estrutura. @@ -45,6 +46,44 @@ export default Counter; > 💡 As atualizações são feitas em lotes, geralmente enquanto aguardam chamadas assíncronas, portanto, fazer várias atribuições não tem custos de desempenho! +## Array de Eventos + +Você pode passar um array de eventos como prop e eles serão executados em paralelo + +Você também pode passar valores falsos para pular eventos condicionalmente. + +```jsx +import Nullstack from 'nullstack'; + +class Counter extends Nullstack { + + count = 0; + + increment() { + this.count++; + } + + log() { + console.log(this.count); + } + + logUnlessZero() { + console.log(this.count > 0); + } + + render() { + return ( + + ) + } + +} + +export default Counter; +``` + ## Objeto de Eventos Você pode criar atalho em eventos que são simples atribuições passando um objeto para o evento. @@ -159,6 +198,123 @@ class Form extends Nullstack { export default Form; ``` +## Eventos Debounced + +Você pode usar o atributo `debounce` passando um número de milissegundos para atrasar os eventos desse elemento + +```jsx +import Nullstack from 'nullstack'; + +class Counter extends Nullstack { + + count = 0 + + increment() { + this.count++ + } + + render() { + return ( + + ) + } + +} + +export default Counter; +``` + + +## TypeScript + +Componentes com estado aceitam um genérico que reflete nas props que sua tag aceitará + +```tsx +// src/Counter.tsx +import Nullstack, { NullstackClientContext } from 'nullstack'; + +interface CounterProps { + multiplier: number +} + +class Counter extends Nullstack { + + // ... + + render({ multiplier }: NullstackClientContext) { + return
{multiplier}
+ } + +} + +export default Counter; +``` + +```tsx +// src/Application.tsx +import Counter from './Counter' + +export default function Application() { + return +} +``` + +## Componentes internos + +Em vez de criar um novo componente apenas para organizar a divisão de código, você pode criar um componente interno. + +Componentes internos são qualquer método cujo nome comece com `render` seguido por um caractere maiúsculo. + +Os componentes internos compartilham a mesma instância e escopo do componente principal, portanto, são muito convenientes para evitar problemas como perfuração de escoras. + +Para invocar o componente interno, use uma tag JSX com o nome do método sem o prefixo `render`. + +```tsx +import Nullstack, { NullstackClientContext, NullstackNode } from 'nullstack'; + +interface CounterProps { + multiplier: number +} + +interface CounterButtonProps { + delta: number +} + +declare function Button(context: CounterProps): NullstackNode + +class Counter extends Nullstack { + + count = 0; + + increment({ delta, multiplier }: NullstackClientContext) { + this.count += delta * multiplier; + } + + renderButton({ delta = 1 }: NullstackClientContext) { + return ( + + ) + } + + render() { + return ( +
+
+ ) + } + +} + +export default Counter; +``` +> 💡 Nullstack will inject a constant reference to the function at transpile time in order to completely skip the runtime lookup process! + ## Próximos passos ⚔ Aprenda sobre o [ciclo da vida full-stack](/pt-br/ciclo-de-vida-full-stack). diff --git a/i18n/pt-BR/articles/componentes-funcionais.md b/i18n/pt-BR/articles/componentes-funcionais.md index df1ac5fe..536a2b36 100644 --- a/i18n/pt-BR/articles/componentes-funcionais.md +++ b/i18n/pt-BR/articles/componentes-funcionais.md @@ -5,7 +5,7 @@ description: Componentes Funcionais são simples funções puras que podem modif Desde a v0.9.21, o Nullstack tem a simplicidade de componentes funcionais puros pronta para uso. -Este segue as especificações de [componentes renderizáveis](/pt-br/componentes-renderizaveis), mas com mais ênfase no **renderizável**. +Este segue as especificações de [componentes sem estado](/pt-br/componentes-renderizaveis), mas com mais ênfase no **renderizável**. Usando funções puras, você pode escrever componentes focados na renderização da seguinte maneira: diff --git a/i18n/pt-BR/articles/componentes-renderizaveis.md b/i18n/pt-BR/articles/componentes-renderizaveis.md index f0c10651..7c486236 100644 --- a/i18n/pt-BR/articles/componentes-renderizaveis.md +++ b/i18n/pt-BR/articles/componentes-renderizaveis.md @@ -1,11 +1,11 @@ --- -title: Componentes renderizáveis -description: Componentes renderizáveis são muito semelhantes aos componentes da Web que fornecem a capacidade de criar novas tags HTML que atalham um grupo de outras tags HTML +title: Componentes sem estado +description: Componentes sem estado são muito semelhantes aos componentes da Web que fornecem a capacidade de criar novas tags HTML que atalham um grupo de outras tags HTML --- O componente mais simples que você pode fazer é um componente renderizável, com exceção de [componentes funcionais](/pt-br/componentes-funcionais). -Componentes renderizáveis são muito semelhantes aos componentes da Web que fornecem a capacidade de criar novas tags HTML que atalham um grupo de outras tags HTML. +Componentes sem estado são muito semelhantes aos componentes da Web que fornecem a capacidade de criar novas tags HTML que atalham um grupo de outras tags HTML. Crie um arquivo em sua pasta src com o nome de seu componente e com a [extensão `.njs`](/pt-br/extensão-de-arquivo-njs). @@ -330,7 +330,7 @@ export default Post; ## A tag `head` -Componentes renderizáveis podem renderizar dentro da tag `head` um número ilimitado de vezes em qualquer profundidade do aplicativo. +Componentes sem estado podem renderizar dentro da tag `head` um número ilimitado de vezes em qualquer profundidade do aplicativo. A tag `head` só será atualizada durante o processo de [renderização no servidor](/pt-br/renderizacao-no-servidor) e mudanças serão ignorados após o processo de [hidratação](/pt-br/ciclo-de-vida-full-stack). diff --git a/i18n/pt-BR/articles/o-que-e-nullstack.md b/i18n/pt-BR/articles/o-que-e-nullstack.md index 1d7a67c9..247a6a66 100644 --- a/i18n/pt-BR/articles/o-que-e-nullstack.md +++ b/i18n/pt-BR/articles/o-que-e-nullstack.md @@ -17,6 +17,8 @@ Não existem grandes projetos no Nullstack, apenas pequenos recursos. Um recurso Isso pode parecer errado e ir contra tudo o que você já aprendeu, mas funciona e é mais rápido e flexível. Seu código fica muito mais simples e fácil de entender, as pessoas podem pular rapidamente em sua base de código e começar a contribuir. Os desenvolvedores podem fazer alterações em projetos gigantes sem nenhuma sobrecarga cognitiva. +Nullstack não precisa de um ecossistema, você provavelmente não encontrará bibliotecas "nullstack-*", pois pode simplesmente usar pacotes JavaScript vanilla. Acreditamos que o JavaScript atingiu um nível de maturidade que a criação de um trecho de código que faz exatamente o que você precisa geralmente ocupará menos linhas e levará a menos engenharia excessiva do que configurar uma biblioteca. + O desenvolvimento orientado a recursos pode não ser para todos, mas o Nullstack oferece liberdade suficiente para usá-lo da maneira que achar melhor. Você ainda pode usar o Nullstack com camadas e abstrações, não estamos aqui para segurar sua mão, você é livre para atirar no seu próprio pé. ## Próximos passos diff --git a/i18n/pt-BR/components/Documentation.yml b/i18n/pt-BR/components/Documentation.yml index 349b235b..9013c169 100644 --- a/i18n/pt-BR/components/Documentation.yml +++ b/i18n/pt-BR/components/Documentation.yml @@ -9,7 +9,7 @@ topics: href: "/pt-br/o-que-e-nullstack" - title: "Começando" href: "/pt-br/comecando" - - title: "Componentes renderizáveis" + - title: "Componentes sem estado" href: "/pt-br/componentes-renderizaveis" - title: "Componentes com estado" href: "/pt-br/componentes-com-estado"