Grammatical fixes (#583)

* Grammatical fixes

* forgotten files

* Remove wrong path

Author: jesselopespereira

content/docs/code-splitting.md

@@ -76,7 +76,7 @@ Quando o Webpack encontra esta sintaxe, automaticamente ele divide o código de
 
 Se você está configurando o Webpack manualmente, provavelmente vai querer ler o [guia de divisão de código](https://webpack.js.org/guides/code-splitting/) do Webpack. Sua configuração do Webpack deverá ser parecida [com isto](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269).
 
-Ao usar o [Babel](https://babeljs.io/), você precisa se certificar que o Babel consegue analizar a sintaxe de importação dinâmica mas não está a transformando. Para isso, você precisará do [@babel/plugin-syntax-dynamic-import](https://classic.yarnpkg.com/en/package/@babel/plugin-syntax-dynamic-import).
+Ao usar o [Babel](https://babeljs.io/), você precisa se certificar que o Babel consegue analisar a sintaxe de importação dinâmica mas não está a transformando. Para isso, você precisará do [@babel/plugin-syntax-dynamic-import](https://classic.yarnpkg.com/en/package/@babel/plugin-syntax-dynamic-import).
 
 ## `React.lazy` {#reactlazy}
 
@@ -112,7 +112,7 @@ const OtherComponent = React.lazy(() => import('./OtherComponent'));
 function MyComponent() {
   return (
     <div>
-      <Suspense fallback={<div>Loading...</div>}>
+      <Suspense fallback={<div>Carregando...</div>}>
         <OtherComponent />
       </Suspense>
     </div>
@@ -131,7 +131,7 @@ const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
 function MyComponent() {
   return (
     <div>
-      <Suspense fallback={<div>Loading...</div>}>
+      <Suspense fallback={<div>Carregando...</div>}>
         <section>
           <OtherComponent />
           <AnotherComponent />
@@ -156,7 +156,7 @@ const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
 const MyComponent = () => (
   <div>
     <MyErrorBoundary>
-      <Suspense fallback={<div>Loading...</div>}>
+      <Suspense fallback={<div>Carregando...</div>}>
         <section>
           <OtherComponent />
           <AnotherComponent />
@@ -184,7 +184,7 @@ const About = lazy(() => import('./routes/About'));
 
 const App = () => (
   <Router>
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense fallback={<div>Carregando...</div>}>
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />

content/docs/codebase-overview.md

@@ -40,11 +40,11 @@ O código-base do React usa `console.error` para exibir avisos:
 
 ```js
 if (__DEV__) {
-  console.error('Something is wrong.');
+  console.error('Algo está errado.');
 }
 ```
 
-Os alertas só são ativados no desenvolvimento. Na produção, eles são  retirados. Se você precisar impedir a execuçāo de algum caminho do código, use o módulo `invariant` em vez disso:
+Os alertas só são ativados no desenvolvimento. Na produção, eles são  retirados. Se você precisar impedir a execução de algum caminho do código, use o módulo `invariant` em vez disso:
 
 ```js
 var invariant = require('invariant');
@@ -63,7 +63,7 @@ invariant(
 
 ### Desenvolvimento e produção {#development-and-production}
 
-Você pode usar a variável pseudo-global ` __DEV__` no código-base para proteger blocos de código usados apenas no desenvolvimento.
+Você pode usar a variável pseudo-global `__DEV__` no código-base para proteger blocos de código usados apenas no desenvolvimento.
 
 Ele é embutido durante a etapa de compilação e se transforma em verificações `process.env.NODE_ENV! == 'production'` nos builds do CommonJS.
 
@@ -115,21 +115,21 @@ O React foi originalmente criado para o DOM, mas depois foi adaptado para també
 
 **Os renderizadores gerenciam como uma árvore no React se transforma nas chamadas de subjacentes da plataforma.**
 
-Renderizadores tambéms são encontrados em [`packages/`](https://github.com/facebook/react/tree/main/packages/):
+Renderizadores também são encontrados em [`packages/`](https://github.com/facebook/react/tree/main/packages/):
 
 * [Renderizador de React DOM](https://github.com/facebook/react/tree/main/packages/react-dom) renderiza componentes React para o DOM. Implementa [APIs do `React` de nível superior](/docs/react-dom.html) e está disponível como pacote npm [`react-dom`](https://www.npmjs.com/package/react-dom). Ele também pode ser usado como um pacote de navegador autônomo chamado `react-dom.js` que exporta um global do `ReactDOM`.
 * [Renderizador do React Native](https://github.com/facebook/react/tree/main/packages/react-native-renderer) renderiza componentes React para views nativas. É usado internamente pelo React Native.
 * [Renderizador de testes do React](https://github.com/facebook/react/tree/main/packages/react-test-renderer) renderiza componentes React para árvores JSON. É usado pela funcionalidade de [teste de Snapshot](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) atributo do [Jest](https://facebook.github.io/jest) e está disponível como pacote npm [react-test-renderer](https://www.npmjs.com/package/react-test-renderer) .
 
-O único outro renderizador oficialmente suportado é o [`react-art`](https://github.com/facebook/react/tree/main/packages/react-art). Costumava estar em um [repositorio GitHub](https://github.com/reactjs/react-art) separado mas nós os movemos para a árvore de código principal.
+O único outro renderizador oficialmente suportado é o [`react-art`](https://github.com/facebook/react/tree/main/packages/react-art). Costumava estar em um [repositório GitHub](https://github.com/reactjs/react-art) separado mas nós os movemos para a árvore de código principal.
 
 >**Nota:**
 >
 >Tecnicamente o [`react-native-renderer`](https://github.com/facebook/react/tree/main/packages/react-native-renderer) é uma camada muito fina que ensina o React a interagir com a implementação do React Native. O código específico da plataforma real que gerencia as views nativas reside no [repositório do React Native](https://github.com/facebook/react-native) junto com seus componentes.
 
 ### Reconciliadores {#reconcilers}
 
-Até mesmo renderizadores muito diferentes, como o React DOM e o React Native, precisam compartilhar muita lógica. Em particular, o algoritmo de  [reconciliação](/docs/reconciliation.html) deve ser o mais semelhante possível para que a renderização declarativa, os componentes personalizados, o state, os lifecycle méthods e os refs funcionem de maneira consistente em todas as plataformas.
+Até mesmo renderizadores muito diferentes, como o React DOM e o React Native, precisam compartilhar muita lógica. Em particular, o algoritmo de  [reconciliação](/docs/reconciliation.html) deve ser o mais semelhante possível para que a renderização declarativa, os componentes personalizados, o state, os lifecycle methods e os refs funcionem de maneira consistente em todas as plataformas.
 
 Para resolver isso, diferentes renderizadores compartilham algum código entre eles. Nós chamamos essa parte do React de "reconciliador". Quando uma atualização como `setState()` está agendado, o reconciliador chama o método `render()` em componentes na árvore e monta, atualiza ou desmonta.
 

content/docs/components-and-props.md

@@ -26,7 +26,7 @@ A maneira mais simples de definir um componente é escrever uma função JavaScr
 
 ```js
 function Welcome(props) {
-  return <h1>Hello, {props.name}</h1>;
+  return <h1>Olá, {props.name}</h1>;
 }
 ```
 
@@ -37,7 +37,7 @@ Você também pode usar uma [classe ES6](https://developer.mozilla.org/pt-BR/doc
 ```js
 class Welcome extends React.Component {
   render() {
-    return <h1>Hello, {this.props.name}</h1>;
+    return <h1>Olá, {this.props.name}</h1>;
   }
 }
 ```
@@ -62,11 +62,11 @@ const element = <Welcome name="Sara" />;
 
 Quando o React vê um elemento representando um componente definido pelo usuário, ele passa atributos JSX e componentes filhos para esse componente como um único objeto. Nós chamamos esse objeto de "props". 
 
-Por exemplo, esse código renderiza "Hello, Sara" na página:
+Por exemplo, esse código renderiza "Olá, Sara" na página:
 
 ```js{1,5}
 function Welcome(props) {
-  return <h1>Hello, {props.name}</h1>;
+  return <h1>Olá, {props.name}</h1>;
 }
 
 const element = <Welcome name="Sara" />;
@@ -76,14 +76,14 @@ ReactDOM.render(
 );
 ```
 
-**[Try it on CodePen](https://codepen.io/gaearon/pen/YGYmEG?editors=1010)**
+**[Experimente no CodePen](https://codepen.io/gaearon/pen/YGYmEG?editors=1010)**
 
 Vamos recapitular o que acontece nesse exemplo:
 
 1. Nós chamamos `ReactDOM.render()` com o elemento `<Welcome name="Sara" />`.
 2. React chama o componente `Welcome` com `{name: 'Sara'}` como props.
-3. Nosso componente `Welcome` retorna um elemento `<h1>Hello, Sara</h1>` como resultado.
-4. React DOM atualiza eficientemente o DOM para corresponder `<h1>Hello, Sara</h1>`.
+3. Nosso componente `Welcome` retorna um elemento `<h1>Olá, Sara</h1>` como resultado.
+4. React DOM atualiza eficientemente o DOM para corresponder `<h1>Olá, Sara</h1>`.
 
 >**Nota:** Sempre inicie os nomes dos componentes com uma letra maiúscula.
 >
@@ -99,7 +99,7 @@ Por exemplo, nós podemos criar um componente `App` que renderiza `Welcome` muit
 
 ```js{8-10}
 function Welcome(props) {
-  return <h1>Hello, {props.name}</h1>;
+  return <h1>Olá, {props.name}</h1>;
 }
 
 function App() {
@@ -118,7 +118,7 @@ ReactDOM.render(
 );
 ```
 
-**[Try it on CodePen](https://codepen.io/gaearon/pen/KgQKPr?editors=1010)**
+**[Experimente no CodePen](https://codepen.io/gaearon/pen/KgQKPr?editors=1010)**
 
 Tipicamente, novos aplicativos React tem um único componente `App` no topo. Contudo, se você integrar o React em um aplicativo existente, você pode começar de baixo para cima com um pequeno componente como o `Button` e gradualmente chegar ao topo da hierarquia de exibição.
 
@@ -152,7 +152,7 @@ function Comment(props) {
 }
 ```
 
-**[Try it on CodePen](https://codepen.io/gaearon/pen/VKQwEo?editors=1010)**
+**[Experimente no CodePen](https://codepen.io/gaearon/pen/VKQwEo?editors=1010)**
 
 Ele aceita `author` (um objeto), `text` (uma string) e `date` (uma data) como props e descreve um comentário em um site de mídia social.
 
@@ -231,7 +231,7 @@ function Comment(props) {
 }
 ```
 
-**[Try it on CodePen](https://codepen.io/gaearon/pen/rrJNJY?editors=1010)**
+**[Experimente no CodePen](https://codepen.io/gaearon/pen/rrJNJY?editors=1010)**
 
 Extrair componentes pode parecer um trabalho pesado no começo, mas ter uma paleta de componentes reutilizáveis compensa em aplicativos maiores. Uma boa regra é que se uma parte da sua UI for usada várias vezes (`Button`, `Panel`, `Avatar`) ou for complexa o suficiente por si só (`App`, `FeedStory`, `Comment`) é uma boa candidata a ser extraída para um componente separado.
 

content/docs/composition-vs-inheritance.md

@@ -166,6 +166,6 @@ class SignUpDialog extends React.Component {
 
 No Facebook, nós usamos o React em milhares de componentes, e não encontramos nenhum caso que recomendaríamos criar componentes utilizando hierarquia de herança.
 
-O uso de props e composição irá te dar toda flexibilidade que você precisa para customizar o comportamento e aparência dos componentes, de uma maneira explícita e segura. Lembre-se de que os componentes podem aceitar um número variável de props, incluindo valores primitivos, como int, array, boolean; assim como elementos Reacts e funções.
+O uso de props e composição irá te dar toda flexibilidade que você precisa para customizar o comportamento e aparência dos componentes, de uma maneira explícita e segura. Lembre-se de que os componentes podem aceitar um número variável de props, incluindo valores primitivos, como int, array, boolean; assim como elementos React e funções.
 
 E se você desejar reutilizar funcionalidades (não gráficas) entre componentes, sugerimos que você a extraia em módulos JavaScript. Os componentes podem importar essa função, objeto ou classe sem precisar estender.

content/docs/concurrent-mode-adoption.md

@@ -95,7 +95,7 @@ De acordo com nossa experiência, utilizar os padrões idiomáticos do React no
 
 Para códigos antigos, o Modo Concorrente pode ser um passo muito grande. Este é o motivo de nós também termos disponibilizado o novo "Modo Bloqueante" nas versões experimentais do React. Você pode testá-lo substituindo `createRoot` por `createBlockingRoot`. Isso apenas confere uma *pequena parte* dos recursos presentes no Modo Concorrente, mas é mais próximo da forma como o React funciona hoje e pode servir como um passo na migração.
 
-Para recaptular:
+Para recapitular:
 
 * **Modo Legado:** `ReactDOM.render(<App />, rootNode)`. Está é a forma que os aplicativos React usam hoje. Não existem planos para remover o Modo Legado num futuro próximo — mas não será possível dar suporte para esses novos recursos.
 * **Modo Bloqueante:** `ReactDOM.createBlockingRoot(rootNode).render(<App />)`. Atualmente é experimental. A intenção é que seja um primeiro passo na migração para aplicativos que desejam utilizar uma parte dos recursos do Modo Concorrente.
@@ -141,4 +141,4 @@ Você pode pensar no Modo Bloqueante como uma versão suavemente degradada do Mo
 
 \*: O modo Legado possui eventos gerenciados pelo React em lote mas é limitado a uma tarefa do navegador. Eventos que não são do React podem utilizá-lo através do `unstable_batchedUpdates`. No Modo Bloqueante e Concorrente, todos os `setState`s são feitos em lote por padrão.
 
-\*\*: Avisa em desenvolvimento.
+\*\*: Avisa que está em desenvolvimento.

content/docs/concurrent-mode-intro.md

@@ -46,7 +46,7 @@ Antes da existência do controle de versão, o fluxo de trabalho de desenvolvime
 
 Isso ilustra como as bibliotecas de UI, incluindo React, normalmente funcionam hoje. Depois que eles começam a renderizar uma atualização, incluindo a criação de novos nós do DOM e a execução do código nos componentes, eles não podem interromper esse trabalho. Vamos chamar essa abordagem de "bloqueio de renderização".
 
-Em Modo Concorrente, a renderização e não bloqueante. É interruptível. Isso melhora a experiência do usuário. Também desbloqueia novos recursos que antes não eram possíveis. Antes de examinarmos exemplos concretos nos [próximos](/docs/concurrent-mode-suspense.html) [capítulos](/docs/concurrent-mode-patterns.html), faremos uma visão geral de alto nível dos novos recursos.
+Em Modo Concorrente, a renderização e não bloqueante. É ininterruptível. Isso melhora a experiência do usuário. Também desbloqueia novos recursos que antes não eram possíveis. Antes de examinarmos exemplos concretos nos [próximos](/docs/concurrent-mode-suspense.html) [capítulos](/docs/concurrent-mode-patterns.html), faremos uma visão geral de alto nível dos novos recursos.
 
 ### Renderização interrompida {#interruptible-rendering}
 
@@ -56,11 +56,11 @@ Uma maneira comum de contornar a gagueira é "rejeitar" a entrada. Ao rebater, a
 
 A razão para os travamentos são simples: uma vez iniciada a renderização, ela não pode ser interrompida. Portanto, o navegador não pode atualizar a entrada de texto logo após pressionar a tecla. Independentemente da aparência de uma biblioteca de interface do usuário (como React), se ela usa a renderização de bloqueante, uma certa quantidade de trabalho em seus componentes sempre causarão travamentos. E, muitas vezes, não há solução fácil.
 
-**O Modo Concorrente corrige essa limitação fundamental, tornando a renderização interrompível.** Isso significa que quando o usuário pressiona outra tecla, o React não precisa impedir o navegador de atualizar a entrada de texto. Em vez disso, ele pode deixar o navegador pintar uma atualização na entrada e continuar renderizando a lista atualizada *na memória*. Quando a renderização é concluída, o React atualiza o DOM e as alterações são refletidas na tela.
+**O Modo Concorrente corrige essa limitação fundamental, tornando a renderização ininterruptível.** Isso significa que quando o usuário pressiona outra tecla, o React não precisa impedir o navegador de atualizar a entrada de texto. Em vez disso, ele pode deixar o navegador pintar uma atualização na entrada e continuar renderizando a lista atualizada *na memória*. Quando a renderização é concluída, o React atualiza o DOM e as alterações são refletidas na tela.
 
 Conceitualmente, você pode pensar nisso como React preparando todas as atualizações "em uma _branch_". Assim como você pode abandonar o trabalho em _branches_ ou alternar entre elas, o React no modo concorrente pode interromper uma atualização contínua para fazer algo mais importante e depois voltar ao que estava fazendo anteriormente. Essa técnica também pode lembrá-lo do [buffer duplo](https://wiki.osdev.org/Double_Buffering) nos videogames.
 
-As técnicas do modo concorrente reduzem a necessidade de renúncia e limitação na interface do usuário. Como a renderização é interrompível, o React não precisa *atrasar* artificialmente o trabalho para evitar interrupções. Ele pode começar a renderizar imediatamente, mas interrompa esse trabalho quando necessário para manter o aplicativo responsivo.
+As técnicas do modo concorrente reduzem a necessidade de renúncia e limitação na interface do usuário. Como a renderização é ininterruptível, o React não precisa *atrasar* artificialmente o trabalho para evitar interrupções. Ele pode começar a renderizar imediatamente, mas interrompa esse trabalho quando necessário para manter o aplicativo responsivo.
 
 ### Sequências de Carregamento Intencionais {#intentional-loading-sequences}