From 88d5c721ebc3ec072d1a9a64b335bec538656967 Mon Sep 17 00:00:00 2001 From: Nivaldo Farias Date: Mon, 20 Jan 2025 16:54:50 -0300 Subject: [PATCH] Translate `preload.md` to pt-br --- src/content/reference/react-dom/preload.md | 86 +++++++++++----------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/src/content/reference/react-dom/preload.md b/src/content/reference/react-dom/preload.md index 1e7fd1959..bdb25a945 100644 --- a/src/content/reference/react-dom/preload.md +++ b/src/content/reference/react-dom/preload.md @@ -5,19 +5,19 @@ canary: true -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). -[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. -`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"}); @@ -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'; @@ -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. - + -#### Preloading an external script {/*preloading-an-external-script*/} +#### Pré-carregando um script externo {/*preloading-an-external-script*/} ```js import { preload } from 'react-dom'; @@ -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). -#### Preloading a stylesheet {/*preloading-a-stylesheet*/} +#### Pré-carregando uma folha de estilos {/*preloading-a-stylesheet*/} ```js import { preload } from 'react-dom'; @@ -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. -#### Preloading a font {/*preloading-a-font*/} +#### Pré-carregando uma fonte {/*preloading-a-font*/} ```js import { preload } from 'react-dom'; @@ -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. -#### Preloading an image {/*preloading-an-image*/} +#### Pré-carregando uma imagem {/*preloading-an-image*/} ```js import { preload } from 'react-dom'; @@ -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). -### 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'; @@ -165,7 +165,7 @@ function CallToAction() { startWizard(); } return ( - + ); } -``` +``` \ No newline at end of file