Skip to content

Commit 8c881ee

Browse files
authored
Translate index.md , installation.mdand introdution.md of react compiler (#1102)
* feat: translate react compiler to pt * feat: react compiler intro to pt * update react compiler install to pt
1 parent a6ea941 commit 8c881ee

File tree

3 files changed

+138
-142
lines changed

3 files changed

+138
-142
lines changed

src/content/learn/react-compiler/index.md

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,30 @@
22
title: React Compiler
33
---
44

5-
## Introduction {/*introduction*/}
5+
## Introdução {/*introduction*/}
66

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

9-
## Installation {/*installation*/}
9+
## Instalação {/*installation*/}
1010

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

13+
## Adoção Incremental {/*incremental-adoption*/}
1314

14-
## Incremental Adoption {/*incremental-adoption*/}
15+
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.
1516

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*/}
1718

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

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*/}
2122

22-
## Configuration and Reference {/*configuration-and-reference*/}
23+
Para opções de configuração detalhadas e referência da API:
2324

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
27+
- [Compilando Bibliotecas](/reference/react-compiler/compiling-libraries) - Distribuindo bibliotecas pré-compiladas
2528

26-
- [Configuration Options](/reference/react-compiler/configuration) - All compiler configuration options including React version compatibility
27-
- [Directives](/reference/react-compiler/directives) - Function-level compilation control
28-
- [Compiling Libraries](/reference/react-compiler/compiling-libraries) - Shipping pre-compiled libraries
29-
30-
## Additional resources {/*additional-resources*/}
31-
32-
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*/}
3330

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.
Lines changed: 65 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,74 @@
11
---
2-
title: Installation
2+
title: Instalação
33
---
44

55
<Intro>
6-
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.
77
</Intro>
88

99
<YouWillLearn>
1010

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
1414

1515
</YouWillLearn>
1616

17-
## Prerequisites {/*prerequisites*/}
17+
## Pré-requisitos {/*prerequisites*/}
1818

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).
2020

2121
<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.
2323
</Note>
2424

25-
## Installation {/*installation*/}
25+
## Instalação {/*installation*/}
2626

27-
Install React Compiler as a `devDependency`:
27+
Instale o React Compiler como uma `devDependency`:
2828

2929
<TerminalBlock>
3030
npm install -D babel-plugin-react-compiler@rc
3131
</TerminalBlock>
3232

33-
Or with Yarn:
33+
Ou com Yarn:
3434

3535
<TerminalBlock>
3636
yarn add -D babel-plugin-react-compiler@rc
3737
</TerminalBlock>
3838

39-
Or with pnpm:
39+
Ou com pnpm:
4040

4141
<TerminalBlock>
4242
pnpm install -D babel-plugin-react-compiler@rc
4343
</TerminalBlock>
4444

45-
## Basic Setup {/*basic-setup*/}
45+
## Configuração Básica {/*basic-setup*/}
4646

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).
4848

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

5151
<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.
5353
</Pitfall>
5454

5555
### Babel {/*babel*/}
5656

57-
Create or update your `babel.config.js`:
57+
Crie ou atualize seu `babel.config.js`:
5858

5959
```js {3}
6060
module.exports = {
6161
plugins: [
62-
'babel-plugin-react-compiler', // must run first!
63-
// ... other plugins
62+
'babel-plugin-react-compiler', // deve executar primeiro!
63+
// ... outros plugins
6464
],
65-
// ... other config
65+
// ... outras configurações
6666
};
6767
```
6868

6969
### Vite {/*vite*/}
7070

71-
If you use Vite, you can add the plugin to vite-plugin-react:
71+
Se você usa Vite, pode adicionar o plugin ao vite-plugin-react:
7272

7373
```js {3,9}
7474
// vite.config.js
@@ -86,7 +86,7 @@ export default defineConfig({
8686
});
8787
```
8888

89-
Alternatively, if you prefer a separate Babel plugin for Vite:
89+
Alternativamente, se você preferir um plugin Babel separado para Vite:
9090

