Merge pull request #3 from vinicius77/translate-docs

Translate docs

Author: GiselaMD

README.md

@@ -25,7 +25,7 @@
 
 <div align="center">
 
-:wave:  Este repositório é mantido por [@giseladifini](https://twitter.com/GiselaDifini) e [@swyx](https://twitter.com/swyx). Estamos muito felizes que você quer experimentar React com Typescript! 
+:wave: Este repositório é mantido por [@giseladifini](https://twitter.com/GiselaDifini) e [@swyx](https://twitter.com/swyx). Estamos muito felizes que você quer experimentar React com Typescript!
 Se você perceber algo de errado ou faltando, por favor abra uma [issue](https://github.com/typescript-cheatsheets/react-pt/issues/new)! :+1:
 
 </div>
@@ -52,3 +52,161 @@ Se você perceber algo de errado ou faltando, por favor abra uma [issue](https:/
   - ⚠️ Esta é uma nova cheatsheet, toda a assistência é bem-vinda.
 
 ---
+
+### Tabela de conteúdos da Cheatsheet básica
+
+<details>
+
+<summary><b>Expandir Tabela de Conteúdo</b></summary>
+
+<!--START-SECTION:setup-toc-->
+
+- [Seção 1: Configuração](#seção-1-configuração)
+- [Pré-requisitos](#pré-requisitos)
+- [Ferramentas iniciais de React + TypeScript](#ferramentas-iniciais-de-react--typeScript)
+- [Importar React](#importar-react)
+<!--END-SECTION:setup-toc-->
+- [Seção 2: Primeiros Passos](#seção-2-primeiros-passos)
+  - [Componente de Função](#componente-de-função)
+  - [Hooks](#hooks)
+  - [useState](#usestate)
+  - [useReducer](#usereducer)
+  - [useEffect](#useeffect)
+  - [useRef](#useref)
+  - [useImperativeHandle](#useimperativehandle)
+  - [Hooks Customizados](#custom-hooks)
+  - [Componentes de Classe](#class-components)
+  - [Talvez você não precise do `defaultProps`](#you-may-not-need-defaultprops)
+  - ["Tipando" `defaultProps`](#typing-defaultprops)
+  - [Consumindo Props de um Componente com defaultProps](#consuming-props-of-a-component-with-defaultprops)
+    - [Declaração do Problema](#problem-statement)
+    - [Solução](#solution)
+  - [Discussões e Conhecimentos Diversos](#misc-discussions-and-knowledge)
+  - [Tipos ou Interfaces?](#types-or-interfaces)
+  - [Exemplos básicos do tipo Prop](#basic-prop-types-examples)
+  - [Exemplos úteis do tipo React Prop](#useful-react-prop-type-examples)
+  - [getDerivedStateFromProps](#getDerivedStateFromProps)
+  - [Formulários e Eventos](#forms-and-events)
+  - [Context](#context)
+  - [Exemplo Básico](#basic-example)
+  - [Exemplo Extendido](#extended-example)
+  - [forwardRef/createRef](#forwardrefcreateref)
+  - [Portais](#portals)
+  - [Limites de erros](#error-boundaries)
+    - [Opção 1: Usando react-error-boundary](#option-1-using-react-error-boundary)
+    - [Opção 2: Criando um componente "error boundary" personalizado](#options-2-writing-your-custom-error-boundary-component)
+  - [Concurrent React/React Suspense](#concurrent-reactreact-suspense)
+  <!--START-SECTION:types-toc-->
+- [Manual de resolução de problemas: Tipos](#troubleshooting-handbook-types)
+  - [Tipos de União e Tipos de Proteção](#union-types-and-type-guarding)
+  - [Tipos Opcionais](#optional-types)
+  - [Tipos de Enum](#enum-types)
+  - [Tipos de Asserção](#type-assertion)
+  - [Simulando Tipos Nominais](#simulating-nominal-types)
+  - [Tipos de Interseção](#intersection-types)
+  - [Tipos de União](#union-types)
+  - [Sobrecarregando Tipos de Função](#overloading-function-types)
+  - [Usando Tipos Inferidos](#using-inferred-types)
+  - [Usando Tipos Parciais](#using-partial-types)
+  - [Os Tipos de que preciso não foram exportados!](#the-types-i-need-werent-exported)
+  - [Os Tipos de que preciso não existem!](#the-types-i-need-dont-exist)
+    - [Exagerando com `any` em tudo](#slapping-any-on-everything)
+    - [Autogerando tipos](#autogenerate-types)
+    - [Tipando Hooks Exportados](#typing-exported-hooks)
+    - [Tipando Componentes Exportados](#typing-exported-components)
+    <!--END-SECTION:types-toc-->
+- [Manual de resolução de problemas: Operadores](#troubleshooting-handbook-operators)
+- [Manual de resolução de problemas: Utilitários](#troubleshooting-handbook-utilities)
+- [Manual de resolução de problemas: tsconfig.json](#troubleshooting-handbook-tsconfigjson)
+- [Manual de resolução de problemas: Erros en tipos oficiais](#troubleshooting-handbook-bugs-in-official-typings)
+- [Bases de código de React + TypeScript recomendadas para aprender](#recommended-react--typescript-codebases-to-learn-from)
+- [Ferramentas e integração em editores](#editor-tooling-and-integration)
+- [Linting](#linting)
+- [Outros recursos sobre React + TypeScript](#other-react--typescript-resources)
+- [Discussões recomendadas sobre React + TypeScript](#recommended-react--typescript-talks)
+- [Hora de realmente aprender TypeScript](#time-to-really-learn-typescript)
+- [Aplicação de Exemplo](#example-app)
+- [Minha pergunta não foi respondida aqui!](#my-question-isnt-answered-here)
+  - [Contribuidores](#contributors)
+
+</details>
+
+<!--START-SECTION:setup-->
+
+# Seção 1: Configuração
+
+## Pré-requisitos
+
+1. Uma boa compreensão de [React](https://reactjs.org).
+2. Familiaridade com os tipos básicos de [TypeScript](https://www.typescriptlang.org/docs/handbook/basic-types.html) ( [O guia de 2ality](http://2ality.com/2018/04/type-notation-typescript.html) é de grande ajuda. Se você é completamente novato em TypeScript, dê uma olhada no [tutorial de chibicode](https://ts.chibicode.com/todo/) ).
+3. Ter lido [a seção de TypeScript na documentação oficial do React](https://reactjs.org/docs/static-type-checking.html#typescript).
+4. Ter lido [a seção do React do novo playground de TypeScript](http://www.typescriptlang.org/play/index.html?jsx=2&esModuleInterop=true&e=181#example/typescript-with-react) ( Opcional: também acompanhar os mais de 40 exemplos na seção de exemplos do [playground](http://www.typescriptlang.org/play/index.html) ).
+
+Este guia sempre assumirá que você está usando a última versão de Typescript. Notas para versões mais antigas usarão a etiqueta `<details>`.
+
+## Ferramentas iniciais de React + TypeScript
+
+Configurações na nuvem:
+
+- [Playground do TypeScript com React](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwCwAUKJLHAN5wCuqWAyjMhhYANFx4BRAgSz44AXzhES5Snhi1GjLAA8W8XBAB2qeAGEInQ0KjjtycABsscALxwAFAEpXAPnaM4OANjeABtA0sYUR4Yc0iAXVcxPgEhdwAGT3oGAOTJaXx3L19-BkDAgBMIXE4QLCsAOhhgGCckgAMATQsgh2BcAGssCrgAEjYIqwVmutR27MC5LM0yuEoYTihDD1zAgB4K4AA3H13yvbAfbs5e-qGRiYspuBmsVD2Aekuz-YAjThgMCMcCMpj6gxcbGKLj8MTiVnck3gAGo4ABGTxyU6rcrlMF3OB1H5wT7-QFGbG4z6HE65ZYMOSMIA) apenas se você estiver depurando tipos (e relatando problemas), não para executar código.
+- [CodeSandbox](http://ts.react.new) - IDE na nuvem, inicializa super rápido.
+- [Stackblitz](https://stackblitz.com/edit/react-typescript-base) - IDE na nuvem, inicializa super rápido.
+
+Configurações de desenvolvimento local:
+
+- [Next.js](https://nextjs.org/docs/basic-features/typescript): `npx create-next-app -e with-typescript` irá criar no seu diretório atual.
+- [Create React App](https://facebook.github.io/create-react-app/docs/adding-typescript): `npx create-react-app name-of-app --template typescript` irá criar em um novo diretório.
+- [Meteor](https://guide.meteor.com/build-tool.html#typescript): `meteor create --typescript name-of-my-new-typescript-app`
+- [Ignite](https://github.com/infinitered/ignite#use-ignite-andross-infinite-red-andross-boilerplate) para React Native: `ignite new myapp`
+- [TSDX](https://tsdx.io/): `npx tsdx create mylib` para Creating React+TS _libraries_
+
+<details>
+<summary>
+Outras ferramentas
+</summary>
+
+Ferramentas menos maduras mas que vale a pena conferir:
+
+- [Vite](https://twitter.com/swyx/status/1282727239230996480?lang=en): `npm init vite-app my-react-project --template react-ts` (nota - ainda não está na versão v1.0, mas é muito rápida).
+- [Snowpack](<https://www.snowpack.dev/#create-snowpack-app-(csa)>): `npx create-snowpack-app my-app --template app-template-react-typescript`
+- [Docusaurus v2](https://v2.docusaurus.io/docs/installation) com [suporte a TypeScript](https://v2.docusaurus.io/docs/typescript-support)
+- [Parcel](https://v2.parceljs.org/languages/typescript/)
+- [JP Morgan's `modular`](https://github.com/jpmorganchase/modular): CRA + TS + Yarn Workspaces toolkit. `yarn create modular-react-app <project-name>`
+
+Manual de configuração:
+
+- [O guia de Basarat](https://github.com/basarat/typescript-react/tree/master/01%20bootstrap) para uma **configuração manual** de React + TypeScript + Webpack + Babel.
+- Em particular, certifique-se de ter instalado `@types/react` e `@types/react-dom` .( [Leia mais sobre o projeto DefinitelyTyped caso você não esteja familiarizado](https://definitelytyped.org/) ).
+- Existem também muitos _boilerplates_ de React + Typescript. Por favor consulte [nossa lista de outros recursos](https://react-typescript-cheatsheet.netlify.app/docs/basic/recommended/resources/).
+
+</details>
+
+## Import React
+
+```tsx
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+```
+
+Este é o [caminho mais seguro no futuro](https://www.reddit.com/r/reactjs/comments/iyehol/import_react_from_react_will_go_away_in_distant/) para importar React. Se você definir `--allowSyntheticDefaultImports` (ou adicionar` "allowSyntheticDefaultImports": true`) em seu `tsconfig.json`, você poderá importar como se faz normalmente em jsx:
+
+```tsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+```
+
+<details>
+
+<summary>Explicação</summary>
+
+Por que usar `allowSyntheticDefaultImports` ao invés de `esModuleInterop`? [Daniel Rosenwasser](https://twitter.com/drosenwasser/status/1003097042653073408) comentou que é melhor para webpack/parcel. Para consultar mais argumentos dessa discussão <https://github.com/wmonk/create-react-app-typescript/issues/214>
+
+Você também deveria verificar [a nova documentação do TypeScript para descrições oficiais entre cada _flag_ do compilador](https://www.typescriptlang.org/tsconfig#allowSyntheticDefaultImports)!
+
+</details>
+
+<!--END-SECTION:setup-->
+
+# Seção 2: Primeiros Passos
+
+## Componente de Função