Skip to content

Commit a630fb8

Browse files
committed
update react compiler install to pt
1 parent 7a83c3c commit a630fb8

1 file changed

Lines changed: 65 additions & 66 deletions

File tree

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)