You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/react-compiler/index.md
+15-17Lines changed: 15 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,32 +2,30 @@
2
2
title: React Compiler
3
3
---
4
4
5
-
## Introduction {/*introduction*/}
5
+
## Introdução {/*introduction*/}
6
6
7
-
Learn [what React Compiler does](/learn/react-compiler/introduction)and how it automatically optimizes your React application by handling memoization for you, eliminating the need for manual `useMemo`, `useCallback`, and`React.memo`.
7
+
Aprenda [o que o React Compiler faz](/learn/react-compiler/introduction)e como ele otimiza automaticamente sua aplicação React lidando com memoização para você, eliminando a necessidade de usar manualmente `useMemo`, `useCallback` e`React.memo`.
8
8
9
-
## Installation {/*installation*/}
9
+
## Instalação {/*installation*/}
10
10
11
-
Get started with [installing React Compiler](/learn/react-compiler/installation)and learn how to configure it with your build tools.
11
+
Comece [instalando o React Compiler](/learn/react-compiler/installation)e aprenda como configurá-lo com suas ferramentas de build.
Aprenda [estratégias para adotar gradualmente o React Compiler](/learn/react-compiler/incremental-adoption) em sua base de código existente se você não estiver pronto para habilitá-lo em todos os lugares ainda.
15
16
16
-
Learn [strategies for gradually adopting React Compiler](/learn/react-compiler/incremental-adoption) in your existing codebase if you're not ready to enable it everywhere yet.
17
+
## Depuração e Solução de Problemas {/*debugging-and-troubleshooting*/}
17
18
18
-
## Debugging and Troubleshooting {/*debugging-and-troubleshooting*/}
19
+
Quando as coisas não funcionam como esperado, use nosso [guia de depuração](/learn/react-compiler/debugging) para entender a diferença entre erros do compilador e problemas de runtime, identificar padrões problemáticos comuns e seguir um fluxo de trabalho sistemático de depuração.
19
20
20
-
When things don't work as expected, use our [debugging guide](/learn/react-compiler/debugging) to understand the difference between compiler errors and runtime issues, identify common breaking patterns, and follow a systematic debugging workflow.
21
+
## Configuração e Referência {/*configuration-and-reference*/}
21
22
22
-
## Configuration and Reference {/*configuration-and-reference*/}
23
+
Para opções de configuração detalhadas e referência da API:
23
24
24
-
For detailed configuration options and API reference:
25
+
-[Opções de Configuração](/reference/react-compiler/configuration) - Todas as opções de configuração do compilador incluindo compatibilidade de versão do React
26
+
-[Diretivas](/reference/react-compiler/directives) - Controle de compilação em nível de função
In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler.
29
+
## Recursos adicionais {/*additional-resources*/}
33
30
31
+
Além desta documentação, recomendamos verificar o [Grupo de Trabalho do React Compiler](https://github.com/reactwg/react-compiler) para informações adicionais e discussões sobre o compilador.
This guide will help you install and configure React Compiler in your React application.
6
+
Este guia irá ajudá-lo a instalar e configurar o React Compiler em sua aplicação React.
7
7
</Intro>
8
8
9
9
<YouWillLearn>
10
10
11
-
*How to install React Compiler
12
-
*Basic configuration for different build tools
13
-
*How to verify your setup is working
11
+
*Como instalar o React Compiler
12
+
*Configuração básica para diferentes ferramentas de build
13
+
*Como verificar se sua configuração está funcionando
14
14
15
15
</YouWillLearn>
16
16
17
-
## Prerequisites {/*prerequisites*/}
17
+
## Pré-requisitos {/*prerequisites*/}
18
18
19
-
React Compiler is designed to work best with React 19, but it also supports React 17 and 18. Learn more about [React version compatibility](/reference/react-compiler/target).
19
+
O React Compiler foi projetado para funcionar melhor com React 19, mas também suporta React 17 e 18. Saiba mais sobre [compatibilidade de versão React](/reference/react-compiler/target).
20
20
21
21
<Note>
22
-
React Compiler is currently in RC. Install it using the`@rc`tag to get the latest release candidate version.
22
+
O React Compiler está atualmente em RC. Instale-o usando a tag`@rc`para obter a versão release candidate mais recente.
23
23
</Note>
24
24
25
-
## Installation {/*installation*/}
25
+
## Instalação {/*installation*/}
26
26
27
-
Install React Compiler as a`devDependency`:
27
+
Instale o React Compiler como uma`devDependency`:
28
28
29
29
<TerminalBlock>
30
30
npm install -D babel-plugin-react-compiler@rc
31
31
</TerminalBlock>
32
32
33
-
Or with Yarn:
33
+
Ou com Yarn:
34
34
35
35
<TerminalBlock>
36
36
yarn add -D babel-plugin-react-compiler@rc
37
37
</TerminalBlock>
38
38
39
-
Or with pnpm:
39
+
Ou com pnpm:
40
40
41
41
<TerminalBlock>
42
42
pnpm install -D babel-plugin-react-compiler@rc
43
43
</TerminalBlock>
44
44
45
-
## Basic Setup {/*basic-setup*/}
45
+
## Configuração Básica {/*basic-setup*/}
46
46
47
-
React Compiler is designed to work by default without any configuration. However, if you need to configure it in special circumstances (for example, to target React versions below 19), refer to the [compiler options reference](/reference/react-compiler/configuration).
47
+
O React Compiler foi projetado para funcionar por padrão sem nenhuma configuração. No entanto, se você precisar configurá-lo em circunstâncias especiais (por exemplo, para atingir versões React abaixo de 19), consulte a [referência de opções do compilador](/reference/react-compiler/configuration).
48
48
49
-
The setup process depends on your build tool. React Compiler includes a Babel plugin that integrates with your build pipeline.
49
+
O processo de configuração depende da sua ferramenta de build. O React Compiler inclui um plugin Babel que se integra ao seu pipeline de build.
50
50
51
51
<Pitfall>
52
-
React Compiler must run**first**in your Babel plugin pipeline. The compiler needs the original source information for proper analysis, so it must process your code before other transformations.
52
+
O React Compiler deve executar**primeiro**no seu pipeline de plugins Babel. O compilador precisa das informações do código fonte original para análise adequada, então deve processar seu código antes de outras transformações.
A community webpack loader is [now available here](https://github.com/SukkaW/react-compiler-webpack).
150
+
Um loader webpack da comunidade está [disponível aqui](https://github.com/SukkaW/react-compiler-webpack).
151
151
152
152
### Expo {/*usage-with-expo*/}
153
153
154
-
Please refer to [Expo's docs](https://docs.expo.dev/guides/react-compiler/)to enable and use the React Compiler in Expo apps.
154
+
Por favor, consulte a [documentação do Expo](https://docs.expo.dev/guides/react-compiler/)para habilitar e usar o React Compiler em aplicações Expo.
155
155
156
156
### Metro (React Native) {/*usage-with-react-native-metro*/}
157
157
158
-
React Native uses Babel via Metro, so refer to the [Usage with Babel](#babel)section for installation instructions.
158
+
React Native usa Babel via Metro, então consulte a seção [Uso com Babel](#babel)para instruções de instalação.
159
159
160
160
### Rspack {/*usage-with-rspack*/}
161
161
162
-
Please refer to [Rspack's docs](https://rspack.dev/guide/tech/react#react-compiler)to enable and use the React Compiler in Rspack apps.
162
+
Por favor, consulte a [documentação do Rspack](https://rspack.dev/guide/tech/react#react-compiler)para habilitar e usar o React Compiler em aplicações Rspack.
163
163
164
164
### Rsbuild {/*usage-with-rsbuild*/}
165
165
166
-
Please refer to [Rsbuild's docs](https://rsbuild.dev/guide/framework/react#react-compiler)to enable and use the React Compiler in Rsbuild apps.
166
+
Por favor, consulte a [documentação do Rsbuild](https://rsbuild.dev/guide/framework/react#react-compiler)para habilitar e usar o React Compiler em aplicações Rsbuild.
167
167
168
+
## Integração com ESLint {/*eslint-integration*/}
168
169
169
-
## ESLint Integration {/*eslint-integration*/}
170
+
O React Compiler inclui uma regra ESLint que ajuda a identificar código que não pode ser otimizado. Quando a regra ESLint reporta um erro, significa que o compilador pulará a otimização daquele componente ou hook específico. Isso é seguro: o compilador continuará otimizando outras partes da sua base de código. Você não precisa corrigir todas as violações imediatamente. Resolva-as no seu próprio ritmo para aumentar gradualmente o número de componentes otimizados.
170
171
171
-
React Compiler includes an ESLint rule that helps identify code that can't be optimized. When the ESLint rule reports an error, it means the compiler will skip optimizing that specific component or hook. This is safe: the compiler will continue optimizing other parts of your codebase. You don't need to fix all violations immediately. Address them at your own pace to gradually increase the number of optimized components.
172
-
173
-
Install the ESLint plugin:
172
+
Instale o plugin ESLint:
174
173
175
174
<TerminalBlock>
176
175
npm install -D eslint-plugin-react-hooks@rc
177
176
</TerminalBlock>
178
177
179
-
Then enable the compiler rule in your ESLint configuration:
178
+
Em seguida, habilite a regra do compilador na sua configuração ESLint:
180
179
181
180
```js {3}
182
181
// .eslintrc.js
@@ -187,32 +186,32 @@ module.exports = {
187
186
};
188
187
```
189
188
190
-
The ESLint rule will:
191
-
-Identify violations of the [Rules of React](/reference/rules)
192
-
-Show which components can't be optimized
193
-
-Provide helpful error messages for fixing issues
189
+
A regra ESLint irá:
190
+
-Identificar violações das [Regras do React](/reference/rules)
191
+
-Mostrar quais componentes não podem ser otimizados
192
+
-Fornecer mensagens de erro úteis para corrigir problemas
194
193
195
-
## Verify Your Setup {/*verify-your-setup*/}
194
+
## Verificar Sua Configuração {/*verify-your-setup*/}
196
195
197
-
After installation, verify that React Compiler is working correctly.
196
+
Após a instalação, verifique se o React Compiler está funcionando corretamente.
Components optimized by React Compiler will show a "Memo ✨" badge in React DevTools:
200
+
Componentes otimizados pelo React Compiler mostrarão um badge "Memo ✨" no React DevTools:
202
201
203
-
1.Install the [React Developer Tools](/learn/react-developer-tools) browser extension
204
-
2.Open your app in development mode
205
-
3.Open React DevTools
206
-
4.Look for the ✨ emoji next to component names
202
+
1.Instale a extensão do navegador [React Developer Tools](/learn/react-developer-tools)
203
+
2.Abra sua aplicação em modo de desenvolvimento
204
+
3.Abra o React DevTools
205
+
4.Procure pelo emoji ✨ ao lado dos nomes dos componentes
207
206
208
-
If the compiler is working:
209
-
-Components will show a "Memo ✨" badge in React DevTools
210
-
-Expensive calculations will be automatically memoized
211
-
-No manual `useMemo`is required
207
+
Se o compilador estiver funcionando:
208
+
-Componentes mostrarão um badge "Memo ✨" no React DevTools
209
+
-Cálculos caros serão automaticamente memoizados
210
+
-Nenhum `useMemo`manual é necessário
212
211
213
-
### Check Build Output {/*check-build-output*/}
212
+
### Verificar Saída do Build {/*check-build-output*/}
214
213
215
-
You can also verify the compiler is running by checking your build output. The compiled code will include automatic memoization logic that the compiler adds automatically.
214
+
Você também pode verificar se o compilador está executando verificando a saída do seu build. O código compilado incluirá lógica de memoização automática que o compilador adiciona automaticamente.
216
215
217
216
```js
218
217
import { cas_c } from"react/compiler-runtime";
@@ -230,29 +229,29 @@ export default function MyApp() {
230
229
231
230
```
232
231
233
-
## Troubleshooting {/*troubleshooting*/}
232
+
## Solução de Problemas {/*troubleshooting*/}
234
233
235
-
### Opting out specific components {/*opting-out-specific-components*/}
If a component is causing issues after compilation, you can temporarily opt it out using the `"use no memo"` directive:
236
+
Se um componente está causando problemas após a compilação, você pode temporariamente excluí-lo usando a diretiva `"use no memo"`:
238
237
239
238
```js
240
239
functionProblematicComponent() {
241
240
"use no memo";
242
-
//Component code here
241
+
//Código do componente aqui
243
242
}
244
243
```
245
244
246
-
This tells the compiler to skip optimization for this specific component. You should fix the underlying issue and remove the directive once resolved.
245
+
Isso diz ao compilador para pular a otimização para este componente específico. Você deve corrigir o problema subjacente e remover a diretiva uma vez resolvido.
247
246
248
-
For more troubleshooting help, see the [debugging guide](/learn/react-compiler/debugging).
247
+
Para mais ajuda na solução de problemas, veja o [guia de depuração](/learn/react-compiler/debugging).
249
248
250
-
## Next Steps {/*next-steps*/}
249
+
## Próximos Passos {/*next-steps*/}
251
250
252
-
Now that you have React Compiler installed, learn more about:
251
+
Agora que você tem o React Compiler instalado, saiba mais sobre:
253
252
254
-
-[React version compatibility](/reference/react-compiler/target)for React 17 and 18
255
-
-[Configuration options](/reference/react-compiler/configuration)to customize the compiler
0 commit comments