From 2b27c33a1614b2040ce7d5f25e95ea47704c76d3 Mon Sep 17 00:00:00 2001 From: Vinicius Cerqueira Bonifacio Date: Sun, 27 Dec 2020 20:31:29 +0200 Subject: [PATCH 1/3] docs: Added the initial translation of 'Expand Table of Contents' preface --- README.md | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 81 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c1e10d4..19b7d68 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@
-: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:
@@ -52,3 +52,83 @@ 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údo da Cheatsheet básica + +
+ +Expandir Tabela de Conteúdo + + + +- [Seção 1: Configuração](#seção-1-configuração) +- [Pré-requisitos](#prerequisites) +- [Ferramentas iniciais de React + TypeScript](#react--typescript-starter-kits) +- [Importar React](#import-react) + +- [Seção 2: Primeiros Passos](#section-2-getting-started) + - [Componente de Função](#function-components) + - [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) + +- [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) + +- [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) + +
+ +# Seção 1: Configuração From f813fda6d1447f4b9ea629137b2b227da35fcb93 Mon Sep 17 00:00:00 2001 From: Vinicius Cerqueira Bonifacio Date: Tue, 29 Dec 2020 15:57:21 +0200 Subject: [PATCH 2/3] docs: Translates the 'Section 1 - Setup Typescript With React' --- README.md | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 53 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 19b7d68..af798db 100644 --- a/README.md +++ b/README.md @@ -62,12 +62,12 @@ Se você perceber algo de errado ou faltando, por favor abra uma [issue](https:/ - [Seção 1: Configuração](#seção-1-configuração) -- [Pré-requisitos](#prerequisites) -- [Ferramentas iniciais de React + TypeScript](#react--typescript-starter-kits) -- [Importar React](#import-react) +- [Pré-requisitos](#pré-requisitos) +- [Ferramentas iniciais de React + TypeScript](#ferramentas-iniciais-de-react--typeScript) +- [Importar React](#importar-react) -- [Seção 2: Primeiros Passos](#section-2-getting-started) - - [Componente de Função](#function-components) +- [Seção 2: Primeiros Passos](#seção-2-primeiros-passos) + - [Componente de Função](#componente-de-função) - [Hooks](#hooks) - [useState](#usestate) - [useReducer](#usereducer) @@ -132,3 +132,51 @@ Se você perceber algo de errado ou faltando, por favor abra uma [issue](https:/ # 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 `
`. + +## Ferramentas iniciais de React + TypeScript + +1. [Create React App v2.1+ com Typescript](https://facebook.github.io/create-react-app/docs/adding-typescript): `npx create-react-app my-app --template typescript` + +- Costumávamos recomendar `create-react-app-typescript` mas agora o seu uso é [desencorajado](https://www.reddit.com/r/reactjs/comments/a5919a/createreactapptypescript_has_been_archived_rip/). [Consulte as instruções de migração](https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/). + +2. [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 recursos](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#recommended-react--typescript-codebases-to-learn-from). + +## Importar React + +```tsx +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +``` + +Na versões de [TypeScript superiores á 2.7](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html), você pode rodar TypeScript com `--allowSyntheticDefaultImports` (ou adicionar `"allowSyntheticDefaultImports": true` na tsconfig) para importar como se faz normalmente em jsx: + +```tsx +import React from 'react'; +import ReactDOM from 'react-dom'; +``` + +
+ +Explicação + +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 + +Por favor, faça um _PR_ ou [abra uma _issue_](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new) com tuas sugestões. + +
+ +# Seção 2: Primeiros Passos + +## Componente de Função From 9cf25c6d937921531f171f3e36518528d05a7254 Mon Sep 17 00:00:00 2001 From: Vinicius Cerqueira Bonifacio Date: Tue, 29 Dec 2020 20:38:15 +0200 Subject: [PATCH 3/3] =?UTF-8?q?docs:=20Updates=20the=20=C2=B4Section=201?= =?UTF-8?q?=C2=B4=20with=20the=20latest=20content=20and=20improves=20the?= =?UTF-8?q?=20spelling?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 46 ++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 38 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index af798db..0744c38 100644 --- a/README.md +++ b/README.md @@ -53,7 +53,7 @@ Se você perceber algo de errado ou faltando, por favor abra uma [issue](https:/ --- -### Tabela de conteúdo da Cheatsheet básica +### Tabela de conteúdos da Cheatsheet básica
@@ -131,6 +131,8 @@ Se você perceber algo de errado ou faltando, por favor abra uma [issue](https:/
+ + # Seção 1: Configuração ## Pré-requisitos @@ -144,23 +146,49 @@ Este guia sempre assumirá que você está usando a última versão de Typescrip ## Ferramentas iniciais de React + TypeScript -1. [Create React App v2.1+ com Typescript](https://facebook.github.io/create-react-app/docs/adding-typescript): `npx create-react-app my-app --template 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_ + +
+ +Outras ferramentas + + +Ferramentas menos maduras mas que vale a pena conferir: -- Costumávamos recomendar `create-react-app-typescript` mas agora o seu uso é [desencorajado](https://www.reddit.com/r/reactjs/comments/a5919a/createreactapptypescript_has_been_archived_rip/). [Consulte as instruções de migração](https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/). +- [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](): `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 ` -2. [O guia de Basarat](https://github.com/basarat/typescript-react/tree/master/01%20bootstrap) para uma **configuração manual** de React + TypeScript + Webpack + Babel. +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 recursos](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#recommended-react--typescript-codebases-to-learn-from). +- 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/). -## Importar React +
+ +## Import React ```tsx import * as React from 'react'; import * as ReactDOM from 'react-dom'; ``` -Na versões de [TypeScript superiores á 2.7](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html), você pode rodar TypeScript com `--allowSyntheticDefaultImports` (ou adicionar `"allowSyntheticDefaultImports": true` na tsconfig) para importar como se faz normalmente em jsx: +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'; @@ -173,10 +201,12 @@ import ReactDOM from 'react-dom'; 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 -Por favor, faça um _PR_ ou [abra uma _issue_](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new) com tuas sugestões. +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)!
+ + # Seção 2: Primeiros Passos ## Componente de Função