From 423afb2a6fb4935df8c5530e75216660d4e6bc27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Fernandes?= Date: Fri, 25 Feb 2022 14:29:13 -0300 Subject: [PATCH 1/4] translating pages/reference/render.md to pt-br --- beta/src/pages/reference/render.md | 78 +++++++++++++++--------------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index cc230c548..afe2444ab 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -4,7 +4,7 @@ title: render() -`render` renders a piece of [JSX](/learn/writing-markup-with-jsx) ("React element") into a browser DOM container node. It instructs React to change the DOM inside of the `container` so that it matches the passed JSX. +`render` renderiza um [JSX](/learn/writing-markup-with-jsx) ("elemento React") em um nó de contêiner DOM do navegador. Ele instrui o React a alterar o DOM dentro do `container` para que ele corresponda ao JSX que foi passado. ```js render(, container); @@ -13,21 +13,21 @@ render(, container, callback); -## Rendering the root component {/*rendering-the-root-component*/} +## Renderizando o componente *root* {/*rendering-the-root-component*/} -To call `render`, you need a piece of JSX and a DOM container: +Para chamar `render`, você precisa de um JSX e um contêiner DOM: -The UI you want to render. +A UI que você deseja renderizar. -The DOM node you want to render your UI into. The container itself isn’t modified, only its children are. +O nó do DOM no qual você deseja renderizar sua UI. O contêiner em si não é modificado, apenas seus filhos são. @@ -38,7 +38,7 @@ render(, container); -In apps fully built with React, you will do this once at the top level of your app--to render the "root" component. +Em aplicativos totalmente construídos com React, você fará isso uma vez no nível superior do seu aplicativo - para renderizar o componente "root". @@ -52,7 +52,7 @@ render(, document.getElementById('root')); ```js App.js export default function App() { - return

Hello, world!

; + return

Olá, mundo!

; } ``` @@ -60,42 +60,42 @@ export default function App() {
-## Rendering multiple roots {/*rendering-multiple-roots*/} +## Renderizando vários *root* {/*rendering-multiple-roots*/} -If you use ["sprinkles"](/learn/add-react-to-a-website) of React here and there, call `render` for each top-level piece of UI managed by React. +Se você usar ["pedaços"](/learn/add-react-to-a-website) do React aqui e ali, chame `render` para cada parte de nível superior da UI gerenciada pelo React. ```html public/index.html - +
-

This paragraph is not rendered by React (open index.html to verify).

-
+

Este parágrafo não é renderizado pelo React (abra index.html para verificar).

