Skip to content

Commit d504201

Browse files
MortaroMortaro
authored
Merge pull request #268 from BrendonSSilva/brendon-changes
translate to pt-br
2 parents 817d933 + 57b80af commit d504201

File tree

6 files changed

+312
-44
lines changed

6 files changed

+312
-44
lines changed

‎i18n/en-US/articles/styles.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ class Counter extends Nullstack {
6565
return (
6666
<div
6767
class={['number', this.count > 0 && 'bigger-than-zero', this.count % 2 === 0 ? 'even' : 'odd' ]}
68-
style={['background-color: black;', this.count > 0 && 'border-color: black;', this.count % 2 === 0 ? 'color: blue;' : 'color-red;' ]}
68+
style={['background-color: black;', this.count > 0 && 'border-color: black;', this.count % 2 === 0 ? 'color: blue;' : 'color: red;' ]}
6969
>
7070
{this.count}
7171
</div>

‎i18n/pt-BR/articles/como-fazer-deploy-de-aplicacao-nullstack.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ node .production/server.js
3333

3434
Depois de [gerar um site estático](/pt-br/geracao-de-sites-estaticos), tudo o que você precisa fazer é mover a pasta de saída para qualquer máquina host capaz de servir HTML.
3535

36-
## Próxima Etapa
36+
## Exemplos
3737

38-
⚔ Aprenda [Como fazer o deploy de uma aplicação Nullstack no Vercel](/pt-br/como-fazer-deploy-vercel).
38+
- [Como fazer deploy no Vercel](/examples/como-fazer-deploy-vercel)
39+
- [Como fazer deploy no GitHub Pages](/examples/como-fazer-deploy-github-pages)
40+
- [Como fazer deploy no Heroku](/examples/como-fazer-deploy-heroku)

‎i18n/pt-BR/articles/estilos.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,60 @@ class Header extends Nullstack {
1818
}
1919

2020
export default Header;
21+
```
22+
23+
## Classes e estilos condicionais
24+
25+
Você pode passar valores falsy para `style` e `class` para pular a renderização de condicionais.
26+
27+
```jsx
28+
import Nullstack from 'nullstack';
29+
30+
class Counter extends Nullstack {
31+
32+
count = 0;
33+
34+
render() {
35+
return (
36+
<div
37+
class={this.count > 0 && 'bigger-than-zero'}
38+
style={this.count > 0 && 'border-color: black;'}
39+
>
40+
{this.count}
41+
</div>
42+
)
43+
}
44+
45+
}
46+
47+
export default Counter;
48+
```
49+
50+
## Array de classes e estilo
51+
52+
Passe uma array de strings como suporte para `style` e` class` e elas serão unidas ao atributo final.
53+
54+
Você também pode passar valores falsy para pular a renderização de condicionais.
55+
56+
```jsx
57+
import Nullstack from 'nullstack';
58+
59+
class Counter extends Nullstack {
60+
61+
count = 0;
62+
63+
render() {
64+
return (
65+
<div
66+
class={['number', this.count > 0 && 'bigger-than-zero', this.count % 2 === 0 ? 'even' : 'odd' ]}
67+
style={['background-color: black;', this.count > 0 && 'border-color: black;', this.count % 2 === 0 ? 'color: blue;' : 'color: red;' ]}
68+
>
69+
{this.count}
70+
</div>
71+
)
72+
}
73+
74+
}
75+
76+
export default Counter;
2177
```

‎i18n/pt-BR/articles/o-que-e-nullstack.md‎

Lines changed: 99 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,113 @@
11
---
22
title: O que é Nullstack?
3-
description: Nullstack é um framework isomórfico JavaScript que permite aos desenvolvedores construir aplicações Full Stack enquanto se concentram nos recursos do produto e resolvem os problemas do usuário, em vez de gastar uma quantidade significativa de tempo se preocupando com camadas de abstração e escolhendo quais ferramentas os fazem parecer sofisticados.
3+
description: O Nullstack é um framework full stack que permite que o frontend e o backend sejam criados em um único componente, nós o chamamos de componentes "orientados a recursos". O Nullstack torna a codificação divertida e simples porque você não pensa em grandes arquiteturas, em vez disso, você possui pequenos recursos em componentes.
44
---
55

6-
Nullstack é um framework isomórfico JavaScript que permite aos desenvolvedores construir aplicações Full Stack enquanto se concentram nos recursos do produto e resolvem os problemas do usuário, em vez de gastar uma quantidade significativa de tempo se preocupando com camadas de abstração e escolhendo quais ferramentas os fazem parecer sofisticados.
6+
O Nullstack é um framework full stack que permite que o frontend e o backend sejam criados em um único componente, nós o chamamos de componentes "orientados a recursos". O Nullstack torna a codificação divertida e simples porque você não pensa em grandes arquiteturas, em vez disso, você possui pequenos recursos em componentes.
77

8-
O Nullstack pode ser usado para construir uma variedade de projetos, como Blockchain dapps, aplicações da web (SSR, SPA, SSG), extensões do Google Chrome, aplicativos nativos híbridos, aplicativos Electron e qualquer outra coisa que você possa fazer com JavaScript ao mesmo tempo com uma única base de código.
8+
É mais fácil mostrar do que dizer: vamos repassar um componente que permite ver o número de curtidas de uma postagem em 5 minutos!
99

10-
## Orientado a recursos
10+
Na sua cabeça, você já está pensando em APIs e arquitetura, mas todos os seus usuários desejam ver as informações do banco de dados na tela, então vamos fazer exatamente isso:
1111

12-
Um recurso em Nullstack fala a mesma linguagem para o desenvolvedor, o gerente de projetos e o cliente.
12+
```jsx
13+
import Nullstack from 'nullstack'
1314

14-
Em Nullstack os componentes são recursos completos. Eles conectam o back-end e o front-end da aplicação, fornecendo um recurso totalmente funcional em um único componente.
15+
class LikeButton extends Nullstack {
1516

16-
Não existem grandes projetos no Nullstack, apenas pequenos recursos. Um recurso pode ser composto de outros recursos, um recurso pode até mesmo ser uma aplicação inteira importada como um componente em outra aplicação.
17+
// as variáveis de instância são mutáveis e reativas
18+
// você pode usar vanilla JS em vez de hooks
19+
likes = 0
1720

18-
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.
21+
// funções "static async" rodam no servidor
22+
static async getNumberOfLikes({ database, post }) {
23+
// database é uma chave de contexto definida pelo usuário
24+
const sql = 'SELECT COUNT(*) FROM likes WHERE post = ?'
25+
const [likes] = await database.query(sql, [post])
26+
return likes
27+
}
1928

20-
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.
29+
async initiate({ post }) {
30+
// Você pode usar o valor retornado das funções do servidor
31+
// Como se fosse uma função regular
32+
this.likes = await this.getNumberOfLikes({ post })
33+
}
2134

22-
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é.
35+
// JSX segue os padrões HTML
36+
render() {
37+
return (
38+
<div class="likes-counter">
39+
<span> {this.likes} </span>
40+
</div>
41+
)
42+
}
2343

24-
## Próximos passos
44+
}
45+
```
2546

26-
⚔ Aprenda [como criar um projeto em nullstack](pt-br/comecando).
47+
Isso foi fácil, esse é um recurso, tudo no mais é um problema imaginário. Mas isso foi realmente muito fácil, e se quisermos escrever dados no banco de dados em vez de apenas ler na página carregar?
48+
49+
Vamos alterar esse span para um botão e verificar os critérios de aceitação do nosso recurso. A qualquer momento, você pode optar por executar funções no servidor e o Nullstack gerará no momento da compilação um microsserviço com uma API apenas para essa função.
50+
51+
```jsx
52+
import Nullstack from 'nullstack'
53+
54+
class LikeButton extends Nullstack {
55+
56+
// ...
57+
58+
static async createLike({ request, database, post }) {
59+
const user = request.user.id
60+
const sql = 'INSERT INTO likes (user, post) VALUES (?, ?)'
61+
await database.query(sql, [user, post])
62+
}
63+
64+
// Cada client function recebe as props
65+
async like({ post }) {
66+
// Você pode alterar as variáveis e o DOM reflete as mudanças
67+
this.likes++
68+
// Isso está chamando um ponto de extremidade da API por baixo dos panos
69+
await this.createLike({ post })
70+
}
71+
72+
// JSX segue os padrões HTML
73+
render() {
74+
return (
75+
<div class="likes-counter">
76+
<button onclick={this.like}>
77+
{this.likes}
78+
</button>
79+
</div>
80+
)
81+
}
82+
83+
}
84+
```
85+
86+
Este exemplo é pequeno, mas mostra um pouco da beleza do NullStack. Todo recurso é apenas um componente e os recursos podem ser compostos como você deseja. Este componente pode entrar em um componente post.
87+
88+
```jsx
89+
function Post({ post }) {
90+
return (
91+
<div>
92+
<article> {post.content} </article>
93+
<LikeButton post={post.id}>
94+
</div>
95+
)
96+
}
97+
```
98+
99+
Você pode até ter aplicativos inteiros como componentes dentro de outro aplicativo.
100+
101+
```jsx
102+
function Application() {
103+
return (
104+
<div>
105+
<Blog route="/blog/*">dssxs-
106+
<Ecommerce route="/shop/*">
107+
<Home route="/">
108+
</div>
109+
)
110+
}
111+
```
112+
113+
Qualquer desenvolvedor pode pular direto para o seu projeto com apenas conhecimento do JavaScript e ser produtivo no dia 0, porque não precisa entender uma arquitetura excessivamente complicada ou ter que lidar com um monólito gigante. Os aplicativos Nullstack são apenas pequenos recursos isolados que são divertidos de codificar.

‎i18n/pt-BR/articles/refs.md‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
---
2+
title: Refs
3+
description: Refs são uma maneira de controlar elementos do DOM à medida que são renderizados
4+
---
5+
6+
Você pode passar a referência a uma variável para qualquer ref e ela definirá o valor dessa variável para o elemento DOM quando o enredo entrar no DOM.
7+
8+
Você pode passar qualquer variável para o `ref`, desde que seu objeto pai seja mencionado.
9+
10+
```jsx
11+
import Nullstack from 'nullstack';
12+
13+
class Player extends Nullstack {
14+
15+
video = null
16+
17+
hydrate() {
18+
// Assumindo que você tenha permissão do navegador
19+
this.video.play()
20+
}
21+
22+
render() {
23+
return (
24+
<div>
25+
<video ref={this.video} />
26+
</div>
27+
)
28+
}
29+
30+
}
31+
32+
export default Player;
33+
```
34+
35+
## Refs funcionais
36+
37+
Refs pode ser a referência a uma função que será acionada quando o nó entrar no DOM
38+
39+
Uma tecla `element` será adicionada ao contexto quando a função for chamada
40+
41+
Todas props desse enredo serão mescladas no contexto dessa função.
42+
43+
```jsx
44+
import Nullstack from 'nullstack';
45+
46+
class Toast extends Nullstack {
47+
48+
visible = false
49+
50+
startTimer({ element, timeout }) {
51+
console.log(element, `será escondido em ${timeout}ms`)
52+
setTimeout(() => this.visible = false, timeout)
53+
}
54+
55+
render() {
56+
return (
57+
<div>
58+
{this.visible &&
59+
<div ref={this.startTimer} timeout={3000}>
60+
Mensagem muito importante que estava escondida antes
61+
</div>
62+
}
63+
</div>
64+
)
65+
}
66+
67+
}
68+
69+
export default Toast;
70+
```
71+
72+
## Simples components refáveis
73+
74+
Ref pode ser propagada apenas passando a referência do contexto.
75+
76+
```jsx
77+
export default function CustomPlayer({ label, ref }) {
78+
return (
79+
<div>
80+
<video ref={ref} />
81+
</div>
82+
)
83+
}
84+
```
85+
86+
```jsx
87+
import Nullstack from 'nullstack';
88+
import CustomPlayer from './CustomPlayer';
89+
90+
class VideoPage extends Nullstack {
91+
92+
video = null;
93+
94+
render() {
95+
return (
96+
<CustomPlayer ref={this.video} />
97+
)
98+
}
99+
100+
}
101+
102+
export default VideoPage;
103+
```
104+
105+
## Complexos componentes refáveis
106+
107+
Você pode criar seu próprio componente refável recebendo os atributos que o `ref` gera.
108+
109+
Ref é um atalho de tempo de transpilação que cria um objeto com as chaves `object` e `property`.
110+
111+
```jsx
112+
class CustomPlayer extends Nullstack {
113+
114+
element = null
115+
116+
hydrate({ ref }) {
117+
ref.object[ref.property] = this.element
118+
}
119+
120+
render({ audioOnly }) {
121+
return (
122+
<div>
123+
{audioOnly ? <audio ref={this.element} /> : <video ref={this.element} />}
124+
</div>
125+
)
126+
}
127+
128+
}
129+
130+
export default CustomPlayer;
131+
```

0 commit comments

Comments
 (0)