From f06a10f2c54a70b89f86721fbeeb560d84524da8 Mon Sep 17 00:00:00 2001 From: Nivaldo Farias Date: Thu, 20 Mar 2025 10:45:07 -0300 Subject: [PATCH] Translate `react-19-upgrade-guide.md` to Portuguese --- .../blog/2024/04/25/react-19-upgrade-guide.md | 384 +++++++++--------- 1 file changed, 189 insertions(+), 195 deletions(-) diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md index fbc4e378c..a9350c497 100644 --- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md +++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md @@ -1,140 +1,136 @@ --- -title: "React 19 Upgrade Guide" +title: "Guia de Upgrade para React 19" author: Ricky Hanlon -date: 2024/04/25 -description: The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible and we don't expect the changes to impact most apps. In this post, we will guide you through the steps for upgrading apps and libraries to React 19. +date: 25/04/2024 +description: As melhorias adicionadas ao React 19 exigem algumas mudanças interruptivas, mas trabalhamos para tornar o upgrade o mais tranquilo possível e não esperamos que as mudanças impactem a maioria dos apps. Nesta publicação, vamos guiá-lo pelas etapas de atualização de apps e bibliotecas para o React 19. --- -April 25, 2024 by [Ricky Hanlon](https://twitter.com/rickhanlonii) +25 de abril de 2024 por [Ricky Hanlon](https://twitter.com/rickhanlonii) --- - -The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible, and we don't expect the changes to impact most apps. +As melhorias adicionadas ao React 19 exigem algumas mudanças interruptivas, mas trabalhamos para tornar o upgrade o mais tranquilo possível, e não esperamos que as mudanças impactem a maioria dos apps. -#### React 18.3 has also been published {/*react-18-3*/} +#### React 18.3 também foi publicado {/*react-18-3*/} -To help make the upgrade to React 19 easier, we've published a `react@18.3` release that is identical to 18.2 but adds warnings for deprecated APIs and other changes that are needed for React 19. +Para ajudar a facilitar o upgrade para React 19, publicamos uma versão `react@18.3` que é idêntica à 18.2, mas adiciona avisos para APIs descontinuadas e outras mudanças que são necessárias para o React 19. -We recommend upgrading to React 18.3 first to help identify any issues before upgrading to React 19. +Recomendamos atualizar para React 18.3 primeiro para ajudar a identificar quaisquer problemas antes de atualizar para React 19. -For a list of changes in 18.3 see the [Release Notes](https://github.com/facebook/react/blob/main/CHANGELOG.md). +Para uma lista de mudanças no 18.3, consulte as [Notas de Lançamento](https://github.com/facebook/react/blob/main/CHANGELOG.md). -In this post, we will guide you through the steps for upgrading to React 19: +Nesta publicação, vamos guiá-lo pelas etapas de atualização para React 19: -- [Installing](#installing) +- [Instalando](#installing) - [Codemods](#codemods) - [Breaking changes](#breaking-changes) -- [New deprecations](#new-deprecations) -- [Notable changes](#notable-changes) -- [TypeScript changes](#typescript-changes) +- [Novas descontinuações](#new-deprecations) +- [Mudanças notáveis](#notable-changes) +- [Mudanças no TypeScript](#typescript-changes) - [Changelog](#changelog) -If you'd like to help us test React 19, follow the steps in this upgrade guide and [report any issues](https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D) you encounter. For a list of new features added to React 19, see the [React 19 release post](/blog/2024/12/05/react-19). +Se você gostaria de nos ajudar a testar o React 19, siga as etapas neste guia de upgrade e [relate quaisquer problemas](https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D) que encontrar. Para uma lista de novos recursos adicionados ao React 19, consulte a [publicação de lançamento do React 19](/blog/2024/12/05/react-19). --- -## Installing {/*installing*/} +## Instalando {/*installing*/} -#### New JSX Transform is now required {/*new-jsx-transform-is-now-required*/} +#### Nova Transformação JSX agora é obrigatória {/*new-jsx-transform-is-now-required*/} -We introduced a [new JSX transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) in 2020 to improve bundle size and use JSX without importing React. In React 19, we're adding additional improvements like using ref as a prop and JSX speed improvements that require the new transform. +Apresentamos uma [nova transformação JSX](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) em 2020 para melhorar o tamanho do bundle e usar JSX sem importar o React. No React 19, estamos adicionando melhorias adicionais, como usar ref como uma prop e melhorias de velocidade do JSX que exigem a nova transformação. -If the new transform is not enabled, you will see this warning: +Se a nova transformação não estiver habilitada, você verá este aviso: -Your app (or one of its dependencies) is using an outdated JSX transform. Update to the modern JSX transform for faster performance: https://react.dev/link/new-jsx-transform +Seu app (ou uma de suas dependências) está usando uma transformação JSX desatualizada. Atualize para a transformação JSX moderna para um desempenho mais rápido: https://react.dev/link/new-jsx-transform - -We expect most apps will not be affected since the transform is enabled in most environments already. For manual instructions on how to upgrade, please see the [announcement post](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html). +Esperamos que a maioria dos apps não seja afetada, pois a transformação já está habilitada na maioria dos ambientes. Para obter instruções manuais sobre como atualizar, consulte a [postagem do anúncio](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html). - -To install the latest version of React and React DOM: +Para instalar a versão mais recente do React e React DOM: ```bash npm install --save-exact react@^19.0.0 react-dom@^19.0.0 ``` -Or, if you're using Yarn: +Ou, se você estiver usando Yarn: ```bash yarn add --exact react@^19.0.0 react-dom@^19.0.0 ``` -If you're using TypeScript, you also need to update the types. +Se você estiver usando TypeScript, também precisará atualizar os tipos. ```bash npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0 ``` -Or, if you're using Yarn: +Ou, se você estiver usando Yarn: ```bash yarn add --exact @types/react@^19.0.0 @types/react-dom@^19.0.0 ``` -We're also including a codemod for the most common replacements. See [TypeScript changes](#typescript-changes) below. +Também estamos incluindo um codemod para as substituições mais comuns. Consulte [Mudanças no TypeScript](#typescript-changes) abaixo. ## Codemods {/*codemods*/} -To help with the upgrade, we've worked with the team at [codemod.com](https://codemod.com) to publish codemods that will automatically update your code to many of the new APIs and patterns in React 19. - -All codemods are available in the [`react-codemod` repo](https://github.com/reactjs/react-codemod) and the Codemod team have joined in helping maintain the codemods. To run these codemods, we recommend using the `codemod` command instead of the `react-codemod` because it runs faster, handles more complex code migrations, and provides better support for TypeScript. +Para auxiliar na atualização, trabalhamos com a equipe da [codemod.com](https://codemod.com) para publicar codemods que atualizarão automaticamente seu código para muitas das novas APIs e padrões no React 19. +Todos os codemods estão disponíveis no repositório [`react-codemod`](https://github.com/reactjs/react-codemod) e a equipe do Codemod se juntou para ajudar a manter os codemods. Para executar esses codemods, recomendamos usar o comando `codemod` em vez de `react-codemod` porque ele é executado mais rápido, lida com migrações de código mais complexas e fornece melhor suporte para TypeScript. -#### Run all React 19 codemods {/*run-all-react-19-codemods*/} +#### Execute todos os codemods do React 19 {/*run-all-react-19-codemods*/} -Run all codemods listed in this guide with the React 19 `codemod` recipe: +Execute todos os codemods listados neste guia com a receita do `codemod` do React 19: ```bash npx codemod@latest react/19/migration-recipe ``` -This will run the following codemods from `react-codemod`: +Isso executará os seguintes codemods do `react-codemod`: - [`replace-reactdom-render`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-reactdom-render) - [`replace-string-ref`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-string-ref) - [`replace-act-import`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-act-import) - [`replace-use-form-state`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state) - [`prop-types-typescript`](https://codemod.com/registry/react-prop-types-typescript) -This does not include the TypeScript changes. See [TypeScript changes](#typescript-changes) below. +Isso não inclui as mudanças do TypeScript. Consulte [Mudanças no TypeScript](#typescript-changes) abaixo. -Changes that include a codemod include the command below. +Mudanças que incluem um codemod incluem o comando abaixo. -For a list of all available codemods, see the [`react-codemod` repo](https://github.com/reactjs/react-codemod). +Para obter uma lista de todos os codemods disponíveis, consulte o repositório [`react-codemod`](https://github.com/reactjs/react-codemod). ## Breaking changes {/*breaking-changes*/} -### Errors in render are not re-thrown {/*errors-in-render-are-not-re-thrown*/} +### Erros em renderizar não são relançados {/*errors-in-render-are-not-re-thrown*/} -In previous versions of React, errors thrown during render were caught and rethrown. In DEV, we would also log to `console.error`, resulting in duplicate error logs. +Em versões anteriores do React, erros lançados durante a renderização eram capturados e relançados. Em DEV, também registrávamos no `console.error`, resultando em logs de erros duplicados. -In React 19, we've [improved how errors are handled](/blog/2024/04/25/react-19#error-handling) to reduce duplication by not re-throwing: +No React 19, [melhoramos a forma como os erros são tratados](/blog/2024/04/25/react-19#error-handling) para reduzir a duplicação, não relançando: -- **Uncaught Errors**: Errors that are not caught by an Error Boundary are reported to `window.reportError`. -- **Caught Errors**: Errors that are caught by an Error Boundary are reported to `console.error`. +- **Uncaught Errors**: Erros que não são capturados por um Error Boundary são relatados para `window.reportError`. +- **Caught Errors**: Erros que são capturados por um Error Boundary são relatados para `console.error`. -This change should not impact most apps, but if your production error reporting relies on errors being re-thrown, you may need to update your error handling. To support this, we've added new methods to `createRoot` and `hydrateRoot` for custom error handling: +Essa mudança não deve impactar a maioria dos apps, mas se seu relatório de erros de produção depende de erros que sejam relançados, talvez seja necessário atualizar o tratamento de erros. Para suportar isso, adicionamos novos métodos a `createRoot` e `hydrateRoot` para tratamento de erros personalizado: ```js [[1, 2, "onUncaughtError"], [2, 5, "onCaughtError"]] const root = createRoot(container, { @@ -147,20 +143,19 @@ const root = createRoot(container, { }); ``` -For more info, see the docs for [`createRoot`](https://react.dev/reference/react-dom/client/createRoot) and [`hydrateRoot`](https://react.dev/reference/react-dom/client/hydrateRoot). - +Para obter mais informações, consulte a documentação de [`createRoot`](https://react.dev/reference/react-dom/client/createRoot) e [`hydrateRoot`](https://react.dev/reference/react-dom/client/hydrateRoot). -### Removed deprecated React APIs {/*removed-deprecated-react-apis*/} +### APIs React descontinuadas removidas {/*removed-deprecated-react-apis*/} -#### Removed: `propTypes` and `defaultProps` for functions {/*removed-proptypes-and-defaultprops*/} -`PropTypes` were deprecated in [April 2017 (v15.5.0)](https://legacy.reactjs.org/blog/2017/04/07/react-v15.5.0.html#new-deprecation-warnings). +#### Removido: `propTypes` e `defaultProps` para funções {/*removed-proptypes-and-defaultprops*/} +`PropTypes` foram descontinuados em [abril de 2017 (v15.5.0)](https://legacy.reactjs.org/blog/2017/04/07/react-v15.5.0.html#new-deprecation-warnings). -In React 19, we're removing the `propType` checks from the React package, and using them will be silently ignored. If you're using `propTypes`, we recommend migrating to TypeScript or another type-checking solution. +No React 19, estamos removendo as verificações `propType` do pacote React, e usá-las será silenciosamente ignorado. Se você estiver usando `propTypes`, recomendamos migrar para TypeScript ou outra solução de verificação de tipos. -We're also removing `defaultProps` from function components in place of ES6 default parameters. Class components will continue to support `defaultProps` since there is no ES6 alternative. +Também estamos removendo `defaultProps` de componentes de função no lugar dos parâmetros padrão ES6. Componentes de classe continuarão a suportar `defaultProps` , pois não há alternativa ES6. ```js -// Before +// Antes import PropTypes from 'prop-types'; function Heading({text}) { @@ -174,7 +169,7 @@ Heading.defaultProps = { }; ``` ```ts -// After +// Depois interface Props { text?: string; } @@ -185,7 +180,7 @@ function Heading({text = 'Hello, world!'}: Props) { -Codemod `propTypes` to TypeScript with: +Codemod `propTypes` para TypeScript com: ```bash npx codemod@latest react/prop-types-typescript @@ -193,16 +188,16 @@ npx codemod@latest react/prop-types-typescript -#### Removed: Legacy Context using `contextTypes` and `getChildContext` {/*removed-removing-legacy-context*/} +#### Removido: Contexto legado usando `contextTypes` e `getChildContext` {/*removed-removing-legacy-context*/} -Legacy Context was deprecated in [October 2018 (v16.6.0)](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html). +O Contexto legado foi descontinuado em [outubro de 2018 (v16.6.0)](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html). -Legacy Context was only available in class components using the APIs `contextTypes` and `getChildContext`, and was replaced with `contextType` due to subtle bugs that were easy to miss. In React 19, we're removing Legacy Context to make React slightly smaller and faster. +O Contexto legado estava disponível apenas em componentes de classe usando as APIs `contextTypes` e `getChildContext`, e foi substituído por `contextType` devido a bugs sutis que eram fáceis de perder. No React 19, estamos removendo o Contexto legado para tornar o React um pouco menor e mais rápido. -If you're still using Legacy Context in class components, you'll need to migrate to the new `contextType` API: +Se você ainda estiver usando o Contexto legado em componentes de classe, precisará migrar para a nova API `contextType`: ```js {5-11,19-21} -// Before +// Antes import PropTypes from 'prop-types'; class Parent extends React.Component { @@ -231,7 +226,7 @@ class Child extends React.Component { ``` ```js {2,7,9,15} -// After +// Depois const FooContext = React.createContext(); class Parent extends React.Component { @@ -253,15 +248,15 @@ class Child extends React.Component { } ``` -#### Removed: string refs {/*removed-string-refs*/} -String refs were deprecated in [March, 2018 (v16.3.0)](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html). +#### Removido: refs de string {/*removed-string-refs*/} +Refs de string foram descontinuadas em [Março de 2018 (v16.3.0)](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html). -Class components supported string refs before being replaced by ref callbacks due to [multiple downsides](https://github.com/facebook/react/issues/1373). In React 19, we're removing string refs to make React simpler and easier to understand. +Componentes de classe suportavam refs de string antes de serem substituídos por callbacks de ref devido a [múltiplas desvantagens](https://github.com/facebook/react/issues/1373). No React 19, estamos removendo refs de string para tornar o React mais simples e fácil de entender. -If you're still using string refs in class components, you'll need to migrate to ref callbacks: +Se você ainda estiver usando refs de string em componentes de classe, precisará migrar para callbacks de ref: ```js {4,8} -// Before +// Antes class MyComponent extends React.Component { componentDidMount() { this.refs.input.focus(); @@ -274,7 +269,7 @@ class MyComponent extends React.Component { ``` ```js {4,8} -// After +// Depois class MyComponent extends React.Component { componentDidMount() { this.input.focus(); @@ -288,7 +283,7 @@ class MyComponent extends React.Component { -Codemod string refs with `ref` callbacks: +Codemod refs de string com callbacks de `ref`: ```bash npx codemod@latest react/19/replace-string-ref @@ -296,45 +291,45 @@ npx codemod@latest react/19/replace-string-ref -#### Removed: Module pattern factories {/*removed-module-pattern-factories*/} -Module pattern factories were deprecated in [August 2019 (v16.9.0)](https://legacy.reactjs.org/blog/2019/08/08/react-v16.9.0.html#deprecating-module-pattern-factories). +#### Removido: fábricas de padrão de módulo {/*removed-module-pattern-factories*/} +Fábricas de padrão de módulo foram descontinuadas em [agosto de 2019 (v16.9.0)](https://legacy.reactjs.org/blog/2019/08/08/react-v16.9.0.html#deprecating-module-pattern-factories). -This pattern was rarely used and supporting it causes React to be slightly larger and slower than necessary. In React 19, we're removing support for module pattern factories, and you'll need to migrate to regular functions: +Esse padrão era raramente usado e suportá-lo faz com que o React seja um pouco maior e mais lento do que o necessário. No React 19, estamos removendo o suporte para fábricas de padrão de módulo, e você precisará migrar para funções regulares: ```js -// Before +// Antes function FactoryComponent() { return { render() { return
; } } } ``` ```js -// After +// Depois function FactoryComponent() { return
; } ``` -#### Removed: `React.createFactory` {/*removed-createfactory*/} -`createFactory` was deprecated in [February 2020 (v16.13.0)](https://legacy.reactjs.org/blog/2020/02/26/react-v16.13.0.html#deprecating-createfactory). +#### Removido: `React.createFactory` {/*removed-createfactory*/} +`createFactory` foi descontinuado em [fevereiro de 2020 (v16.13.0)](https://legacy.reactjs.org/blog/2020/02/26/react-v16.13.0.html#deprecating-createfactory). -Using `createFactory` was common before broad support for JSX, but it's rarely used today and can be replaced with JSX. In React 19, we're removing `createFactory` and you'll need to migrate to JSX: +Usar `createFactory` era comum antes do suporte amplo para JSX, mas é raramente usado hoje e pode ser substituído por JSX. No React 19, estamos removendo `createFactory` e você precisará migrar para JSX: ```js -// Before +// Antes import { createFactory } from 'react'; const button = createFactory('button'); ``` ```js -// After +// Depois const button =