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`.