Skip to content

Commit 9ccf401

Browse files
devlulcascauli
andauthored
docs(pt-br): translate react-apis and createContext page (#667)
* docs(pt-br): translate react-apis and createContext page * docs: add the original term "props" for better understanding Co-authored-by: Cauli Tomaz <caulitomaz@gmail.com> * docs: replaces "uma" for "pela" Co-authored-by: Cauli Tomaz <caulitomaz@gmail.com> * fix(typo): capitalization after period Co-authored-by: Cauli Tomaz <caulitomaz@gmail.com> * fix(typo): replaces wrong word Co-authored-by: Cauli Tomaz <caulitomaz@gmail.com> * fix: put the article outside the CodeStep tag Co-authored-by: Cauli Tomaz <caulitomaz@gmail.com> * fix: adds a piece of the original translation that was removed Co-authored-by: Cauli Tomaz <caulitomaz@gmail.com> * fix: incorrect verb conjugation Co-authored-by: Cauli Tomaz <caulitomaz@gmail.com> * fix: reinsert original line break --------- Co-authored-by: Cauli Tomaz <caulitomaz@gmail.com>
1 parent 942f242 commit 9ccf401

File tree

2 files changed

+44
-48
lines changed

2 files changed

+44
-48
lines changed
Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
---
2-
title: "Built-in React APIs"
2+
title: "APIs React Integradas"
33
---
44

55
<Intro>
66

7-
In addition to [Hooks](/reference/react) and [Components](/reference/react/components), the `react` package exports a few other APIs that are useful for defining components. This page lists all the remaining modern React APIs.
7+
Em adição aos [Hooks](/reference/react) e [Componentes](/reference/react/components), o pacote `react` exporta algumas outras APIs que são úteis para definir componentes. Essa página lista todas as APIs modernas restantes do React.
88

99
</Intro>
1010

1111
---
1212

13-
* [`createContext`](/reference/react/createContext) lets you define and provide context to the child components. Used with [`useContext`.](/reference/react/useContext)
14-
* [`forwardRef`](/reference/react/forwardRef) lets your component expose a DOM node as a ref to the parent. Used with [`useRef`.](/reference/react/useRef)
15-
* [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time.
16-
* [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback)
17-
* [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition)
13+
* [`createContext`](/reference/react/createContext) permite que você defina e forneça contexto aos componentes filhos. Utilizado com [`useContext`.](/reference/react/useContext)
14+
* [`forwardRef`](/reference/react/forwardRef) permite que seu componente exponha um nó do DOM como uma referência para o pai. Utilizado com [`useRef`.](/reference/react/useRef)
15+
* [`lazy`](/reference/react/lazy) permite adiar o carregamento do código de um componente até que ele seja renderizado pela primeira vez.
16+
* [`memo`](/reference/react/memo) permite que seu componente evite re-renderizações se as propriedades (`props`) forem as mesmas. Utilizado com [`useMemo`](/reference/react/useMemo) e [`useCallback`.](/reference/react/useCallback)
17+
* [`startTransition`](/reference/react/startTransition) permite marcar uma atualização de estado como não urgente. Semelhante a [`useTransition`.](/reference/react/useTransition)

src/content/reference/react/createContext.md

Lines changed: 37 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: createContext
44

55
<Intro>
66

7-
`createContext` lets you create a [context](/learn/passing-data-deeply-with-context) that components can provide or read.
7+
`createContext` permite que você crie um [contexto](/learn/passing-data-deeply-with-context) que componentes podem fornecer ou consumir.
88

99
```js
1010
const SomeContext = createContext(defaultValue)
@@ -16,38 +16,38 @@ const SomeContext = createContext(defaultValue)
1616

1717
---
1818

19-
## Reference {/*reference*/}
19+
## Referência {/*reference*/}
2020

2121
### `createContext(defaultValue)` {/*createcontext*/}
2222

23-
Call `createContext` outside of any components to create a context.
23+
Invoque `createContext` fora de qualquer componente para criar um contexto.
2424

2525
```js
2626
import { createContext } from 'react';
2727

2828
const ThemeContext = createContext('light');
2929
```
3030

31-
[See more examples below.](#usage)
31+
[Veja mais exemplos abaixo.](#usage)
3232

33-
#### Parameters {/*parameters*/}
33+
#### Parâmetros {/*parameters*/}
3434

35-
* `defaultValue`: The value that you want the context to have when there is no matching context provider in the tree above the component that reads context. If you don't have any meaningful default value, specify `null`. The default value is meant as a "last resort" fallback. It is static and never changes over time.
35+
* `defaultValue`: O valor que você quer que o contexto tenha quando não há um provedor de contexto correspondente na árvore acima do componente que lê o contexto. Se você não tem um valor padrão significativo, especifique `null`. O valor padrão é um "último recurso" reserva. Ele é estático e nunca muda com o tempo.
3636

37-
#### Returns {/*returns*/}
37+
#### Retornos {/*returns*/}
3838

39-
`createContext` returns a context object.
39+
`createContext` retorna um objeto de contexto.
4040

41-
**The context object itself does not hold any information.** It represents _which_ context other components read or provide. Typically, you will use [`SomeContext.Provider`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/reference/react/useContext) in components below to read it. The context object has a few properties:
41+
**O objeto de contexto em si, não possui nenhuma informação.** Ele representa _qual_ contexto outros componentes irão consumir ou fornecer. Geralmente, você vai usar[`SomeContext.Provider`](#provider) em um componente acima para especificar um valor para o contexto, e invocar [`useContext(SomeContext)`](/reference/react/useContext) em componentes abaixo pra consumi-lo. O objeto de contexto possui algumas propriedades:
4242

43-
* `SomeContext.Provider` lets you provide the context value to components.
44-
* `SomeContext.Consumer` is an alternative and rarely used way to read the context value.
43+
* `SomeContext.Provider` permite que você forneça o valor do contexto aos seus componentes.
44+
* `SomeContext.Consumer` é uma alternativa raramanete usada como uma forma de consumir o valor de um contexto.
4545

4646
---
4747

4848
### `SomeContext.Provider` {/*provider*/}
4949

50-
Wrap your components into a context provider to specify the value of this context for all components inside:
50+
Envolva seus componente em um provedor de contexto para especificar o valor desse contexto para todos os componentes dentro dele:
5151

5252
```js
5353
function App() {
@@ -63,17 +63,17 @@ function App() {
6363

6464
#### Props {/*provider-props*/}
6565

66-
* `value`: The value that you want to pass to all the components reading this context inside this provider, no matter how deep. The context value can be of any type. A component calling [`useContext(SomeContext)`](/reference/react/useContext) inside of the provider receives the `value` of the innermost corresponding context provider above it.
66+
* `value`: O valor que você deseja passar para todos os componentes que estão consumindo esse contexto dentro deste provedor, não importa o quão profundo. O valor do contexto pode ser de qualquer tipo. Um componente invocando [`useContext(SomeContext)`](/reference/react/useContext) dentro do provedor recebe o `value` do provedor de contexto correspondente mais próximo acima dele.
6767

6868
---
6969

7070
### `SomeContext.Consumer` {/*consumer*/}
7171

72-
Before `useContext` existed, there was an older way to read context:
72+
Antes do `useContext` existir, havia uma forma mais arcaica de consumir um contexto:
7373

7474
```js
7575
function Button() {
76-
// 🟡 Legacy way (not recommended)
76+
// 🟡 Jeito legado (não recomendado)
7777
return (
7878
<ThemeContext.Consumer>
7979
{theme => (
@@ -83,30 +83,29 @@ function Button() {
8383
);
8484
}
8585
```
86-
87-
Although this older way still works, but **newly written code should read context with [`useContext()`](/reference/react/useContext) instead:**
86+
Apesar dessa forma mais antiga ainda funcionar, **códigos recém escritos devem consumir o contexto com [`useContext()`](/reference/react/useContext) ao invés disso:**
8887

8988
```js
9089
function Button() {
91-
//Recommended way
90+
//Jeito recomendado
9291
const theme = useContext(ThemeContext);
9392
return <button className={theme} />;
9493
}
9594
```
9695

9796
#### Props {/*consumer-props*/}
9897

99-
* `children`: A function. React will call the function you pass with the current context value determined by the same algorithm as [`useContext()`](/reference/react/useContext) does, and render the result you return from this function. React will also re-run this function and update the UI whenever the context from the parent components changes.
98+
* `children`: Uma função. O React invocará a função que você passar com o valor do contexto atual determinado pelo mesmo algoritmo que o [`useContext()`](/reference/react/useContext) utiliza, e renderizará o resultado que você retornar dessa função. O React também irá re-executar essa função e atualizar a UI sempre que o contexto dos componentes pais mudar.
10099

101100
---
102101

103-
## Usage {/*usage*/}
102+
## Uso {/*usage*/}
104103

105-
### Creating context {/*creating-context*/}
104+
### Criando um contexto {/*creating-context*/}
106105

107-
Context lets components [pass information deep down](/learn/passing-data-deeply-with-context) without explicitly passing props.
106+
Contextos permitem [passar informação profundamente](/learn/passing-data-deeply-with-context) sem precisar passar props manualmente em cada nível.
108107

109-
Call `createContext` outside any components to create one or more contexts.
108+
Invoque `createContext` fora de qualquer componente para criar um ou mais contextos.
110109

111110
```js [[1, 3, "ThemeContext"], [1, 4, "AuthContext"], [3, 3, "'light'"], [3, 4, "null"]]
112111
import { createContext } from 'react';
@@ -115,7 +114,7 @@ const ThemeContext = createContext('light');
115114
const AuthContext = createContext(null);
116115
```
117116

118-
`createContext` returns a <CodeStep step={1}>context object</CodeStep>. Components can read context by passing it to [`useContext()`](/reference/react/useContext):
117+
`createContext` retorna um <CodeStep step={1}>objeto de contexto</CodeStep>. Componentes podem consumir esse contexto passando-o para o hook [`useContext()`](/reference/react/useContext):
119118

120119
```js [[1, 2, "ThemeContext"], [1, 7, "AuthContext"]]
121120
function Button() {
@@ -129,9 +128,9 @@ function Profile() {
129128
}
130129
```
131130

132-
By default, the values they receive will be the <CodeStep step={3}>default values</CodeStep> you have specified when creating the contexts. However, by itself this isn't useful because the default values never change.
131+
Por padrão, os valores que receberão são os <CodeStep step={3}>valores padrão</CodeStep> que você especificou quando criava os contextos. Porém, por si só isso não é útil porque os valores padrão nunca mudam.
133132

134-
Context is useful because you can **provide other, dynamic values from your components:**
133+
Contextos são úteis porque você pode **fornecer outros valores dinâmicos de seus componentes:**
135134

136135
```js {8-9,11-12}
137136
function App() {
@@ -150,25 +149,25 @@ function App() {
150149
}
151150
```
152151

153-
Now the `Page` component and any components inside it, no matter how deep, will "see" the passed context values. If the passed context values change, React will re-render the components reading the context as well.
152+
Agora o componente `Page` e qualquer componente dentro dele, não importa o quão profundo esteja, irão "ver" os valores do contexto passados. Se os valores do contexto mudarem, o React também irá re-renderizar os componentes que estão lendo o contexto.
154153

155-
[Read more about reading and providing context and see examples.](/reference/react/useContext)
154+
[Leia mais sobre consumir e providenciar contexto e veja exemplos.](/reference/react/useContext)
156155

157156
---
158157

159-
### Importing and exporting context from a file {/*importing-and-exporting-context-from-a-file*/}
158+
### Importando e exportando contextos de um arquivo {/*importing-and-exporting-context-from-a-file*/}
160159

161-
Often, components in different files will need access to the same context. This is why it's common to declare contexts in a separate file. Then you can use the [`export` statement](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) to make context available for other files:
160+
Frequentemente, componentens em arquivos diferentes irão precisar acessar o mesmo contexto. É por isso que é comum declarar contextos em um arquivo separado. Então você pode usar o [`export` statement](https://developer.mozilla.org/pt-BR/docs/web/javascript/reference/statements/export) para tornar o contexto disponível para outros arquivos:
162161

163162
```js {4-5}
164163
// Contexts.js
165164
import { createContext } from 'react';
166165

167166
export const ThemeContext = createContext('light');
168167
export const AuthContext = createContext(null);
169-
````
168+
```
170169

171-
Components declared in other files can then use the [`import`](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/import) statement to read or provide this context:
170+
Componentes declarados em outros arquivos podem usar o [`import`](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/import) para ler ou providenciar esse contexto:
172171

173172
```js {2}
174173
// Button.js
@@ -195,23 +194,20 @@ function App() {
195194
);
196195
}
197196
```
198-
199-
This works similar to [importing and exporting components.](/learn/importing-and-exporting-components)
197+
Isso funciona de forma similar com a [importação e exportação de componentes.](/learn/importing-and-exporting-components)
200198

201199
---
202200

203-
## Troubleshooting {/*troubleshooting*/}
201+
## Resolução de problemas {/*troubleshooting*/}
204202

205-
### I can't find a way to change the context value {/*i-cant-find-a-way-to-change-the-context-value*/}
203+
### Não consigo encontrar uma forma de mudar o valor do contexto {/*i-cant-find-a-way-to-change-the-context-value*/}
206204

207-
208-
Code like this specifies the *default* context value:
205+
Código como esse especifica o valor *padrão* do contexto:
209206

210207
```js
211208
const ThemeContext = createContext('light');
212209
```
213210

214-
This value never changes. React only uses this value as a fallback if it can't find a matching provider above.
215-
216-
To make context change over time, [add state and wrap components in a context provider.](/reference/react/useContext#updating-data-passed-via-context)
211+
Esse valor nunca muda. React só usa esse valor como um fallback (reserva) se ele não conseguir encontrar um provedor correspondente acima.
217212

213+
Para fazer o valor do contexto mudar com o tempo, [adicione estado e envolva os componentes em um provedor de contexto (context provider).](/reference/react/useContext#updating-data-passed-via-context)

0 commit comments

Comments
 (0)