From e415901ced16315e4eb7ce255f8a51fe9c4e3da6 Mon Sep 17 00:00:00 2001 From: Nivaldo Farias Date: Mon, 20 Jan 2025 16:53:25 -0300 Subject: [PATCH] Translate `hydrate.md` to pt-br --- src/content/reference/react-dom/hydrate.md | 78 +++++++++++----------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md index a005abf14..0b3c31f20 100644 --- a/src/content/reference/react-dom/hydrate.md +++ b/src/content/reference/react-dom/hydrate.md @@ -4,15 +4,15 @@ title: hydrate -This API will be removed in a future major version of React. +Esta API será removida em uma futura versão principal do React. -In React 18, `hydrate` was replaced by [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Using `hydrate` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis) +No React 18, `hydrate` foi substituído por [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Usar `hydrate` no React 18 avisará que seu aplicativo se comportará como se estivesse rodando React 17. Saiba mais [aqui.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis) -`hydrate` lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`](/reference/react-dom/server) in React 17 and below. +`hydrate` permite que você exiba componentes React dentro de um nó DOM do navegador cujo conteúdo HTML foi gerado anteriormente por [`react-dom/server`](/reference/react-dom/server) no React 17 e versões anteriores. ```js hydrate(reactNode, domNode, callback?) @@ -28,7 +28,7 @@ hydrate(reactNode, domNode, callback?) ### `hydrate(reactNode, domNode, callback?)` {/*hydrate*/} -Call `hydrate` in React 17 and below to “attach” React to existing HTML that was already rendered by React in a server environment. +Chame `hydrate` no React 17 e versões anteriores para "anexar" o React ao HTML existente que já foi renderizado pelo React em um ambiente de servidor. ```js import { hydrate } from 'react-dom'; @@ -36,33 +36,33 @@ import { hydrate } from 'react-dom'; hydrate(reactNode, domNode); ``` -React will attach to the HTML that exists inside the `domNode`, and take over managing the DOM inside it. An app fully built with React will usually only have one `hydrate` call with its root component. +O React se anexará ao HTML que existe dentro do `domNode` e assumirá o gerenciamento do DOM dentro dele. Um aplicativo completamente construído com React geralmente terá apenas uma chamada `hydrate` com seu componente raiz. -[See more examples below.](#usage) +[Veja mais exemplos abaixo.](#usage) #### Parameters {/*parameters*/} -* `reactNode`: The "React node" used to render the existing HTML. This will usually be a piece of JSX like `` which was rendered with a `ReactDOM Server` method such as `renderToString()` in React 17. +* `reactNode`: O "nó React" usado para renderizar o HTML existente. Isso geralmente será um trecho de JSX como ``, que foi renderizado com um método do `ReactDOM Server`, como `renderToString()` no React 17. -* `domNode`: A [DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that was rendered as the root element on the server. +* `domNode`: Um [elemento DOM](https://developer.mozilla.org/en-US/docs/Web/API/Element) que foi renderizado como o elemento raiz no servidor. -* **optional**: `callback`: A function. If passed, React will call it after your component is hydrated. +* **opcional**: `callback`: Uma função. Se passada, o React a chamará após seu componente ser hidratado. #### Returns {/*returns*/} -`hydrate` returns null. +`hydrate` retorna null. #### Caveats {/*caveats*/} -* `hydrate` expects the rendered content to be identical with the server-rendered content. React can patch up differences in text content, but you should treat mismatches as bugs and fix them. -* In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive. -* You'll likely have only one `hydrate` call in your app. If you use a framework, it might do this call for you. -* If your app is client-rendered with no HTML rendered already, using `hydrate()` is not supported. Use [render()](/reference/react-dom/render) (for React 17 and below) or [createRoot()](/reference/react-dom/client/createRoot) (for React 18+) instead. +* `hydrate` espera que o conteúdo renderizado seja idêntico ao conteúdo renderizado no servidor. O React pode corrigir diferenças no conteúdo de texto, mas você deve tratar discrepâncias como erros e corrigi-las. +* No modo de desenvolvimento, o React avisa sobre discrepâncias durante a hidratação. Não há garantias de que as diferenças de atributo serão corrigidas em caso de discrepâncias. Isso é importante por razões de desempenho, pois na maioria dos aplicativos, discrepâncias são raras, e assim validar toda a marcação seria proibitivamente caro. +* Você provavelmente terá apenas uma chamada `hydrate` em seu aplicativo. Se você usar um framework, ele pode fazer essa chamada por você. +* Se seu aplicativo for renderizado no cliente sem nenhum HTML já renderizado, usar `hydrate()` não é suportado. Use [render()](/reference/react-dom/render) (para React 17 e versões anteriores) ou [createRoot()](/reference/react-dom/client/createRoot) (para React 18+) em vez disso. --- ## Usage {/*usage*/} -Call `hydrate` to attach a React component into a server-rendered browser DOM node. +Chame `hydrate` para anexar um componente React em um nó DOM do navegador renderizado no servidor. ```js [[1, 3, ""], [2, 3, "document.getElementById('root')"]] import { hydrate } from 'react-dom'; @@ -70,22 +70,22 @@ import { hydrate } from 'react-dom'; hydrate(, document.getElementById('root')); ``` -Using `hydrate()` to render a client-only app (an app without server-rendered HTML) is not supported. Use [`render()`](/reference/react-dom/render) (in React 17 and below) or [`createRoot()`](/reference/react-dom/client/createRoot) (in React 18+) instead. +Usar `hydrate()` para renderizar um aplicativo apenas do lado do cliente (um aplicativo sem HTML renderizado no servidor) não é suportado. Use [`render()`](/reference/react-dom/render) (no React 17 e versões anteriores) ou [`createRoot()`](/reference/react-dom/client/createRoot) (no React 18+) em vez disso. ### Hydrating server-rendered HTML {/*hydrating-server-rendered-html*/} -In React, "hydration" is how React "attaches" to existing HTML that was already rendered by React in a server environment. During hydration, React will attempt to attach event listeners to the existing markup and take over rendering the app on the client. +No React, "hidratação" é como o React "anexa" ao HTML existente que já foi renderizado pelo React em um ambiente de servidor. Durante a hidratação, o React tentará anexar manipuladores de eventos à marcação existente e assumir a renderização do aplicativo no cliente. -In apps fully built with React, **you will usually only hydrate one "root", once at startup for your entire app**. +Em aplicativos completamente construídos com React, **você geralmente hidratará apenas um "raiz", uma vez na inicialização de todo o seu aplicativo**. ```html public/index.html -

Hello, world!

+

Olá, mundo!

``` ```js src/index.js active @@ -98,32 +98,32 @@ hydrate(, document.getElementById('root')); ```js src/App.js export default function App() { - return

Hello, world!

; + return

Olá, mundo!

; } ``` -Usually you shouldn't need to call `hydrate` again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will [use state.](/reference/react/useState) +Normalmente você não deve precisar chamar `hydrate` novamente ou chamá-lo em mais lugares. A partir desse ponto, o React estará gerenciando o DOM da sua aplicação. Para atualizar a interface do usuário, seus componentes [usarão estado.](/reference/react/useState) -For more information on hydration, see the docs for [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) +Para mais informações sobre hidratação, veja a documentação para [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) --- ### Suppressing unavoidable hydration mismatch errors {/*suppressing-unavoidable-hydration-mismatch-errors*/} -If a single element’s attribute or text content is unavoidably different between the server and the client (for example, a timestamp), you may silence the hydration mismatch warning. +Se o atributo ou conteúdo de texto de um único elemento for inevitavelmente diferente entre o servidor e o cliente (por exemplo, um timestamp), você pode silenciar o aviso de discrepância de hidratação. -To silence hydration warnings on an element, add `suppressHydrationWarning={true}`: +Para silenciar avisos de hidratação em um elemento, adicione `suppressHydrationWarning={true}`: ```html public/index.html -

Current Date: 01/01/2020

+

Data Atual: 01/01/2020

``` ```js src/index.js @@ -138,7 +138,7 @@ hydrate(, document.getElementById('root')); export default function App() { return (

- Current Date: {new Date().toLocaleDateString()} + Data Atual: {new Date().toLocaleDateString()}

); } @@ -146,22 +146,22 @@ export default function App() { -This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. Unless it’s text content, React still won’t attempt to patch it up, so it may remain inconsistent until future updates. +Isso funciona apenas um nível profundo e é destinado a ser uma válvula de escape. Não abuse disso. A menos que seja conteúdo de texto, o React ainda não tentará corrigi-lo, então pode permanecer inconsistente até futuras atualizações. --- ### Handling different client and server content {/*handling-different-client-and-server-content*/} -If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a [state variable](/reference/react/useState) like `isClient`, which you can set to `true` in an [Effect](/reference/react/useEffect): +Se você precisa intencionalmente renderizar algo diferente no servidor e no cliente, pode fazer uma renderização em duas passagens. Componentes que renderizam algo diferente no cliente podem ler uma [variável de estado](/reference/react/useState) como `isClient`, que você pode definir como `true` em um [Effect](/reference/react/useEffect): ```html public/index.html -

Is Server

+

É Servidor

``` ```js src/index.js @@ -184,7 +184,7 @@ export default function App() { return (

- {isClient ? 'Is Client' : 'Is Server'} + {isClient ? 'É Cliente' : 'É Servidor'}

); } @@ -192,10 +192,10 @@ export default function App() { -This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration. +Dessa forma, a passagem de renderização inicial renderizará o mesmo conteúdo que o servidor, evitando discrepâncias, mas uma passagem adicional ocorrerá de forma síncrona logo após a hidratação. -This approach makes hydration slower because your components have to render twice. Be mindful of the user experience on slow connections. The JavaScript code may load significantly later than the initial HTML render, so rendering a different UI immediately after hydration may feel jarring to the user. +Essa abordagem torna a hidratação mais lenta porque seus componentes precisam renderizar duas vezes. Esteja ciente da experiência do usuário em conexões lentas. O código JavaScript pode carregar significativamente mais tarde do que a renderização HTML inicial, então renderizar uma interface diferente imediatamente após a hidratação pode parecer abrupto para o usuário. - + \ No newline at end of file