9191
<TerminalBlock>
9292
npm install -D vite-plugin-babel
@@ -112,10 +112,10 @@ export default defineConfig({
112112

113113
### Next.js {/*usage-with-nextjs*/}
114114

115-
Please refer to the [Next.js docs](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) for more information.
115+
Por favor, consulte a [documentação do Next.js](https://nextjs.org/docs/app/api-reference/next-config-js/reactCompiler) para mais informações.
116116

117117
### React Router {/*usage-with-react-router*/}
118-
Install `vite-plugin-babel`, and add the compiler's Babel plugin to it:
118+
Instale `vite-plugin-babel` e adicione o plugin Babel do compilador:
119119

120120
<TerminalBlock>
121121
{`npm install vite-plugin-babel`}
@@ -135,7 +135,7 @@ export default defineConfig({
135135
babel({
136136
filter: /\.[jt]sx?$/,
137137
babelConfig: {
138-
presets: ["@babel/preset-typescript"], // if you use TypeScript
138+
presets: ["@babel/preset-typescript"], // se você usa TypeScript
139139
plugins: [
140140
["babel-plugin-react-compiler", ReactCompilerConfig],
141141
],
@@ -147,36 +147,35 @@ export default defineConfig({
147147

148148
### Webpack {/*usage-with-webpack*/}
149149

150-
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).
151151

152152
### Expo {/*usage-with-expo*/}
153153

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

156156
### Metro (React Native) {/*usage-with-react-native-metro*/}
157157

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

160160
### Rspack {/*usage-with-rspack*/}
161161

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

164164
### Rsbuild {/*usage-with-rsbuild*/}
165165

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

168+
## Integração com ESLint {/*eslint-integration*/}
168169

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

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:
174173

175174
<TerminalBlock>
176175
npm install -D eslint-plugin-react-hooks@rc
177176
</TerminalBlock>
178177

179-
Then enable the compiler rule in your ESLint configuration:
178+
Em seguida, habilite a regra do compilador na sua configuração ESLint:
180179

181180
```js {3}
182181
// .eslintrc.js
@@ -187,32 +186,32 @@ module.exports = {
187186
};
188187
```
189188

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
194193

195-
## Verify Your Setup {/*verify-your-setup*/}
194+
## Verificar Sua Configuração {/*verify-your-setup*/}
196195

197-
After installation, verify that React Compiler is working correctly.
196+
Após a instalação, verifique se o React Compiler está funcionando corretamente.
198197

199-
### Check React DevTools {/*check-react-devtools*/}
198+
### Verificar React DevTools {/*check-react-devtools*/}
200199

201-
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:
202201

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 theemoji 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 emojiao lado dos nomes dos componentes
207206

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
212211

213-
### Check Build Output {/*check-build-output*/}
212+
### Verificar Saída do Build {/*check-build-output*/}
214213

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

217216
```js
218217
import { c as _c } from "react/compiler-runtime";
@@ -230,29 +229,29 @@ export default function MyApp() {
230229

231230
```
232231

233-
## Troubleshooting {/*troubleshooting*/}
232+
## Solução de Problemas {/*troubleshooting*/}
234233

235-
### Opting out specific components {/*opting-out-specific-components*/}
234+
### Excluindo componentes específicos {/*opting-out-specific-components*/}
236235

237-
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"`:
238237

239238
```js
240239
function ProblematicComponent() {
241240
"use no memo";
242-
// Component code here
241+
// Código do componente aqui
243242
}
244243
```
245244

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

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).
249248

250-
## Next Steps {/*next-steps*/}
249+
## Próximos Passos {/*next-steps*/}
251250

252-
Now that you have React Compiler installed, learn more about:
251+
Agora que você tem o React Compiler instalado, saiba mais sobre:
253252

254-
- [React version compatibility](/reference/react-compiler/target) for React 17 and 18
255-
- [Configuration options](/reference/react-compiler/configuration) to customize the compiler
256-
- [Incremental adoption strategies](/learn/react-compiler/incremental-adoption) for existing codebases
257-
- [Debugging techniques](/learn/react-compiler/debugging) for troubleshooting issues
258-
- [Compiling Libraries guide](/reference/react-compiler/compiling-libraries) for compiling your React library
253+
- [Compatibilidade de versão React](/reference/react-compiler/target) para React 17 e 18
254+
- [Opções de configuração](/reference/react-compiler/configuration) para personalizar o compilador
255+
- [Estratégias de adoção incremental](/learn/react-compiler/incremental-adoption) para bases de código existentes
256+
- [Técnicas de depuração](/learn/react-compiler/debugging) para solução de problemas
257+
- [Guia de compilação de bibliotecas](/reference/react-compiler/compiling-libraries) para compilar sua biblioteca React

0 commit comments

Comments
 (0)