Skip to content

Translate index.md to Portuguese #1012

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.

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
14 changes: 7 additions & 7 deletions src/content/reference/react-dom/client/index.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
---
title: Client React DOM APIs
title: APIs do DOM do React no cliente
---

<Intro>

The `react-dom/client` APIs let you render React components on the client (in the browser). These APIs are typically used at the top level of your app to initialize your React tree. A [framework](/learn/start-a-new-react-project#production-grade-react-frameworks) may call them for you. Most of your components don't need to import or use them.
As APIs `react-dom/client` permitem que você renderize componentes React no cliente (no navegador). Essas APIs são tipicamente usadas no nível superior do seu aplicativo para inicializar sua árvore React. Um [framework](/learn/start-a-new-react-project#production-grade-react-frameworks) pode chamá-las para você. A maioria dos seus componentes não precisa importá-las ou usá-las.

</Intro>

---

## Client APIs {/*client-apis*/}
## APIs do cliente {/*client-apis*/}

* [`createRoot`](/reference/react-dom/client/createRoot) lets you create a root to display React components inside a browser DOM node.
* [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`.](/reference/react-dom/server)
* [`createRoot`](/reference/react-dom/client/createRoot) permite que você crie uma raiz para exibir componentes React dentro de um nó do DOM do navegador.
* [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) permite que você exiba componentes React dentro de um nó do DOM do navegador cujo conteúdo HTML foi previamente gerado por [`react-dom/server`.](/reference/react-dom/server)

---

## Browser support {/*browser-support*/}
## Suporte a navegadores {/*browser-support*/}

React supports all popular browsers, including Internet Explorer 9 and above. Some polyfills are required for older browsers such as IE 9 and IE 10.
o React suporta todos os navegadores populares, incluindo Internet Explorer 9 e superior. Alguns polyfills são necessários para navegadores mais antigos, como IE 9 e IE 10.
76 changes: 38 additions & 38 deletions src/content/reference/react-dom/components/index.md
Original file line number Diff line number Diff line change
@@ -1,54 +1,54 @@
---
title: "React DOM Components"
title: "Componentes React DOM"
---

<Intro>

React supports all of the browser built-in [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) and [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Element) components.
O React suporta todos os componentes embutidos do navegador [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) e [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Element).

</Intro>

---

## Common components {/*common-components*/}
## Componentes comuns {/*common-components*/}

All of the built-in browser components support some props and events.
Todos os componentes embutidos do navegador suportam algumas props e eventos.

* [Common components (e.g. `<div>`)](/reference/react-dom/components/common)

This includes React-specific props like `ref` and `dangerouslySetInnerHTML`.
Isso inclui props específicas do React como `ref` e `dangerouslySetInnerHTML`.

---

## Form components {/*form-components*/}
## Componentes de formulário {/*form-components*/}

These built-in browser components accept user input:
Esses componentes embutidos do navegador aceitam entrada do usuário:

* [`<input>`](/reference/react-dom/components/input)
* [`<select>`](/reference/react-dom/components/select)
* [`<textarea>`](/reference/react-dom/components/textarea)

They are special in React because passing the `value` prop to them makes them *[controlled.](/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)*
Eles são especiais no React porque passar a prop `value` para eles os torna *[controlados.](/reference/react-dom/components/input#controlling-an-input-with-a-state-variable)*

---

## Resource and Metadata Components {/*resource-and-metadata-components*/}
## Componentes de recurso e metadados {/*resource-and-metadata-components*/}

These built-in browser components let you load external resources or annotate the document with metadata:
Esses componentes embutidos do navegador permitem que você carregue recursos externos ou anote o documento com metadados:

* [`<link>`](/reference/react-dom/components/link)
* [`<meta>`](/reference/react-dom/components/meta)
* [`<script>`](/reference/react-dom/components/script)
* [`<style>`](/reference/react-dom/components/style)
* [`<title>`](/reference/react-dom/components/title)

They are special in React because React can render them into the document head, suspend while resources are loading, and enact other behaviors that are described on the reference page for each specific component.
Eles são especiais no React porque o React pode renderizá-los no cabeçalho do documento, suspender enquanto os recursos são carregados e realizar outros comportamentos que são descritos na página de referência para cada componente específico.

---

## All HTML components {/*all-html-components*/}
## Todos os componentes HTML {/*all-html-components*/}

React supports all built-in browser HTML components. This includes:
O React suporta todos os componentes HTML embutidos do navegador. Isso inclui:

* [`<aside>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)
* [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio)
Expand Down Expand Up @@ -154,38 +154,38 @@ React supports all built-in browser HTML components. This includes:

<Note>

Similar to the [DOM standard,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) React uses a `camelCase` convention for prop names. For example, you'll write `tabIndex` instead of `tabindex`. You can convert existing HTML to JSX with an [online converter.](https://transform.tools/html-to-jsx)
Semelhante ao [padrão DOM,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) o React usa uma convenção `camelCase` para nomes de props. Por exemplo, você escreve `tabIndex` em vez de `tabindex`. Você pode converter HTML existente para JSX com um [conversor online.](https://transform.tools/html-to-jsx)

</Note>

---

### Custom HTML elements {/*custom-html-elements*/}
### Elementos HTML personalizados {/*custom-html-elements*/}

If you render a tag with a dash, like `<my-element>`, React will assume you want to render a [custom HTML element.](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) In React, rendering custom elements works differently from rendering built-in browser tags:
Se você renderizar uma tag com um hífen, como `<my-element>`, o React assumirá que você deseja renderizar um [elemento HTML personalizado.](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) No React, a renderização de elementos personalizados funciona de forma diferente da renderização de tags embutidas do navegador:

- All custom element props are serialized to strings and are always set using attributes.
- Custom elements accept `class` rather than `className`, and `for` rather than `htmlFor`.
- Todas as props de elementos personalizados são serializadas em strings e sempre são definidas usando atributos.
- Elementos personalizados aceitam `class` em vez de `className` e `for` em vez de `htmlFor`.

If you render a built-in browser HTML element with an [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is) attribute, it will also be treated as a custom element.
Se você renderizar um elemento HTML embutido do navegador com um atributo [`is`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is), ele também será tratado como um elemento personalizado.

<Note>

[A future version of React will include more comprehensive support for custom elements.](https://github.com/facebook/react/issues/11347#issuecomment-1122275286)
[Uma versão futura do React incluirá suporte mais abrangente para elementos personalizados.](https://github.com/facebook/react/issues/11347#issuecomment-1122275286)

You can try it by upgrading React packages to the most recent experimental version:
Você pode experimentá-lo atualizando os pacotes do React para a versão experimental mais recente:

- `react@experimental`
- `react-dom@experimental`

Experimental versions of React may contain bugs. Don't use them in production.
Versões experimentais do React podem conter erros. Não os use em produção.

</Note>
---

## All SVG components {/*all-svg-components*/}
## Todos os componentes SVG {/*all-svg-components*/}

React supports all built-in browser SVG components. This includes:
O React suporta todos os componentes SVG embutidos do navegador. Isso inclui:

* [`<a>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a)
* [`<animate>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate)
Expand Down Expand Up @@ -256,20 +256,20 @@ React supports all built-in browser SVG components. This includes:

<Note>

Similar to the [DOM standard,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) React uses a `camelCase` convention for prop names. For example, you'll write `tabIndex` instead of `tabindex`. You can convert existing SVG to JSX with an [online converter.](https://transform.tools/)
Semelhante ao [padrão DOM,](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) o React usa uma convenção `camelCase` para nomes de props. Por exemplo, você escreve `tabIndex` em vez de `tabindex`. Você pode converter SVG existente para JSX com um [conversor online.](https://transform.tools/)

Namespaced attributes also have to be written without the colon:
Atributos com namespace também precisam ser escritos sem o cólon:

* `xlink:actuate` becomes `xlinkActuate`.
* `xlink:arcrole` becomes `xlinkArcrole`.
* `xlink:href` becomes `xlinkHref`.
* `xlink:role` becomes `xlinkRole`.
* `xlink:show` becomes `xlinkShow`.
* `xlink:title` becomes `xlinkTitle`.
* `xlink:type` becomes `xlinkType`.
* `xml:base` becomes `xmlBase`.
* `xml:lang` becomes `xmlLang`.
* `xml:space` becomes `xmlSpace`.
* `xmlns:xlink` becomes `xmlnsXlink`.
* `xlink:actuate` se torna `xlinkActuate`.
* `xlink:arcrole` se torna `xlinkArcrole`.
* `xlink:href` se torna `xlinkHref`.
* `xlink:role` se torna `xlinkRole`.
* `xlink:show` se torna `xlinkShow`.
* `xlink:title` se torna `xlinkTitle`.
* `xlink:type` se torna `xlinkType`.
* `xml:base` se torna `xmlBase`.
* `xml:lang` se torna `xmlLang`.
* `xml:space` se torna `xmlSpace`.
* `xmlns:xlink` se torna `xmlnsXlink`.

</Note>
</Note>