Skip to content

Translate preload.md to pt-br #888

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Translate preload.md to pt-br #888

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 43 additions & 43 deletions src/content/reference/react-dom/preload.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,19 @@ canary: true

<Canary>

The `preload` function is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
A função `preload` está atualmente disponível apenas nos canais Canary e experimentais do React. Saiba mais sobre [os canais de lançamento do React aqui](/community/versioning-policy#all-release-channels).

</Canary>

<Note>

[React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
Os [frameworks baseados em React](/learn/start-a-new-react-project) frequentemente gerenciam o carregamento de recursos para você, então talvez você não precise chamar esta API você mesmo. Consulte a documentação do seu framework para detalhes.

</Note>

<Intro>

`preload` lets you eagerly fetch a resource such as a stylesheet, font, or external script that you expect to use.
`preload` permite que você busque de forma antecipada um recurso, como uma folha de estilos, uma fonte ou um script externo que você espera usar.

```js
preload("https://example.com/font.woff2", {as: "font"});
Expand All @@ -29,11 +29,11 @@ preload("https://example.com/font.woff2", {as: "font"});

---

## Reference {/*reference*/}
## Referência {/*reference*/}

### `preload(href, options)` {/*preload*/}

To preload a resource, call the `preload` function from `react-dom`.
Para pré-carregar um recurso, chame a função `preload` de `react-dom`.

```js
import { preload } from 'react-dom';
Expand All @@ -45,47 +45,47 @@ function AppRoot() {

```

[See more examples below.](#usage)
[Veja mais exemplos abaixo.](#usage)

The `preload` function provides the browser with a hint that it should start downloading the given resource, which can save time.
A função `preload` fornece ao navegador uma dica de que ele deve começar a baixar o recurso dado, o que pode economizar tempo.

#### Parameters {/*parameters*/}
#### Parâmetros {/*parameters*/}

* `href`: a string. The URL of the resource you want to download.
* `options`: an object. It contains the following properties:
* `as`: a required string. The type of resource. Its [possible values](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#as) are `audio`, `document`, `embed`, `fetch`, `font`, `image`, `object`, `script`, `style`, `track`, `video`, `worker`.
* `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`. It is required when `as` is set to `"fetch"`.
* `referrerPolicy`: a string. The [Referrer header](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#referrerpolicy) to send when fetching. Its possible values are `no-referrer-when-downgrade` (the default), `no-referrer`, `origin`, `origin-when-cross-origin`, and `unsafe-url`.
* `integrity`: a string. A cryptographic hash of the resource, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
* `type`: a string. The MIME type of the resource.
* `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy.
* `fetchPriority`: a string. Suggests a relative priority for fetching the resource. The possible values are `auto` (the default), `high`, and `low`.
* `imageSrcSet`: a string. For use only with `as: "image"`. Specifies the [source set of the image](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
* `imageSizes`: a string. For use only with `as: "image"`. Specifies the [sizes of the image](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
* `href`: uma string. A URL do recurso que você deseja baixar.
* `options`: um objeto. Contém as seguintes propriedades:
* `as`: uma string obrigatória. O tipo de recurso. Seus [valores possíveis](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#as) são `audio`, `document`, `embed`, `fetch`, `font`, `image`, `object`, `script`, `style`, `track`, `video`, `worker`.
* `crossOrigin`: uma string. A [política de CORS](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) a ser usada. Seus valores possíveis são `anonymous` e `use-credentials`. É obrigatória quando `as` é definido como `"fetch"`.
* `referrerPolicy`: uma string. O [cabeçalho Referrer](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#referrerpolicy) a ser enviado ao buscar. Seus valores possíveis são `no-referrer-when-downgrade` (o padrão), `no-referrer`, `origin`, `origin-when-cross-origin` e `unsafe-url`.
* `integrity`: uma string. Um hash criptográfico do recurso, para [verificar sua autenticidade](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
* `type`: uma string. O tipo MIME do recurso.
* `nonce`: uma string. Um [nonce criptográfico para permitir o recurso](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) ao usar uma Política de Segurança de Conteúdo rigorosa.
* `fetchPriority`: uma string. Sugere uma prioridade relativa para buscar o recurso. Os valores possíveis são `auto` (o padrão), `high` e `low`.
* `imageSrcSet`: uma string. Para ser usado apenas com `as: "image"`. Especifica o [conjunto de fontes da imagem](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
* `imageSizes`: uma string. Para ser usado apenas com `as: "image"`. Especifica os [tamanhos da imagem](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).

#### Returns {/*returns*/}
#### Retornos {/*returns*/}

`preload` returns nothing.
`preload` não retorna nada.

#### Caveats {/*caveats*/}
#### Ressalvas {/*caveats*/}

* Multiple equivalent calls to `preload` have the same effect as a single call. Calls to `preload` are considered equivalent according to the following rules:
* Two calls are equivalent if they have the same `href`, except:
* If `as` is set to `image`, two calls are equivalent if they have the same `href`, `imageSrcSet`, and `imageSizes`.
* In the browser, you can call `preload` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
* In server-side rendering or when rendering Server Components, `preload` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
* Múltiplas chamadas equivalentes a `preload` têm o mesmo efeito que uma única chamada. Chamadas a `preload` são consideradas equivalentes de acordo com as seguintes regras:
* Duas chamadas são equivalentes se tiverem o mesmo `href`, exceto:
* Se `as` for definido como `image`, duas chamadas são equivalentes se tiverem o mesmo `href`, `imageSrcSet` e `imageSizes`.
* No navegador, você pode chamar `preload` em qualquer situação: enquanto renderiza um componente, em um Effect, em um manipulador de eventos etc.
* Na renderização do lado do servidor ou ao renderizar Componentes do Servidor, `preload` só tem efeito se você chamá-lo enquanto renderiza um componente ou em um contexto assíncrono originado da renderização de um componente. Quaisquer outras chamadas serão ignoradas.

---

## Usage {/*usage*/}
## Uso {/*usage*/}

### Preloading when rendering {/*preloading-when-rendering*/}
### Pré-carregando ao renderizar {/*preloading-when-rendering*/}

Call `preload` when rendering a component if you know that it or its children will use a specific resource.
Chame `preload` ao renderizar um componente se você souber que ele ou seus filhos usarão um recurso específico.

<Recipes titleText="Examples of preloading">
<Recipes titleText="Exemplos de pré-carregamento">

#### Preloading an external script {/*preloading-an-external-script*/}
#### Pré-carregando um script externo {/*preloading-an-external-script*/}

```js
import { preload } from 'react-dom';
Expand All @@ -96,11 +96,11 @@ function AppRoot() {
}
```

If you want the browser to start executing the script immediately (rather than just downloading it), use [`preinit`](/reference/react-dom/preinit) instead. If you want to load an ESM module, use [`preloadModule`](/reference/react-dom/preloadModule).
Se você quiser que o navegador comece a executar o script imediatamente (em vez de apenas baixá-lo), use [`preinit`](/reference/react-dom/preinit) em vez disso. Se você quiser carregar um módulo ESM, use [`preloadModule`](/reference/react-dom/preloadModule).

<Solution />

#### Preloading a stylesheet {/*preloading-a-stylesheet*/}
#### Pré-carregando uma folha de estilos {/*preloading-a-stylesheet*/}

```js
import { preload } from 'react-dom';
Expand All @@ -111,11 +111,11 @@ function AppRoot() {
}
```

If you want the stylesheet to be inserted into the document immediately (which means the browser will start parsing it immediately rather than just downloading it), use [`preinit`](/reference/react-dom/preinit) instead.
Se você quiser que a folha de estilos seja inserida no documento imediatamente (o que significa que o navegador começará a analisá-la imediatamente em vez de apenas baixá-la), use [`preinit`](/reference/react-dom/preinit) em vez disso.

<Solution />

#### Preloading a font {/*preloading-a-font*/}
#### Pré-carregando uma fonte {/*preloading-a-font*/}

```js
import { preload } from 'react-dom';
Expand All @@ -127,11 +127,11 @@ function AppRoot() {
}
```

If you preload a stylesheet, it's smart to also preload any fonts that the stylesheet refers to. That way, the browser can start downloading the font before it's downloaded and parsed the stylesheet.
Se você pré-carregar uma folha de estilos, é inteligente também pré-carregar quaisquer fontes às quais a folha de estilos se refere. Dessa forma, o navegador pode começar a baixar a fonte antes que ele faça o download e análise da folha de estilos.

<Solution />

#### Preloading an image {/*preloading-an-image*/}
#### Pré-carregando uma imagem {/*preloading-an-image*/}

```js
import { preload } from 'react-dom';
Expand All @@ -146,15 +146,15 @@ function AppRoot() {
}
```

When preloading an image, the `imageSrcSet` and `imageSizes` options help the browser [fetch the correctly sized image for the size of the screen](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
Ao pré-carregar uma imagem, as opções `imageSrcSet` e `imageSizes` ajudam o navegador a [buscar a imagem corretamente dimensionada para o tamanho da tela](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).

<Solution />

</Recipes>

### Preloading in an event handler {/*preloading-in-an-event-handler*/}
### Pré-carregando em um manipulador de eventos {/*preloading-in-an-event-handler*/}

Call `preload` in an event handler before transitioning to a page or state where external resources will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.
Chame `preload` em um manipulador de eventos antes de transitar para uma página ou estado onde recursos externos serão necessários. Isso inicia o processo mais cedo do que se você o chamasse durante a renderização da nova página ou estado.

```js
import { preload } from 'react-dom';
Expand All @@ -165,7 +165,7 @@ function CallToAction() {
startWizard();
}
return (
<button onClick={onClick}>Start Wizard</button>
<button onClick={onClick}>Iniciar Assistente</button>
);
}
```
```
Loading