+
``` ```js index.js active import './styles.css'; import { render } from 'react-dom'; -import { Comments, Navigation } from './Components.js'; +import { Comentarios, Navegacao } from './Components.js'; render( - , - document.getElementById('navigation') + , + document.getElementById('navegacao') ); render( - , - document.getElementById('comments') + , + document.getElementById('comentarios') ); ``` ```js Components.js -export function Navigation() { +export function Navegacao() { return (
    Home - About + Sobre
); } @@ -108,19 +108,19 @@ function NavLink({ href, children }) { ); } -export function Comments() { +export function Comentarios() { return ( <> -

Comments

- - +

Comentarios

+ + ); } -function Comment({ text, author }) { +function Comentario({ texto, autor }) { return ( -

{text} — {author}

+

{texto} — {autor}

); } ``` @@ -134,9 +134,9 @@ nav ul li { display: inline-block; margin-right: 20px; }
-## Updating the rendered tree {/*updating-the-rendered-tree*/} +## Atualizando a árvore renderizada {/*updating-the-rendered-tree*/} -You can call `render` more than once on the same DOM node. As long as the component tree structure matches up with what was previously rendered, React will [preserve the state](/learn/preserving-and-resetting-state). Notice how you can type in the input: +Você pode chamar `render` mais de uma vez no mesmo nó do DOM. Contanto que a estrutura da árvore de componentes corresponda ao que foi renderizado anteriormente, o React [preservará o estado](/learn/preserving-and-resetting-state). Observe como você pode digitar a entrada: @@ -147,7 +147,7 @@ import App from './App.js'; let i = 0; setInterval(() => { render( - , + , document.getElementById('root') ); i++; @@ -155,11 +155,11 @@ setInterval(() => { ``` ```js App.js -export default function App({counter}) { +export default function App({contador}) { return ( <> -

Hello, world! {counter}

- +

Olá, mundo! {contador}

+ ); } @@ -167,22 +167,22 @@ export default function App({counter}) { -You can destroy the rendered tree with [`unmountComponentAtNode()`](TODO). +Você pode destruir a árvore renderizada com [`unmountComponentAtNode()`](TODO).
-## When not to use it {/*when-not-to-use-it*/} +## Quando não usar {/*when-not-to-use-it*/} -* If your app uses server rendering and generates HTML on the server, use [`hydrate`](TODO) instead of `render`. -* If your app is fully built with React, you shouldn't need to use `render` more than once. If you want to render something in a different part of the DOM tree (for example, a modal or a tooltip), use [`createPortal`](TODO) instead. +* Se seu aplicativo usa renderização de servidor (SSR) e gera HTML no servidor, use [`hydrate`](TODO) em vez de `render`. +* Se seu aplicativo for totalmente construído com React, você não precisará usar `render` mais de uma vez. Se você quiser renderizar algo em uma parte diferente da árvore DOM (por exemplo, um modal ou uma dica de ferramenta), use [`createPortal`](TODO).
-## Behavior in detail {/*behavior-in-detail*/} +## Comportamento em detalhes {/*behavior-in-detail*/} -The first time you call `render`, any existing DOM elements inside `container` are replaced. If you call `render` again, React will update the DOM as necessary to reflect the latest JSX. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` repeatedly is similar to calling `setState`--in both cases, React avoids unnecessary DOM updates. +Na primeira vez que você chama `render`, todos os elementos DOM existentes dentro de `container` são substituídos. Se você chamar `render` novamente, o React atualizará o DOM conforme necessário para refletir o JSX mais recente. O React decidirá quais partes do DOM podem ser reutilizadas e quais precisam ser recriadas ["combinando"](/learn/preserving-and-resetting-state) com a árvore renderizada anteriormente. Chamar `render` repetidamente é semelhante a chamar `setState` -- em ambos os casos, o React evita atualizações desnecessárias do DOM. -You can pass a callback as the third argument. React will call it after your component is in the DOM. +Você pode passar um *callback* como o terceiro argumento. O React irá chamá-lo depois que seu componente estiver no DOM. -If you render ``, and `MyComponent` is a class component, `render` will return the instance of that class. In all other cases, it will return `null`. +Se você renderizar ``, e `MyComponent` for um componente de classe, `render` retornará a instância dessa classe. Em todos os outros casos, retornará `null`. From fc15036e3023915ce7065f307e5243fce92f9be9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Fernandes?= Date: Wed, 2 Mar 2022 17:44:22 -0300 Subject: [PATCH 2/4] =?UTF-8?q?nomes=20de=20componentes/atributos/props=20?= =?UTF-8?q?em=20ingl=C3=AAs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- beta/src/pages/reference/render.md | 32 +++++++++++++++--------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/reference/render.md index afe2444ab..cd221a75e 100644 --- a/beta/src/pages/reference/render.md +++ b/beta/src/pages/reference/render.md @@ -67,31 +67,31 @@ Se você usar ["pedaços"](/learn/add-react-to-a-website) do React aqui e ali, c ```html public/index.html - +

Este parágrafo não é renderizado pelo React (abra index.html para verificar).

-
+
``` ```js index.js active import './styles.css'; import { render } from 'react-dom'; -import { Comentarios, Navegacao } from './Components.js'; +import { Comments, Navigation } from './Components.js'; render( - , - document.getElementById('navegacao') + , + document.getElementById('navigation') ); render( - , - document.getElementById('comentarios') + , + document.getElementById('comments') ); ``` ```js Components.js -export function Navegacao() { +export function Navigation() { return (
    Home @@ -108,19 +108,19 @@ function NavLink({ href, children }) { ); } -export function Comentarios() { +export function Comments() { return ( <>

    Comentarios

    - - + + ); } -function Comentario({ texto, autor }) { +function Comentario({ text, author }) { return ( -

    {texto} — {autor}

    +

    {text} — {author}

    ); } ``` @@ -147,7 +147,7 @@ import App from './App.js'; let i = 0; setInterval(() => { render( - , + , document.getElementById('root') ); i++; @@ -155,10 +155,10 @@ setInterval(() => { ``` ```js App.js -export default function App({contador}) { +export default function App({counter}) { return ( <> -

    Olá, mundo! {contador}

    +

    Olá, mundo! {counter}

    ); From 250899e2af023f68a09fc00754e5874a1ac8c0b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Fernandes?= Date: Thu, 3 Mar 2022 12:44:55 -0300 Subject: [PATCH 3/4] reordering render.md to pages/apis --- beta/src/pages/{reference => apis}/render.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename beta/src/pages/{reference => apis}/render.md (100%) diff --git a/beta/src/pages/reference/render.md b/beta/src/pages/apis/render.md similarity index 100% rename from beta/src/pages/reference/render.md rename to beta/src/pages/apis/render.md From 09afb95f48cfcf301033d0efd1a335ec27972456 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Fernandes?= Date: Thu, 3 Mar 2022 13:22:46 -0300 Subject: [PATCH 4/4] updated render.md translation --- beta/src/pages/apis/render.md | 113 +++++++++++++++++++++------------- 1 file changed, 69 insertions(+), 44 deletions(-) diff --git a/beta/src/pages/apis/render.md b/beta/src/pages/apis/render.md index cd221a75e..9226a4897 100644 --- a/beta/src/pages/apis/render.md +++ b/beta/src/pages/apis/render.md @@ -1,44 +1,40 @@ --- -title: render() +title: render --- -`render` renderiza um [JSX](/learn/writing-markup-with-jsx) ("elemento React") em um nó de contêiner DOM do navegador. Ele instrui o React a alterar o DOM dentro do `container` para que ele corresponda ao JSX que foi passado. +`render` renderiza um pedaço de [JSX](/learn/writing-markup-with-jsx) ("nó React") em um nó do DOM do navegador. ```js -render(, container); -render(, container, callback); +render(reactNode, domNode, callback?) ``` -## Renderizando o componente *root* {/*rendering-the-root-component*/} +- [Uso](#usage) + - [Renderizando o componente raiz](#rendering-the-root-component) + - [Renderizando várias raízes](#rendering-multiple-roots) + - [Atualizando a árvore renderizada](#updating-the-rendered-tree) +- [Referência](#reference) + - [`render(reactNode, domNode, callback?)`](#render) -Para chamar `render`, você precisa de um JSX e um contêiner DOM: - - - - - -A UI que você deseja renderizar. - - +--- - +## Uso {/*usage*/} -O nó do DOM no qual você deseja renderizar sua UI. O contêiner em si não é modificado, apenas seus filhos são. +Chame `render` para exibir um componente React dentro de um nó do DOM do navegador. - +```js [[1, 4, ""], [2, 4, "document.getElementById('root')"]] +import {render} from 'react-dom'; +import App from './App.js'; -```js [[1, 2, ""], [2, 2, "container"]] -const container = document.getElementById('root'); -render(, container); -``` +render(, document.getElementById('root')); +```` - +### Renderizando o componente raiz {/*rendering-the-root-component*/} -Em aplicativos totalmente construídos com React, você fará isso uma vez no nível superior do seu aplicativo - para renderizar o componente "root". +Em aplicativos totalmente construídos com React, **você normalmente só fará isso uma vez na inicialização** -- para renderizar o componente "raiz". @@ -58,11 +54,13 @@ export default function App() { -
    +Normalmente você não precisa chamar `render` novamente ou chamá-lo em mais lugares. A partir deste ponto, o React estará gerenciando o DOM de sua aplicação. Se você deseja atualizar a interface do usuário, seus componentes podem fazer isso [usando o estado](/apis/usestate). + +--- -## Renderizando vários *root* {/*rendering-multiple-roots*/} +### Renderizando várias raízes {/*rendering-multiple-roots*/} -Se você usar ["pedaços"](/learn/add-react-to-a-website) do React aqui e ali, chame `render` para cada parte de nível superior da UI gerenciada pelo React. +Se sua página [não for totalmente construída com React](/learn/add-react-to-a-website), chame `render` para cada parte da interface de usuário de nível superior gerenciada pelo React. @@ -95,7 +93,7 @@ export function Navigation() { return (
      Home - Sobre + Sobre
    ); } @@ -111,14 +109,14 @@ function NavLink({ href, children }) { export function Comments() { return ( <> -

    Comentarios

    +

    Comentários

    ); } -function Comentario({ text, author }) { +function Comment({ text, author }) { return (

    {text} — {author}

    ); @@ -132,16 +130,19 @@ nav ul li { display: inline-block; margin-right: 20px; }     -
    +Você pode destruir as árvores renderizadas com [`unmountComponentAtNode()`](TODO). -## Atualizando a árvore renderizada {/*updating-the-rendered-tree*/} +--- -Você pode chamar `render` mais de uma vez no mesmo nó do DOM. Contanto que a estrutura da árvore de componentes corresponda ao que foi renderizado anteriormente, o React [preservará o estado](/learn/preserving-and-resetting-state). Observe como você pode digitar a entrada: +### Atualizando a árvore renderizada {/*updating-the-rendered-tree*/} + +Você pode chamar `render` mais de uma vez no mesmo nó do DOM. Contanto que a estrutura da árvore de componentes corresponda ao que foi renderizado anteriormente, o React [preservará o estado](/learn/preserving-and-resetting-state). Observe como você pode digitar a entrada, o que significa que as atualizações de chamadas `render` repetidas a cada segundo neste exemplo não são destrutivas: ```js index.js active import {render} from 'react-dom'; +import './styles.css'; import App from './App.js'; let i = 0; @@ -158,8 +159,8 @@ setInterval(() => { export default function App({counter}) { return ( <> -

    Olá, mundo! {counter}

    - +

    Olá mundo! {counter}

    + ); } @@ -167,22 +168,46 @@ export default function App({counter}) {     -Você pode destruir a árvore renderizada com [`unmountComponentAtNode()`](TODO). +É incomum chamar `render` várias vezes. Normalmente, você [atualiza o estado](/apis/usestate) dentro de um dos componentes. -
    +--- -## Quando não usar {/*when-not-to-use-it*/} +## Referência {/*reference*/} -* Se seu aplicativo usa renderização de servidor (SSR) e gera HTML no servidor, use [`hydrate`](TODO) em vez de `render`. -* Se seu aplicativo for totalmente construído com React, você não precisará usar `render` mais de uma vez. Se você quiser renderizar algo em uma parte diferente da árvore DOM (por exemplo, um modal ou uma dica de ferramenta), use [`createPortal`](TODO). +### `render(reactNode, domNode, callback?)` {/*render*/} -
    +Chame `render` para exibir um componente React dentro de um elemento DOM do navegador. +```js +const domNode = document.getElementById('root'); +render(, domNode); +``` + +O React exibirá `` no `domNode` e assumirá o gerenciamento do DOM dentro dele. + +Um aplicativo totalmente construído com React geralmente terá apenas uma chamada `render` com seu componente raiz. Uma página que usa "pedaços" de React para partes da página pode ter quantas chamadas `render` quantas forem necessárias. + +[Veja exemplos acima.](#usage) + +#### Parâmetros {/*parameters*/} + +* `reactNode`: Um *nó React* que você deseja exibir. Isso geralmente será um pedaço de JSX como ``, mas você também pode passar um elemento React construído com [`createElement()`](/TODO), uma string, um número, `null` ou `undefined`. -## Comportamento em detalhes {/*behavior-in-detail*/} +* `domNode`: Um [elemento DOM](https://developer.mozilla.org/en-US/docs/Web/API/Element). O React exibirá o `reactNode` que você passar dentro deste elemento DOM. A partir deste momento, o React irá gerenciar o DOM dentro do `domNode` e atualizá-lo quando sua árvore do React mudar. -Na primeira vez que você chama `render`, todos os elementos DOM existentes dentro de `container` são substituídos. Se você chamar `render` novamente, o React atualizará o DOM conforme necessário para refletir o JSX mais recente. O React decidirá quais partes do DOM podem ser reutilizadas e quais precisam ser recriadas ["combinando"](/learn/preserving-and-resetting-state) com a árvore renderizada anteriormente. Chamar `render` repetidamente é semelhante a chamar `setState` -- em ambos os casos, o React evita atualizações desnecessárias do DOM. +* **opcional** `callback`: Uma função. Se aprovado, o React irá chamá-lo depois que seu componente for colocado no DOM. -Você pode passar um *callback* como o terceiro argumento. O React irá chamá-lo depois que seu componente estiver no DOM. -Se você renderizar ``, e `MyComponent` for um componente de classe, `render` retornará a instância dessa classe. Em todos os outros casos, retornará `null`. +#### Retornos {/*returns*/} + +`render` geralmente retorna `null`. No entanto, se o `reactNode` que você passar for um *componente de classe*, ele retornará uma instância desse componente. + +#### Ressalvas {/*caveats*/} + +* A primeira vez que você chamar `render`, o React irá limpar todo o conteúdo HTML existente dentro do `domNode` antes de renderizar o componente React nele. Se o seu `domNode` contém HTML gerado pelo React no servidor ou durante a compilação, use [`hydrate()`](/TODO), que anexa os manipuladores de eventos ao HTML existente. + +* Se você chamar `render` no mesmo `domNode` mais de uma vez, o React irá atualizar o DOM conforme necessário para refletir o último JSX que você passou. O React decidirá quais partes do DOM podem ser reutilizadas e quais precisam ser recriadas ["combinando"](/learn/preserving-and-resetting-state) com a árvore renderizada anteriormente. Chamar `render` no mesmo `domNode` novamente é semelhante a chamar a função [`set`](/apis/usestate#setstate) no componente raiz: React evita atualizações desnecessárias do DOM. + +* Se seu aplicativo for totalmente construído com React, você provavelmente terá apenas uma chamada `render` em seu aplicativo. (Se você usa um framework, ele pode fazer essa chamada para você.) Quando você deseja renderizar uma parte do JSX em uma parte diferente da árvore DOM que não é filho do seu componente (por exemplo, um modal ou um dica de ferramenta), use [`createPortal`](TODO) em vez de `render`. + +---