diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md index 9c1437870..453ceb160 100644 --- a/src/content/reference/react/apis.md +++ b/src/content/reference/react/apis.md @@ -1,17 +1,17 @@ --- -title: "Built-in React APIs" +title: "APIs React Integradas" --- -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. +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. --- -* [`createContext`](/reference/react/createContext) lets you define and provide context to the child components. Used with [`useContext`.](/reference/react/useContext) -* [`forwardRef`](/reference/react/forwardRef) lets your component expose a DOM node as a ref to the parent. Used with [`useRef`.](/reference/react/useRef) -* [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time. -* [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback) -* [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition) +* [`createContext`](/reference/react/createContext) permite que você defina e forneça contexto aos componentes filhos. Utilizado com [`useContext`.](/reference/react/useContext) +* [`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) +* [`lazy`](/reference/react/lazy) permite adiar o carregamento do código de um componente até que ele seja renderizado pela primeira vez. +* [`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) +* [`startTransition`](/reference/react/startTransition) permite marcar uma atualização de estado como não urgente. Semelhante a [`useTransition`.](/reference/react/useTransition) diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index ff9032aac..2bf8941f8 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -4,7 +4,7 @@ title: createContext -`createContext` lets you create a [context](/learn/passing-data-deeply-with-context) that components can provide or read. +`createContext` permite que você crie um [contexto](/learn/passing-data-deeply-with-context) que componentes podem fornecer ou consumir. ```js const SomeContext = createContext(defaultValue) @@ -16,11 +16,11 @@ const SomeContext = createContext(defaultValue) --- -## Reference {/*reference*/} +## Referência {/*reference*/} ### `createContext(defaultValue)` {/*createcontext*/} -Call `createContext` outside of any components to create a context. +Invoque `createContext` fora de qualquer componente para criar um contexto. ```js import { createContext } from 'react'; @@ -28,26 +28,26 @@ import { createContext } from 'react'; const ThemeContext = createContext('light'); ``` -[See more examples below.](#usage) +[Veja mais exemplos abaixo.](#usage) -#### Parameters {/*parameters*/} +#### Parâmetros {/*parameters*/} -* `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. +* `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. -#### Returns {/*returns*/} +#### Retornos {/*returns*/} -`createContext` returns a context object. +`createContext` retorna um objeto de contexto. -**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: +**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: -* `SomeContext.Provider` lets you provide the context value to components. -* `SomeContext.Consumer` is an alternative and rarely used way to read the context value. +* `SomeContext.Provider` permite que você forneça o valor do contexto aos seus componentes. +* `SomeContext.Consumer` é uma alternativa raramanete usada como uma forma de consumir o valor de um contexto. --- ### `SomeContext.Provider` {/*provider*/} -Wrap your components into a context provider to specify the value of this context for all components inside: +Envolva seus componente em um provedor de contexto para especificar o valor desse contexto para todos os componentes dentro dele: ```js function App() { @@ -63,17 +63,17 @@ function App() { #### Props {/*provider-props*/} -* `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. +* `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. --- ### `SomeContext.Consumer` {/*consumer*/} -Before `useContext` existed, there was an older way to read context: +Antes do `useContext` existir, havia uma forma mais arcaica de consumir um contexto: ```js function Button() { - // 🟡 Legacy way (not recommended) + // 🟡 Jeito legado (não recomendado) return ( {theme => ( @@ -83,12 +83,11 @@ function Button() { ); } ``` - -Although this older way still works, but **newly written code should read context with [`useContext()`](/reference/react/useContext) instead:** +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:** ```js function Button() { - // ✅ Recommended way + // ✅ Jeito recomendado const theme = useContext(ThemeContext); return