Merge pull request #253 from JoyceFatima/feature/translation-to-pt-br

feat: added the pt-br translations and missing pieces of writing

Author: Mortaro

Diff for: 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 for: 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 (
+      <button onclick={[this.increment, this.log, this.count > 0 && this.logUnlessZero]}> 
+        {this.count}
+      </button>
+    )
+  }
+
+}
+
+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 (
+      <button onclick={this.increment} debounce={2000}> 
+        increment 
+      </button>
+    )
+  }
+
+}
+
+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<CounterProps> {
+
+  // ...
+  
+  render({ multiplier }: NullstackClientContext<CounterProps>) {
+    return <div> {multiplier} </div>
+  }
+
+}
+
+export default Counter;
+```
+
+```tsx
+// src/Application.tsx
+import Counter from './Counter'
+
+export default function Application() {
+  return <Counter multiplier={4} />
+}
+```
+
+## 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<CounterProps> {
+
+  count = 0;
+
+  increment({ delta, multiplier }: NullstackClientContext<CounterProps & CounterButtonProps>) {
+    this.count += delta * multiplier;
+  }
+
+  renderButton({ delta = 1 }: NullstackClientContext<CounterProps & CounterButtonProps>) {
+    return (
+      <button onclick={this.increment} delta={delta}> 
+        {this.count}
+      </button>
+    )
+  }
+  
+  render() {
+    return (
+      <div>
+        <Button />
+        <Button delta={2} />
+      </div>
+    )
+  }
+
+}
+
+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 for: 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 for: 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 for: 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 for: 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"