`'s `color` to red without impacting `background-color`. Similarly, **different React contexts don't override each other.** Each context that you make with `createContext()` is completely separate from other ones, and ties together components using and providing *that particular* context. One component may use or provide many different contexts without a problem.
+No CSS, propriedades diferentes, como `color` e `background-color`, não se sobrepõem. Você pode definir todos os `
`'s `color` como vermelho sem impactar o `background-color`. Da mesma forma, **diferentes contextos do React não se sobrepõem.** Cada contexto que você faz com `createContext()` é completamente separado de outros, e amarra componentes que usam e fornecem *aquele contexto particular*. Um componente pode usar ou fornecer muitos contextos diferentes sem problemas.
-## Before you use context {/*before-you-use-context*/}
+## Antes de usar contexto {/*before-you-use-context*/}
-Context is very tempting to use! However, this also means it's too easy to overuse it. **Just because you need to pass some props several levels deep doesn't mean you should put that information into context.**
+O contexto é muito tentador para usar! No entanto, isso também significa que é fácil usá-lo em excesso. **Só porque você precisa passar algumas props várias camadas para baixo, não significa que deve colocar essa informação no contexto.**
-Here's a few alternatives you should consider before using context:
+Aqui estão algumas alternativas que você deve considerar antes de usar contexto:
-1. **Start by [passing props.](/learn/passing-props-to-a-component)** If your components are not trivial, it's not unusual to pass a dozen props down through a dozen components. It may feel like a slog, but it makes it very clear which components use which data! The person maintaining your code will be glad you've made the data flow explicit with props.
-2. **Extract components and [pass JSX as `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) to them.** If you pass some data through many layers of intermediate components that don't use that data (and only pass it further down), this often means that you forgot to extract some components along the way. For example, maybe you pass data props like `posts` to visual components that don't use them directly, like `
`. Instead, make `Layout` take `children` as a prop, and render `
`. This reduces the number of layers between the component specifying the data and the one that needs it.
+1. **Comece passando [props.](/learn/passing-props-to-a-component)** Se seus componentes não forem triviais, não é incomum passar uma dúzia de props através de uma dúzia de componentes. Pode parecer cansativo, mas isso torna muito claro quais componentes usam quais dados! A pessoa que mantiver seu código ficará feliz que você tornou o fluxo de dados explícito com as props.
+2. **Extraia componentes e [passe JSX como `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) para eles.** Se você passar alguns dados através de muitas camadas de componentes intermediários que não usam esses dados (e apenas os passam adiante), isso muitas vezes significa que você se esqueceu de extrair alguns componentes ao longo do caminho. Por exemplo, talvez você passe dados como `posts` para componentes visuais que não os usam diretamente, como `
`. Em vez disso, faça o `Layout` aceitar `children` como uma prop e renderize `
`. Isso reduz o número de camadas entre o componente que especifica os dados e o que os necessita.
-If neither of these approaches works well for you, consider context.
+Se nenhuma dessas abordagens funcionar bem para você, considere usar contexto.
-## Use cases for context {/*use-cases-for-context*/}
+## Casos de uso para contexto {/*use-cases-for-context*/}
-* **Theming:** If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in components that need to adjust their visual look.
-* **Current account:** Many components might need to know the currently logged in user. Putting it in context makes it convenient to read it anywhere in the tree. Some apps also let you operate multiple accounts at the same time (e.g. to leave a comment as a different user). In those cases, it can be convenient to wrap a part of the UI into a nested provider with a different current account value.
-* **Routing:** Most routing solutions use context internally to hold the current route. This is how every link "knows" whether it's active or not. If you build your own router, you might want to do it too.
-* **Managing state:** As your app grows, you might end up with a lot of state closer to the top of your app. Many distant components below may want to change it. It is common to [use a reducer together with context](/learn/scaling-up-with-reducer-and-context) to manage complex state and pass it down to distant components without too much hassle.
-
-Context is not limited to static values. If you pass a different value on the next render, React will update all the components reading it below! This is why context is often used in combination with state.
+* **Tematização:** Se seu aplicativo permite que o usuário mude sua aparência (por exemplo, modo escuro), você pode colocar um provedor de contexto no topo do seu aplicativo e usar esse contexto em componentes que precisam ajustar sua aparência visual.
+* **Conta atual:** Muitos componentes podem precisar saber qual usuário está logado atualmente. Colocá-lo no contexto torna conveniente lê-lo em qualquer lugar na árvore. Alguns aplicativos também permitem operar várias contas ao mesmo tempo (por exemplo, para deixar um comentário como um usuário diferente). Nesses casos, pode ser conveniente envolver uma parte da UI em um provedor aninhado com um valor de conta atual diferente.
+* **Roteamento:** A maioria das soluções de roteamento usa contexto internamente para manter a rota atual. É assim que todos os links "sabem" se estão ativos ou não. Se você construir seu próprio roteador, pode querer fazer o mesmo.
+* **Gerenciamento de estado:** À medida que seu aplicativo cresce, você pode acabar com muito estado mais próximo do topo do seu aplicativo. Muitos componentes distantes abaixo podem querer alterá-lo. É comum [usar um redutor junto com contexto](/learn/scaling-up-with-reducer-and-context) para gerenciar estados complexos e passá-los para componentes distantes sem muito esforço.
-In general, if some information is needed by distant components in different parts of the tree, it's a good indication that context will help you.
+O contexto não está limitado a valores estáticos. Se você passar um valor diferente na próxima renderização, o React atualizará todos os componentes que o leem abaixo! É por isso que o contexto é frequentemente usado em combinação com o estado.
+
+Em geral, se algumas informações são necessárias por componentes distantes em diferentes partes da árvore, é uma boa indicação de que o contexto ajudará você.
-* Context lets a component provide some information to the entire tree below it.
-* To pass context:
- 1. Create and export it with `export const MyContext = createContext(defaultValue)`.
- 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep.
- 3. Wrap children into `` to provide it from a parent.
-* Context passes through any components in the middle.
-* Context lets you write components that "adapt to their surroundings".
-* Before you use context, try passing props or passing JSX as `children`.
+* O contexto permite que um componente forneça algumas informações para toda a árvore abaixo dele.
+* Para passar contexto:
+ 1. Crie e exporte usando `export const MyContext = createContext(defaultValue)`.
+ 2. Passe-o para o Hook `useContext(MyContext)` para lê-lo em qualquer componente filho, não importa quão profundo.
+ 3. Envolva os filhos em `` para fornecê-lo a partir de um pai.
+* O contexto passa através de qualquer componente no meio.
+* O contexto permite que você escreva componentes que "se adaptam ao seu ambiente".
+* Antes de usar contexto, tente passar props ou passar JSX como `children`.
-#### Replace prop drilling with context {/*replace-prop-drilling-with-context*/}
+#### Substitua o prop drilling por contexto {/*replace-prop-drilling-with-context*/}
-In this example, toggling the checkbox changes the `imageSize` prop passed to each ``. The checkbox state is held in the top-level `App` component, but each `` needs to be aware of it.
+Neste exemplo, alternar a caixa de seleção altera a prop `imageSize` passada para cada ``. O estado da caixa de seleção é mantido no componente `App` de nível superior, mas cada `` precisa estar ciente disso.
-Currently, `App` passes `imageSize` to `List`, which passes it to each `Place`, which passes it to the `PlaceImage`. Remove the `imageSize` prop, and instead pass it from the `App` component directly to `PlaceImage`.
+Atualmente, `App` passa `imageSize` para `List`, que a passa para cada `Place`, que a passa para `PlaceImage`. Remova a prop `imageSize` e, em vez disso, passe-a diretamente do componente `App` para `PlaceImage`.
-You can declare context in `Context.js`.
+Você pode declarar o contexto em `Context.js`.
@@ -905,7 +905,7 @@ export default function App() {
setIsLarge(e.target.checked);
}}
/>
- Use large images
+ Usar imagens grandes
@@ -959,38 +959,38 @@ function PlaceImage({ place, imageSize }) {
```js src/data.js
export const places = [{
id: 0,
- name: 'Bo-Kaap in Cape Town, South Africa',
- description: 'The tradition of choosing bright colors for houses began in the late 20th century.',
+ name: 'Bo-Kaap em Cape Town, África do Sul',
+ description: 'A tradição de escolher cores vibrantes para as casas começou no final do século 20.',
imageId: 'K9HVAGH'
}, {
id: 1,
- name: 'Rainbow Village in Taichung, Taiwan',
- description: 'To save the houses from demolition, Huang Yung-Fu, a local resident, painted all 1,200 of them in 1924.',
+ name: 'Rainbow Village em Taichung, Taiwan',
+ description: 'Para salvar as casas da demolição, Huang Yung-Fu, um residente local, pintou todas as 1.200 delas em 1924.',
imageId: '9EAYZrt'
}, {
id: 2,
- name: 'Macromural de Pachuca, Mexico',
- description: 'One of the largest murals in the world covering homes in a hillside neighborhood.',
+ name: 'Macromural de Pachuca, México',
+ description: 'Um dos maiores murais do mundo cobrindo casas em um bairro na encosta da colina.',
imageId: 'DgXHVwu'
}, {
id: 3,
- name: 'Selarón Staircase in Rio de Janeiro, Brazil',
- description: 'This landmark was created by Jorge Selarón, a Chilean-born artist, as a "tribute to the Brazilian people."',
+ name: 'Escadaria Selarón no Rio de Janeiro, Brasil',
+ description: 'Este marco foi criado por Jorge Selarón, um artista nascido no Chile, como um "tributo ao povo brasileiro."',
imageId: 'aeO3rpI'
}, {
id: 4,
- name: 'Burano, Italy',
- description: 'The houses are painted following a specific color system dating back to 16th century.',
+ name: 'Burano, Itália',
+ description: 'As casas são pintadas seguindo um sistema específico de cores que data do século 16.',
imageId: 'kxsph5C'
}, {
id: 5,
- name: 'Chefchaouen, Marocco',
- description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.',
+ name: 'Chefchaouen, Marrocos',
+ description: 'Existem algumas teorias sobre por que as casas são pintadas de azul, incluindo que a cor repele mosquitos ou que simboliza o céu e o paraíso.',
imageId: 'rTqKo46'
}, {
id: 6,
- name: 'Gamcheon Culture Village in Busan, South Korea',
- description: 'In 2009, the village was converted into a cultural hub by painting the houses and featuring exhibitions and art installations.',
+ name: 'Vila Cultural Gamcheon em Busan, Coreia do Sul',
+ description: 'Em 2009, a vila foi convertida em um centro cultural pintando as casas e apresentando exposições e instalações de arte.',
imageId: 'ZfQOOzf'
}];
```
@@ -1020,9 +1020,9 @@ li {
-Remove `imageSize` prop from all the components.
+Remova a prop `imageSize` de todos os componentes.
-Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`:
+Crie e exporte `ImageSizeContext` de `Context.js`. Então envolva o List em `` para passar o valor para baixo, e `useContext(ImageSizeContext)` para lê-lo em `PlaceImage`:
@@ -1047,7 +1047,7 @@ export default function App() {
setIsLarge(e.target.checked);
}}
/>
- Use large images
+ Usar imagens grandes
@@ -1098,38 +1098,38 @@ export const ImageSizeContext = createContext(500);
```js src/data.js
export const places = [{
id: 0,
- name: 'Bo-Kaap in Cape Town, South Africa',
- description: 'The tradition of choosing bright colors for houses began in the late 20th century.',
+ name: 'Bo-Kaap em Cape Town, África do Sul',
+ description: 'A tradição de escolher cores vibrantes para as casas começou no final do século 20.',
imageId: 'K9HVAGH'
}, {
id: 1,
- name: 'Rainbow Village in Taichung, Taiwan',
- description: 'To save the houses from demolition, Huang Yung-Fu, a local resident, painted all 1,200 of them in 1924.',
+ name: 'Rainbow Village em Taichung, Taiwan',
+ description: 'Para salvar as casas da demolição, Huang Yung-Fu, um residente local, pintou todas as 1.200 delas em 1924.',
imageId: '9EAYZrt'
}, {
id: 2,
- name: 'Macromural de Pachuca, Mexico',
- description: 'One of the largest murals in the world covering homes in a hillside neighborhood.',
+ name: 'Macromural de Pachuca, México',
+ description: 'Um dos maiores murais do mundo cobrindo casas em um bairro na encosta da colina.',
imageId: 'DgXHVwu'
}, {
id: 3,
- name: 'Selarón Staircase in Rio de Janeiro, Brazil',
- description: 'This landmark was created by Jorge Selarón, a Chilean-born artist, as a "tribute to the Brazilian people".',
+ name: 'Escadaria Selarón no Rio de Janeiro, Brasil',
+ description: 'Este marco foi criado por Jorge Selarón, um artista nascido no Chile, como um "tributo ao povo brasileiro".',
imageId: 'aeO3rpI'
}, {
id: 4,
- name: 'Burano, Italy',
- description: 'The houses are painted following a specific color system dating back to 16th century.',
+ name: 'Burano, Itália',
+ description: 'As casas são pintadas seguindo um sistema específico de cores que data do século 16.',
imageId: 'kxsph5C'
}, {
id: 5,
- name: 'Chefchaouen, Marocco',
- description: 'There are a few theories on why the houses are painted blue, including that the color repels mosquitos or that it symbolizes sky and heaven.',
+ name: 'Chefchaouen, Marrocos',
+ description: 'Existem algumas teorias sobre por que as casas são pintadas de azul, incluindo que a cor repele mosquitos ou que simboliza o céu e o paraíso.',
imageId: 'rTqKo46'
}, {
id: 6,
- name: 'Gamcheon Culture Village in Busan, South Korea',
- description: 'In 2009, the village was converted into a cultural hub by painting the houses and featuring exhibitions and art installations.',
+ name: 'Vila Cultural Gamcheon em Busan, Coreia do Sul',
+ description: 'Em 2009, a vila foi convertida em um centro cultural pintando as casas e apresentando exposições e instalações de arte.',
imageId: 'ZfQOOzf'
}];
```
@@ -1157,8 +1157,8 @@ li {
-Note how components in the middle don't need to pass `imageSize` anymore.
+Note como os componentes no meio não precisam passar `imageSize` mais.
-
+
\ No newline at end of file