Skip to content

Translate preinit.md to pt-br #889

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
NivaldoFarias wants to merge 1 commit into from
Closed

Translate preinit.md to pt-br #889

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
52 changes: 26 additions & 26 deletions src/content/reference/react-dom/preinit.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 `preinit` 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 `preinit` atualmente está disponível apenas nos canais Canary e experimental 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 lidam com o carregamento de recursos para você, então você pode não precisar chamar esta API você mesmo. Consulte a documentação do seu framework para detalhes.

</Note>

<Intro>

`preinit` lets you eagerly fetch and evaluate a stylesheet or external script.
`preinit` permite que você busque e avalie ansiosamente uma folha de estilo ou script externo.

```js
preinit("https://example.com/script.js", {as: "style"});
Expand All @@ -33,7 +33,7 @@ preinit("https://example.com/script.js", {as: "style"});

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

To preinit a script or stylesheet, call the `preinit` function from `react-dom`.
Para preinit um script ou folha de estilo, chame a função `preinit` de `react-dom`.

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

```

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

The `preinit` function provides the browser with a hint that it should start downloading and executing the given resource, which can save time. Scripts that you `preinit` are executed when they finish downloading. Stylesheets that you preinit are inserted into the document, which causes them to go into effect right away.
A função `preinit` fornece ao navegador uma dica de que ele deve começar a baixar e executar o recurso dado, o que pode economizar tempo. Scripts que você `preinit` são executados quando terminam de ser baixados. Folhas de estilo que você preinit são inseridas no documento, fazendo com que tenham efeito imediatamente.

#### Parameters {/*parameters*/}

* `href`: a string. The URL of the resource you want to download and execute.
* `options`: an object. It contains the following properties:
* `as`: a required string. The type of resource. Its possible values are `script` and `style`.
* `precedence`: a string. Required with stylesheets. Says where to insert the stylesheet relative to others. Stylesheets with higher precedence can override those with lower precedence. The possible values are `reset`, `low`, `medium`, `high`.
* `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"`.
* `integrity`: a string. A cryptographic hash of the resource, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
* `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`.
* `href`: uma string. A URL do recurso que você deseja baixar e executar.
* `options`: um objeto. Ele contém as seguintes propriedades:
* `as`: uma string obrigatória. O tipo de recurso. Seus valores possíveis são `script` e `style`.
* `precedence`: uma string. Obrigatória com folhas de estilo. Indica onde inserir a folha de estilo em relação a outras. Folhas de estilo com maior precedência podem substituir aquelas com menor precedência. Os valores possíveis são `reset`, `low`, `medium`, `high`.
* `crossOrigin`: uma string. A [política CORS](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) a ser utilizada. Seus valores possíveis são `anonymous` e `use-credentials`. É obrigatória quando `as` está definido como `"fetch"`.
* `integrity`: uma string. Um hash criptográfico do recurso, para [verificar sua autenticidade](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
* `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 estrita.
* `fetchPriority`: uma string. Sugere uma prioridade relativa para buscar o recurso. Os valores possíveis são `auto` (o padrão), `high` e `low`.

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

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

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

* Multiple calls to `preinit` with the same `href` have the same effect as a single call.
* In the browser, you can call `preinit` 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, `preinit` 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.
* Chamadas múltiplas para `preinit` com o mesmo `href` têm o mesmo efeito que uma única chamada.
* No navegador, você pode chamar `preinit` em qualquer situação: enquanto renderiza um componente, em um Efeito, em um manipulador de eventos etc.
* Na renderização do lado do servidor ou ao renderizar Componentes do Servidor, `preinit` 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*/}

### Preiniting when rendering {/*preiniting-when-rendering*/}

Call `preinit` when rendering a component if you know that it or its children will use a specific resource, and you're OK with the resource being evaluated and thereby taking effect immediately upon being downloaded.
Chame `preinit` ao renderizar um componente se você souber que ele ou seus filhos usarão um recurso específico e você estiver OK com o recurso sendo avaliado e, portanto, entrando em vigor imediatamente após ser baixado.

<Recipes titleText="Examples of preiniting">
<Recipes titleText="Exemplos de preiniting">

#### Preiniting an external script {/*preiniting-an-external-script*/}

Expand All @@ -91,7 +91,7 @@ function AppRoot() {
}
```

If you want the browser to download the script but not to execute it right away, use [`preload`](/reference/react-dom/preload) instead. If you want to load an ESM module, use [`preinitModule`](/reference/react-dom/preinitModule).
Se você quiser que o navegador baixe o script, mas não o execute imediatamente, use [`preload`](/reference/react-dom/preload) em vez disso. Se você quiser carregar um módulo ESM, use [`preinitModule`](/reference/react-dom/preinitModule).

<Solution />

Expand All @@ -106,17 +106,17 @@ function AppRoot() {
}
```

The `precedence` option, which is required, lets you control the order of stylesheets within the document. Stylesheets with higher precedence can overrule those with lower precedence.
A opção `precedence`, que é obrigatória, permite controlar a ordem das folhas de estilo dentro do documento. Folhas de estilo com maior precedência podem sobrepor aquelas com menor precedência.

If you want to download the stylesheet but not to insert it into the document right away, use [`preload`](/reference/react-dom/preload) instead.
Se você quiser baixar a folha de estilo, mas não inseri-la no documento imediatamente, use [`preload`](/reference/react-dom/preload) em vez disso.

<Solution />

</Recipes>

### Preiniting in an event handler {/*preiniting-in-an-event-handler*/}

Call `preinit` 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 `preinit` em um manipulador de eventos antes de fazer a transição 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 { preinit } from 'react-dom';
Expand All @@ -127,7 +127,7 @@ function CallToAction() {
startWizard();
}
return (
<button onClick={onClick}>Start Wizard</button>
<button onClick={onClick}>Iniciar Assistente</button>
);
}
```
```
Loading