Add functional components docs in BR

Author: GuiDevloper

i18n/pt-BR/articles/componentes-funcionais.md

@@ -0,0 +1,114 @@
+---
+title: Componentes Funcionais
+description: Componentes Funcionais são simples funções puras que podem modificar o contexto e não tem estado próprio
+---
+
+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**.
+
+Usando funções puras, você pode escrever componentes focados na renderização da seguinte maneira:
+
+```jsx
+const AnonComponent = function(context) {
+  return (
+    <div html={context.html} id={context.id}></div>
+  )
+}
+
+function NamedComponent(context) {
+  return (
+    <div html={context.html} id={context.id}></div>
+  )
+}
+
+const ArrowComponent = (context) => {
+  return (
+    <div html={context.html} id={context.id}></div>
+  )
+}
+
+export default {
+  AnonComponent,
+  NamedComponent,
+  ArrowComponent
+};
+```
+
+E exportado assim, seu uso seria:
+
+```jsx
+import Nullstack from 'nullstack';
+import Functionals from './Functionals';
+
+class Application extends Nullstack {
+
+  render() {
+    const html = "<p>texto</p>";
+    return (
+      <main>
+        <Functionals.AnonComponent html={html} id="1"/>
+        <Functionals.NamedComponent html={html} id="2"/>
+        <Functionals.ArrowComponent html={html} id="3"/>
+      </main>
+    )
+  }
+
+}
+
+export default Application;
+```
+
+Então, o resultado da renderização seria diretamente semelhante a:
+
+```html
+<div id="1"> <p>texto</p> </div>
+<div id="2"> <p>texto</p> </div>
+<div id="3"> <p>texto</p> </div>
+```
+
+## Vinculando Valores do Contexto
+
+Mesmo não tendo estado próprio, os componentes funcionais do Nullstack podem vincular e modificar valores do [`context`](/pt-br/contexto).
+
+```jsx
+import Nullstack from 'nullstack';
+import BindPureComponent from './Functionals';
+
+class Application extends Nullstack {
+
+  prepare(context) {
+    context.count = 0;
+  }
+
+  render() {
+    return (
+      <main>
+        <BindPureComponent/>
+      </main>
+    )
+  }
+
+}
+
+export default Application;
+```
+
+Registrando `counter` no `context` como no componente acima, podemos ler e modificar esse dado no **BindPureComponent** da seguinte maneira:
+
+```jsx
+export default function BindPureComponent(context) {
+  return (
+    <div>
+      <input type="number" bind={context.count}/>
+      <p>{context.count}</p>
+    </div>
+  )
+}
+```
+
+> 💡 Com sua versatilidade e simplicidade, os componentes funcionais são perfeitos para bibliotecas de componentes sem estado
+
+## Próxima Etapa
+
+⚔ Aprenda sobre a [chave `data` do contexto](/pt-br/contexto-data).

i18n/pt-BR/articles/componentes-renderizaveis.md

@@ -3,7 +3,7 @@ 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
 ---
 
-O componente mais simples que você pode fazer é um componente renderizável.
+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.
 

i18n/pt-BR/articles/inicializacao-da-aplicacao.md

@@ -45,6 +45,6 @@ export default Application;
 
 > 🔒 As funções de servidor com o nome começando com "start" (e opcionalmente seguido por uma letra maiúscula) não geram um endpoint de API para evitar inundação de contexto malicioso.
 
-## Next step
+## Próxima Etapa
 
-⚔ Aprenda sobre a [chave `data` do contexto](/pt-br/contexto-data).
+⚔ Aprenda sobre [componentes funcionais](/pt-br/componentes-funcionais).

i18n/pt-BR/components/Documentation.yml

@@ -27,6 +27,8 @@ topics:
     links:
       - title: "Inicialização da aplicação"
         href: "/pt-br/inicializacao-da-aplicacao"
+      - title: "Componentes Funcionais"
+        href: "/pt-br/componentes-funcionais"
       - title: "Contexto data"
         href: "/pt-br/contexto-data"
       - title: "Contexto Instances"