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
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>
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.
8
8
9
9
</Intro>
10
10
11
11
---
12
12
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)
Call`createContext`outside of any components to create a context.
23
+
Invoque`createContext`fora de qualquer componente para criar um contexto.
24
24
25
25
```js
26
26
import { createContext } from'react';
27
27
28
28
constThemeContext=createContext('light');
29
29
```
30
30
31
-
[See more examples below.](#usage)
31
+
[Veja mais exemplos abaixo.](#usage)
32
32
33
-
#### Parameters {/*parameters*/}
33
+
#### Parâmetros {/*parameters*/}
34
34
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.
36
36
37
-
#### Returns {/*returns*/}
37
+
#### Retornos {/*returns*/}
38
38
39
-
`createContext`returns a context object.
39
+
`createContext`retorna um objeto de contexto.
40
40
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:
42
42
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.
45
45
46
46
---
47
47
48
48
### `SomeContext.Provider` {/*provider*/}
49
49
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:
51
51
52
52
```js
53
53
functionApp() {
@@ -63,17 +63,17 @@ function App() {
63
63
64
64
#### Props {/*provider-props*/}
65
65
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.
67
67
68
68
---
69
69
70
70
### `SomeContext.Consumer` {/*consumer*/}
71
71
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:
73
73
74
74
```js
75
75
functionButton() {
76
-
// 🟡 Legacy way (not recommended)
76
+
// 🟡 Jeito legado (não recomendado)
77
77
return (
78
78
<ThemeContext.Consumer>
79
79
{theme=> (
@@ -83,30 +83,29 @@ function Button() {
83
83
);
84
84
}
85
85
```
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:**
88
87
89
88
```js
90
89
functionButton() {
91
-
// ✅ Recommended way
90
+
// ✅ Jeito recomendado
92
91
consttheme=useContext(ThemeContext);
93
92
return<button className={theme} />;
94
93
}
95
94
```
96
95
97
96
#### Props {/*consumer-props*/}
98
97
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.
100
99
101
100
---
102
101
103
-
## Usage {/*usage*/}
102
+
## Uso {/*usage*/}
104
103
105
-
### Creating context {/*creating-context*/}
104
+
### Criando um contexto {/*creating-context*/}
106
105
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.
108
107
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.
`createContext`returns a <CodeStepstep={1}>context object</CodeStep>. Components can read context by passing it to[`useContext()`](/reference/react/useContext):
117
+
`createContext`retorna um <CodeStepstep={1}>objeto de contexto</CodeStep>. Componentes podem consumir esse contexto passando-o para o hook[`useContext()`](/reference/react/useContext):
By default, the values they receive will be the <CodeStepstep={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 <CodeStepstep={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.
133
132
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:**
135
134
136
135
```js {8-9,11-12}
137
136
functionApp() {
@@ -150,25 +149,25 @@ function App() {
150
149
}
151
150
```
152
151
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.
154
153
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)
156
155
157
156
---
158
157
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*/}
160
159
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:
162
161
163
162
```js {4-5}
164
163
// Contexts.js
165
164
import { createContext } from'react';
166
165
167
166
exportconstThemeContext=createContext('light');
168
167
exportconstAuthContext=createContext(null);
169
-
````
168
+
```
170
169
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:
172
171
173
172
```js {2}
174
173
// Button.js
@@ -195,23 +194,20 @@ function App() {
195
194
);
196
195
}
197
196
```
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)
200
198
201
199
---
202
200
203
-
## Troubleshooting {/*troubleshooting*/}
201
+
## Resolução de problemas {/*troubleshooting*/}
204
202
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*/}
206
204
207
-
208
-
Code like this specifies the *default* context value:
205
+
Código como esse especifica o valor *padrão* do contexto:
209
206
210
207
```js
211
208
constThemeContext=createContext('light');
212
209
```
213
210
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.
217
212
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