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 createElement.md to Portuguese #1056

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

Translate createElement.md to Portuguese #1056

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
70 changes: 35 additions & 35 deletions src/content/reference/react/createElement.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: createElement

<Intro>

`createElement` lets you create a React element. It serves as an alternative to writing [JSX.](/learn/writing-markup-with-jsx)
`createElement` permite que você crie um Elemento React. Ele serve como uma alternativa para escrever [JSX.](/learn/writing-markup-with-jsx)

```js
const element = createElement(type, props, ...children)
Expand All @@ -16,11 +16,11 @@ const element = createElement(type, props, ...children)

---

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

### `createElement(type, props, ...children)` {/*createelement*/}

Call `createElement` to create a React element with the given `type`, `props`, and `children`.
Chame `createElement` para criar um Elemento React com o `type`, `props` e `children` fornecidos.

```js
import { createElement } from 'react';
Expand All @@ -34,44 +34,44 @@ function Greeting({ name }) {
}
```

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

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

* `type`: The `type` argument must be a valid React component type. For example, it could be a tag name string (such as `'div'` or `'span'`), or a React component (a function, a class, or a special component like [`Fragment`](/reference/react/Fragment)).
* `type`: O argumento `type` deve ser um tipo de componente React válido. Por exemplo, pode ser uma string de nome de tag (como `'div'` ou `'span'`) ou um Componente React (uma função, uma classe ou um componente especial como [`Fragment`](/reference/react/Fragment)).

* `props`: The `props` argument must either be an object or `null`. If you pass `null`, it will be treated the same as an empty object. React will create an element with props matching the `props` you have passed. Note that `ref` and `key` from your `props` object are special and will *not* be available as `element.props.ref` and `element.props.key` on the returned `element`. They will be available as `element.ref` and `element.key`.
* `props`: O argumento `props` deve ser um objeto ou `null`. Se você passar `null`, ele será tratado da mesma forma que um objeto vazio. O React criará um elemento com props correspondentes ao `props` que você passou. Observe que `ref` e `key` do seu objeto `props` são especiais e *não* estarão disponíveis como `element.props.ref` e `element.props.key` no `element` retornado. Eles estarão disponíveis como `element.ref` e `element.key`.

* **optional** `...children`: Zero or more child nodes. They can be any React nodes, including React elements, strings, numbers, [portals](/reference/react-dom/createPortal), empty nodes (`null`, `undefined`, `true`, and `false`), and arrays of React nodes.
* **opcional** `...children`: Zero ou mais nós filhos. Eles podem ser quaisquer nós React, incluindo Elementos React, strings, números, [portals](/reference/react-dom/createPortal), nós vazios (`null`, `undefined`, `true` e `false`) e arrays de nós React.

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

`createElement` returns a React element object with a few properties:
`createElement` retorna um objeto Elemento React com algumas propriedades:

* `type`: The `type` you have passed.
* `props`: The `props` you have passed except for `ref` and `key`.
* `ref`: The `ref` you have passed. If missing, `null`.
* `key`: The `key` you have passed, coerced to a string. If missing, `null`.
* `type`: O `type` que você passou.
* `props`: O `props` que você passou, exceto `ref` e `key`.
* `ref`: O `ref` que você passou. Se estiver faltando, `null`.
* `key`: O `key` que você passou, forçado a uma string. Se estiver faltando, `null`.

Usually, you'll return the element from your component or make it a child of another element. Although you may read the element's properties, it's best to treat every element as opaque after it's created, and only render it.
Normalmente, você retornará o elemento do seu componente ou o tornará filho de outro elemento. Embora você possa ler as propriedades do elemento, é melhor tratar cada elemento como opaco após sua criação e apenas renderizá-lo.

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

* You must **treat React elements and their props as [immutable](https://en.wikipedia.org/wiki/Immutable_object)** and never change their contents after creation. In development, React will [freeze](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) the returned element and its `props` property shallowly to enforce this.
* Você deve **tratar os Elementos React e suas props como [imutáveis](https://pt.wikipedia.org/wiki/Objeto_imut%C3%A1vel)** e nunca alterar seu conteúdo após a criação. No desenvolvimento, o React irá [congelar](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) o elemento retornado e sua propriedade `props` superficialmente para impor isso.

* When you use JSX, **you must start a tag with a capital letter to render your own custom component.** In other words, `<Something />` is equivalent to `createElement(Something)`, but `<something />` (lowercase) is equivalent to `createElement('something')` (note it's a string, so it will be treated as a built-in HTML tag).
* Quando você usa JSX, **você deve iniciar uma tag com uma letra maiúscula para renderizar seu próprio componente customizado.** Em outras palavras, `<Something />` é equivalente a `createElement(Something)`, mas `<something />` (minúsculo) é equivalente a `createElement('something')` (observe que é uma string, então será tratado como uma tag HTML built-in).

* You should only **pass children as multiple arguments to `createElement` if they are all statically known,** like `createElement('h1', {}, child1, child2, child3)`. If your children are dynamic, pass the entire array as the third argument: `createElement('ul', {}, listItems)`. This ensures that React will [warn you about missing `key`s](/learn/rendering-lists#keeping-list-items-in-order-with-key) for any dynamic lists. For static lists this is not necessary because they never reorder.
* Você deve apenas **passar filhos como múltiplos argumentos para `createElement` se todos forem estaticamente conhecidos,** como `createElement('h1', {}, child1, child2, child3)`. Se seus filhos forem dinâmicos, passe toda a array como o terceiro argumento: `createElement('ul', {}, listItems)`. Isso garante que o React [avise sobre chaves `key` ausentes](/learn/rendering-lists#keeping-list-items-in-order-with-key) para quaisquer listas dinâmicas. Para listas estáticas, isso não é necessário porque elas nunca reordenam.

---

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

### Creating an element without JSX {/*creating-an-element-without-jsx*/}
### Criando um elemento sem JSX {/*creating-an-element-without-jsx*/}

If you don't like [JSX](/learn/writing-markup-with-jsx) or can't use it in your project, you can use `createElement` as an alternative.
Se você não gosta de [JSX](/learn/writing-markup-with-jsx) ou não pode usá-lo em seu projeto, você pode usar `createElement` como uma alternativa.

To create an element without JSX, call `createElement` with some <CodeStep step={1}>type</CodeStep>, <CodeStep step={2}>props</CodeStep>, and <CodeStep step={3}>children</CodeStep>:
Para criar um elemento sem JSX, chame `createElement` com algum <CodeStep step={1}>type</CodeStep>, <CodeStep step={2}>props</CodeStep> e <CodeStep step={3}>children</CodeStep>:

```js [[1, 5, "'h1'"], [2, 6, "{ className: 'greeting' }"], [3, 7, "'Hello ',"], [3, 8, "createElement('i', null, name),"], [3, 9, "'. Welcome!'"]]
import { createElement } from 'react';
Expand All @@ -87,7 +87,7 @@ function Greeting({ name }) {
}
```

The <CodeStep step={3}>children</CodeStep> are optional, and you can pass as many as you need (the example above has three children). This code will display a `<h1>` header with a greeting. For comparison, here is the same example rewritten with JSX:
Os <CodeStep step={3}>children</CodeStep> são opcionais, e você pode passar quantos precisar (o exemplo acima tem três filhos). Este código exibirá um cabeçalho `<h1>` com uma saudação. Para comparação, aqui está o mesmo exemplo reescrito com JSX:

```js [[1, 3, "h1"], [2, 3, "className=\\"greeting\\""], [3, 4, "Hello <i>{name}</i>. Welcome!"], [1, 5, "h1"]]
function Greeting({ name }) {
Expand All @@ -99,23 +99,23 @@ function Greeting({ name }) {
}
```

To render your own React component, pass a function like `Greeting` as the <CodeStep step={1}>type</CodeStep> instead of a string like `'h1'`:
Para renderizar seu próprio Componente React, passe uma função como `Greeting` como <CodeStep step={1}>type</CodeStep> em vez de uma string como `'h1'`:

```js [[1, 2, "Greeting"], [2, 2, "{ name: 'Taylor' }"]]
export default function App() {
return createElement(Greeting, { name: 'Taylor' });
}
```

With JSX, it would look like this:
Com JSX, ficaria assim:

```js [[1, 2, "Greeting"], [2, 2, "name=\\"Taylor\\""]]
export default function App() {
return <Greeting name="Taylor" />;
}
```

Here is a complete example written with `createElement`:
Aqui está um exemplo completo escrito com `createElement`:

<Sandpack>

Expand Down Expand Up @@ -149,7 +149,7 @@ export default function App() {

</Sandpack>

And here is the same example written using JSX:
E aqui está o mesmo exemplo escrito usando JSX:

<Sandpack>

Expand All @@ -176,13 +176,13 @@ export default function App() {

</Sandpack>

Both coding styles are fine, so you can use whichever one you prefer for your project. The main benefit of using JSX compared to `createElement` is that it's easy to see which closing tag corresponds to which opening tag.
Ambos os estilos de codificação são bons, então você pode usar o que preferir para seu projeto. O principal benefício de usar JSX em comparação com `createElement` é que é fácil ver qual tag de fechamento corresponde a qual tag de abertura.

<DeepDive>

#### What is a React element, exactly? {/*what-is-a-react-element-exactly*/}
#### O que é um Elemento React, exatamente? {/*what-is-a-react-element-exactly*/}

An element is a lightweight description of a piece of the user interface. For example, both `<Greeting name="Taylor" />` and `createElement(Greeting, { name: 'Taylor' })` produce an object like this:
Um elemento é uma descrição leve de uma parte da interface do usuário. Por exemplo, tanto `<Greeting name="Taylor" />` quanto `createElement(Greeting, { name: 'Taylor' })` produzem um objeto como este:

```js
// Slightly simplified
Expand All @@ -196,10 +196,10 @@ An element is a lightweight description of a piece of the user interface. For ex
}
```

**Note that creating this object does not render the `Greeting` component or create any DOM elements.**
**Observe que a criação deste objeto não renderiza o componente `Greeting` nem cria quaisquer elementos DOM.**

A React element is more like a description--an instruction for React to later render the `Greeting` component. By returning this object from your `App` component, you tell React what to do next.
Um Elemento React é mais como uma descrição - uma instrução para o React posteriormente renderizar o componente `Greeting`. Ao retornar este objeto do seu Componente `App`, você diz ao React o que fazer em seguida.

Creating elements is extremely cheap so you don't need to try to optimize or avoid it.
Criar elementos é extremamente barato, então você não precisa tentar otimizá-lo ou evitá-lo.

</DeepDive>
</DeepDive>