Skip to content
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

Translate title.md to pt-br #874

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Translate title.md to pt-br #874

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
55 changes: 27 additions & 28 deletions src/content/reference/react-dom/components/title.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,17 @@ canary: true

<Canary>

React's extensions to `<title>` are currently only available in React's canary and experimental channels. In stable releases of React `<title>` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
As extensões do React para `<title>` estão atualmente disponíveis apenas nos canais canary e experimental do React. Nas versões estáveis do React, `<title>` funciona apenas como um [componente HTML embutido do navegador](https://react.dev/reference/react-dom/components#all-html-components). Saiba mais sobre [os canais de lançamento do React aqui](/community/versioning-policy#all-release-channels).

</Canary>


<Intro>

The [built-in browser `<title>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) lets you specify the title of the document.
O [componente `<title>` embutido do navegador](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) permite que você especifique o título do documento.

```js
<title>My Blog</title>
<title>Meu Blog</title>
```

</Intro>
Expand All @@ -24,45 +24,45 @@ The [built-in browser `<title>` component](https://developer.mozilla.org/en-US/d

---

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

### `<title>` {/*title*/}

To specify the title of the document, render the [built-in browser `<title>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title). You can render `<title>` from any component and React will always place the corresponding DOM element in the document head.
Para especificar o título do documento, renderize o [componente `<title>` embutido do navegador](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title). Você pode renderizar `<title>` a partir de qualquer componente e o React sempre colocará o elemento DOM correspondente no cabeçalho do documento.

```js
<title>My Blog</title>
<title>Meu Blog</title>
```

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

#### Props {/*props*/}

`<title>` supports all [common element props.](/reference/react-dom/components/common#props)
`<title>` suporta todas as [props comuns de elementos.](/reference/react-dom/components/common#props)

* `children`: `<title>` accepts only text as a child. This text will become the title of the document. You can also pass your own components as long as they only render text.
* `children`: `<title>` aceita apenas texto como filho. Esse texto se tornará o título do documento. Você também pode passar seus próprios componentes, desde que eles renderizem apenas texto.

#### Special rendering behavior {/*special-rendering-behavior*/}
#### Comportamento especial de renderização {/*special-rendering-behavior*/}

React will always place the DOM element corresponding to the `<title>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<title>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render its `<title>` itself.
O React sempre colocará o elemento DOM correspondente ao componente `<title>` dentro do `<head>` do documento, independentemente de onde na árvore do React ele seja renderizado. O `<head>` é o único lugar válido para o `<title>` existir dentro do DOM, mas é conveniente e mantém as coisas compostas se um componente representando uma página específica puder renderizar seu próprio `<title>`.

There are two exception to this:
* If `<title>` is within an `<svg>` component, then there is no special behavior, because in this context it doesn’t represent the document’s title but rather is an [accessibility annotation for that SVG graphic](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title).
* If the `<title>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t represent the document’s title but rather metadata about a specific part of the page.
Existem duas exceções a isso:
* Se `<title>` estiver dentro de um componente `<svg>`, então não há comportamento especial, porque neste contexto ele não representa o título do documento, mas sim uma [anotação de acessibilidade para aquele gráfico SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title).
* Se o `<title>` tiver uma prop [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop), não há comportamento especial, porque nesse caso ele não representa o título do documento, mas sim metadados sobre uma parte específica da página.

<Pitfall>

Only render a single `<title>` at a time. If more than one component renders a `<title>` tag at the same time, React will place all of those titles in the document head. When this happens, the behavior of browsers and search engines is undefined.
Renderize apenas um único `<title>` por vez. Se mais de um componente renderizar uma tag `<title>` ao mesmo tempo, o React colocará todos esses títulos no cabeçalho do documento. Quando isso acontece, o comportamento dos navegadores e mecanismos de busca é indefinido.

</Pitfall>

---

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

### Set the document title {/*set-the-document-title*/}
### Defina o título do documento {/*set-the-document-title*/}

Render the `<title>` component from any component with text as its children. React will put a `<title>` DOM node in the document `<head>`.
Renderize o componente `<title>` de qualquer componente com texto como seus filhos. O React colocará um nó DOM `<title>` no `<head>` do documento.

<SandpackWithHTMLOutput>

Expand All @@ -72,27 +72,26 @@ import ShowRenderedHTML from './ShowRenderedHTML.js';
export default function ContactUsPage() {
return (
<ShowRenderedHTML>
<title>My Site: Contact Us</title>
<h1>Contact Us</h1>
<p>Email us at [email protected]</p>
<title>Meu Site: Fale Conosco</title>
<h1>Fale Conosco</h1>
<p>Envie-nos um email para [email protected]</p>
</ShowRenderedHTML>
);
}
```

</SandpackWithHTMLOutput>

### Use variables in the title {/*use-variables-in-the-title*/}
### Use variáveis no título {/*use-variables-in-the-title*/}

The children of the `<title>` component must be a single string of text. (Or a single number or a single object with a `toString` method.) It might not be obvious, but using JSX curly braces like this:
Os filhos do componente `<title>` devem ser uma única string de texto. (Ou um único número ou um único objeto com um método `toString`.) Pode não ser óbvio, mas usar chaves JSX assim:

```js
<title>Results page {pageNumber}</title> // 🔴 Problem: This is not a single string
<title>Página de Resultados {pageNumber}</title> // 🔴 Problema: Isso não é uma única string
```

... actually causes the `<title>` component to get a two-element array as its children (the string `"Results page"` and the value of `pageNumber`). This will cause an error. Instead, use string interpolation to pass `<title>` a single string:
... na verdade causa o componente `<title>` a receber um array de dois elementos como seus filhos (a string `"Página de Resultados"` e o valor de `pageNumber`). Isso causará um erro. Em vez disso, use interpolação de string para passar ao `<title>` uma única string:

```js
<title>{`Results page ${pageNumber}`}</title>
```

<title>{`Página de Resultados ${pageNumber}`}</title>
```
Loading