Add PT-BR translations (#456)

* Translate final.md, hello_world.md, README.md, ROADMAP.md and SUMMARY.md * Translatation complete * Internationalization: move guide to en folder and preserve its history. (#494) * Clean files and build mdBook with localization feature * Rebase, remove leftovers and check book builds for every language: ✅ Co-authored-by: Jon Kelley <jkelleyrtp@gmail.com>
2022-07-11 13:28:12 -04:00
1 parent 2369b0cc7f
commit 6ea076fa7f
@@ -0,0 +1,31 @@
+# Componente Filhos
+
+Em alguns casos, você pode desejar criar um componente que atue como um contêiner para algum outro conteúdo, sem que o componente precise saber qual é esse conteúdo. Para conseguir isso, crie uma _prop_ do tipo `Element`:
+
+```rust
+{{#include ../../examples/component_element_props.rs:Clickable}}
+```
+
+Então, ao renderizar o componente, você pode passar a saída de `cx.render(rsx!(...))`:
+
+```rust
+{{#include ../../examples/component_element_props.rs:Clickable_usage}}
+```
+
+> Nota: Como `Element<'a>` é uma _prop_ emprestado, não haverá memoização.
+
+> Atenção: Embora possa compilar, não inclua o mesmo `Element` mais de uma vez no RSX. O comportamento resultante não é especificado.
+
+## O Campo `children`
+
+Em vez de passar o `RSX` através de uma _prop_ regular, você pode querer aceitar filhos da mesma forma que os elementos podem ter filhos. O prop "mágico" `children` permite que você consiga isso:
+
+```rust
+{{#include ../../examples/component_children.rs:Clickable}}
+```
+
+Isso torna o uso do componente muito mais simples: basta colocar o `RSX` dentro dos colchetes `{}` – e não há necessidade de uma chamada `render` ou outra macro!
+
+```rust
+{{#include ../../examples/component_children.rs:Clickable_usage}}
+```
@@ -0,0 +1,142 @@
+# Props de Componentes
+
+Assim como você pode passar argumentos para uma função, você pode passar _props_ para um componente que personaliza seu comportamento! Os componentes que vimos até agora não aceitam _props_ – então vamos escrever alguns componentes que aceitam.
+
+## `#[derive(Props)]`
+
+_Props_ de componente são uma única estrutura anotada com `#[derive(Props)]`. Para um componente aceitar _props_, o tipo de seu argumento deve ser `Scope<YourPropsStruct>`. Então, você pode acessar o valor das _props_ usando `cx.props`.
+
+Existem 2 tipos de estruturas Props:
+
+- `props` próprios:
+  - Não tem uma vida útil associada
+  - Implementam `PartialEq`, permitindo a memoização (se os _props_ não mudarem, o Dioxus não renderizará novamente o componente)
+- `props` emprestados:
+  - [Emprestado](https://doc.rust-lang.org/beta/rust-by-example/scope/borrow.html) de um componente pai
+  - Não pode ser memoizado devido a restrições de tempo de vida (Rust's lifetime)
+
+### Props Próprios
+
+_Props_ próprios são muito simples – eles não emprestam nada. Exemplo:
+
+```rust
+{{#include ../../examples/component_owned_props.rs:Likes}}
+```
+
+Você pode então passar valores de _prop_ para o componente da mesma forma que você passaria atributos para um elemento:
+
+```rust
+{{#include ../../examples/component_owned_props.rs:App}}
+```
+
+![Screenshot: Likes component](./images/component_owned_props_screenshot.png)
+
+### Props Emprestados
+
+Possuir _props_ funciona bem se seus _props_ forem fáceis de copiar – como um único número. Mas e se precisarmos passar um tipo de dados maior, como uma `String` de um componente `App` para um subcomponente `TitleCard`? Uma solução ingênua pode ser [`.clone()`](https://doc.rust-lang.org/std/clone/trait.Clone.html) a `String`, criando uma cópia dela para o subcomponente – mas isso seria ineficiente, especialmente para `Strings` maiores.
+
+Rust permite algo mais eficiente – emprestar a `String` como um `&str` – é para isso que servem as _props emprestadas_!
+
+```rust
+{{#include ../../examples/component_borrowed_props.rs:TitleCard}}
+```
+
+Podemos então usar o componente assim:
+
+```rust
+{{#include ../../examples/component_borrowed_props.rs:App}}
+```
+
+![Screenshot: TitleCard component](./images/component_borrowed_props_screenshot.png)
+
+## Props de Option
+
+A macro `#[derive(Props)]` tem alguns recursos que permitem personalizar o comportamento dos adereços.
+
+### Props Opcionais
+
+Você pode criar campos opcionais usando o tipo `Option<…>` para um campo:
+
+```rust
+{{#include ../../examples/component_props_options.rs:OptionalProps}}
+```
+
+Em seguida, você pode optar por fornecê-los ou não:
+
+```rust
+{{#include ../../examples/component_props_options.rs:OptionalProps_usage}}
+```
+
+### `Option` Explicitamente Obrigatórias
+
+Se você quiser exigir explicitamente uma `Option`, e não uma _prop_ opcional, você pode anotá-la com `#[props(!optional)]`:
+
+```rust
+{{#include ../../examples/component_props_options.rs:ExplicitOption}}
+```
+
+Então, você tem que passar explicitamente `Some("str")` ou `None`:
+
+```rust
+{{#include ../../examples/component_props_options.rs:ExplicitOption_usage}}
+```
+
+### Props Padrão
+
+Você pode usar `#[props(default = 42)]` para tornar um campo opcional e especificar seu valor padrão:
+
+```rust
+{{#include ../../examples/component_props_options.rs:DefaultComponent}}
+```
+
+Então, da mesma forma que _props_ opcionais, você não precisa fornecê-lo:
+
+```rust
+{{#include ../../examples/component_props_options.rs:DefaultComponent_usage}}
+```
+
+### Conversão Automática com `.into`
+
+É comum que as funções Rust aceitem `impl Into<SomeType>` em vez de apenas `SomeType` para suportar uma ampla gama de parâmetros. Se você quiser uma funcionalidade semelhante com _props_, você pode usar `#[props(into)]`. Por exemplo, você pode adicioná-lo em uma prop `String` – e `&str` também será aceito automaticamente, pois pode ser convertido em `String`:
+
+```rust
+{{#include ../../examples/component_props_options.rs:IntoComponent}}
+```
+
+Então, você pode usá-lo assim:
+
+```rust
+{{#include ../../examples/component_props_options.rs:IntoComponent_usage}}
+```
+
+## A macro `inline_props`
+
+Até agora, todas as funções `Component` que vimos tinham uma _struct_ `ComponentProps` correspondente para passar em _props_. Isso foi bastante verboso... Não seria legal ter _props_ como argumentos de função simples? Então não precisaríamos definir uma estrutura Props, e ao invés de digitar `cx.props.whatever`, poderíamos usar `whatever` diretamente!
+
+`inline_props` permite que você faça exatamente isso. Em vez de digitar a versão "completa":
+
+```rust
+#[derive(Props, PartialEq)]
+struct TitleCardProps {
+    title: String,
+}
+
+fn TitleCard(cx: Scope<TitleCardProps>) -> Element {
+    cx.render(rsx!{
+        h1 { "{cx.props.title}" }
+    })
+}
+```
+
+...você pode definir uma função que aceita _props_ como argumentos. Então, basta anotá-lo com `#[inline_props]`, e a macro irá transformá-lo em um componente regular para você:
+
+```rust
+#[inline_props]
+fn TitleCard(cx: Scope, title: String) -> Element {
+    cx.render(rsx!{
+        h1 { "{title}" }
+    })
+}
+```
+
+> Embora o novo Componente seja mais curto e fácil de ler, essa macro não deve ser usada por autores de bibliotecas, pois você tem menos controle sobre a documentação do Prop.
@@ -0,0 +1,27 @@
+# Componentes
+
+Assim como você não gostaria de escrever um programa complexo em uma única e longa função `main`, você não deve construir uma interface complexa em uma única função `App`. Em vez disso, seria melhor dividir a funcionalidade de um aplicativo em partes lógicas chamadas componentes.
+
+Um componente é uma função Rust, nomeada em _UpperCammelCase_, que recebe um parâmetro `Scope` e retorna um `Element` descrevendo a interface do usuário que deseja renderizar. Na verdade, nossa função `App` é um componente!
+
+```rust
+{{#include ../../examples/hello_world_desktop.rs:component}}
+```
+
+> Você provavelmente desejará adicionar `#![allow(non_snake_case)]` no topo de sua caixa para evitar avisos sobre o nome da função
+
+Um Componente é responsável por alguma tarefa de renderização – normalmente, renderizando uma parte isolada da interface do usuário. Por exemplo, você pode ter um componente `About` que renderiza uma breve descrição do Dioxus Labs:
+
+```rust
+{{#include ../../examples/components.rs:About}}
+```
+
+Em seguida, você pode renderizar seu componente em outro componente, da mesma forma que os elementos são renderizados:
+
+```rust
+{{#include ../../examples/components.rs:App}}
+```
+
+![Captura de tela contendo o componente Sobre duas vezes](./images/screenshot_about_component.png)
+
+> Neste ponto, pode parecer que os componentes nada mais são do que funções. No entanto, à medida que você aprende mais sobre os recursos do Dioxus, verá que eles são realmente mais poderosos!
@@ -0,0 +1,116 @@
+# Descrevendo a Interface do Usuário
+
+Dioxus é uma estrutura _declarativa_. Isso significa que, em vez de dizer ao Dioxus o que fazer (por exemplo, "criar um elemento" ou "definir a cor para vermelho"), simplesmente _declaramos_ como queremos que a interface do usuário se pareça usando o RSX.
+
+Você já viu um exemplo simples ou sintaxe `RSX` no aplicativo "hello world":
+
+```rust
+{{#include ../../examples/hello_world_desktop.rs:component}}
+```
+
+Aqui, usamos a macro `rsx!` para _declarar_ que queremos um elemento `div`, contendo o texto `"Hello, world!"`. Dioxus pega o RSX e constrói uma interface do usuário a partir dele.
+
+## Recursos do RSX
+
+O RSX é muito semelhante ao HTML, pois descreve elementos com atributos e filhos. Aqui está um elemento `div` vazio no RSX, bem como o HTML resultante:
+
+```rust
+{{#include ../../examples/rsx_overview.rs:empty}}
+```
+
+```html
+<div></div>
+```
+
+### Filhos
+
+Para adicionar filhos a um elemento, coloque-os dentro dos colchetes `{}`. Eles podem ser outros elementos ou texto. Por exemplo, você pode ter um elemento `ol` (lista ordenada), contendo 3 elementos `li` (item da lista), cada um dos quais contém algum texto:
+
+```rust
+{{#include ../../examples/rsx_overview.rs:children}}
+```
+
+```html
+<ol>
+  <li>First Item</li>
+  <li>Second Item</li>
+  <li>Third Item</li>
+</ol>
+```
+
+### Fragmentos
+
+Você também pode "agrupar" elementos envolvendo-os em `Fragment {}`. Isso não criará nenhum elemento adicional.
+
+> Nota: você também pode renderizar vários elementos no nível superior de `rsx!` e eles serão agrupados automaticamente – não há necessidade de um `Fragment {}` explícito lá.
+
+```rust
+{{#include ../../examples/rsx_overview.rs:fragments}}
+```
+
+```html
+<p>First Item</p>
+<p>Second Item</p>
+<span>a group</span>
+<span>of three</span>
+<span>items</span>
+```
+
+### Atributos
+
+Os atributos também são especificados dentro dos colchetes `{}`, usando a sintaxe `name: value`. Você pode fornecer o valor como um literal no RSX:
+
+```rust
+{{#include ../../examples/rsx_overview.rs:attributes}}
+```
+
+```html
+<a
+  href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+  class="primary_button"
+  autofocus="true"
+  >Log In</a
+>
+```
+
+> Nota: Todos os atributos definidos em `dioxus-html` seguem a convenção de nomenclatura snake_case. Eles transformam seus nomes `snake_case` em atributos `camelCase` do HTML.
+
+#### Atributos Personalizados
+
+Dioxus tem um conjunto pré-configurado de atributos que você pode usar. O RSX é validado em tempo de compilação para garantir que você não especificou um atributo inválido. Se você quiser substituir esse comportamento por um nome de atributo personalizado, especifique o atributo entre aspas:
+
+```rust
+{{#include ../../examples/rsx_overview.rs:custom_attributes}}
+```
+
+```html
+<b customAttribute="value"> Rust is cool </b>
+```
+
+### Interpolação
+
+Da mesma forma que você pode [formatar](https://doc.rust-lang.org/rust-by-example/hello/print/fmt.html) Rust _strings_, você também pode interpolar no texto RSX. Use `{variable}` para exibir o valor de uma variável em uma _string_, ou `{variable:?}` para usar a representação `Debug`:
+
+```rust
+{{#include ../../examples/rsx_overview.rs:formatting}}
+```
+
+```html
+<div class="country-es">
+  Coordinates: (42, 0)
+  <div>ES</div>
+  <div>42</div>
+</div>
+```
+
+### Expressões
+
+Você pode incluir expressões Rust arbitrárias dentro do RSX, mas deve escapá-las entre colchetes `[]`:
+
+```rust
+{{#include ../../examples/rsx_overview.rs:expression}}
+```
+
+```html
+<span>DIOXUS</span>
+```
@@ -0,0 +1,62 @@
+# Atributos Especiais
+
+Enquanto a maioria dos atributos são simplesmente passados para o HTML, alguns têm comportamentos especiais.
+
+## A Escotilha de Escape do HTML
+
+Se você estiver trabalhando com itens pré-renderizados, modelos ou uma biblioteca JS, convém passar o HTML diretamente em vez de passar pelo Dioxus. Nesses casos, use `dangerous_inner_html`.
+
+Por exemplo, enviar um conversor de markdown para Dioxus pode aumentar significativamente o tamanho final do aplicativo. Em vez disso, você desejará pré-renderizar sua remarcação para HTML e, em seguida, incluir o HTML diretamente em sua saída. Usamos essa abordagem para a [página inicial do Dioxus](https://dioxuslabs.com):
+
+```rust
+{{#include ../../examples/dangerous_inner_html.rs:dangerous_inner_html}}
+```
+
+> Nota! Esse atributo é chamado de "dangerous_inner_html" porque é **perigoso** passar dados que você não confia. Se você não for cuidadoso, poderá facilmente expor ataques de [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) aos seus usuários.
+>
+> Se você estiver lidando com entradas não confiáveis, certifique-se de higienizar seu HTML antes de passá-lo para `dangerous_inner_html` – ou apenas passe-o para um elemento de texto para escapar de qualquer tag HTML.
+
+## Atributos Booleanos
+
+A maioria dos atributos, quando renderizados, serão renderizados exatamente como a entrada que você forneceu. No entanto, alguns atributos são considerados atributos "booleanos" e apenas sua presença determina se eles afetam a saída. Para esses atributos, um valor fornecido de `"false"` fará com que eles sejam removidos do elemento de destino.
+
+Portanto, este RSX não renderizaria o atributo `hidden`:
+
+```rust
+{{#include ../../examples/boolean_attribute.rs:boolean_attribute}}
+```
+
+```html
+<div>hello</div>
+```
+
+No entanto, nem todos os atributos funcionam assim. _Apenas os seguintes atributos_ têm este comportamento:
+
+- `allowfullscreen`
+- `allowpaymentrequest`
+- `async`
+- `autofocus`
+- `autoplay`
+- `checked`
+- `controls`
+- `default`
+- `defer`
+- `disabled`
+- `formnovalidate`
+- `hidden`
+- `ismap`
+- `itemscope`
+- `loop`
+- `multiple`
+- `muted`
+- `nomodule`
+- `novalidate`
+- `open`
+- `playsinline`
+- `readonly`
+- `required`
+- `reversed`
+- `selected`
+- `truespeed`
+
+Para quaisquer outros atributos, um valor de `"false"` será enviado diretamente para o DOM.