diff --git a/README.md b/README.md index c1e10d4..0744c38 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,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 + +
+ +Expandir Tabela de Conteúdo + + + +- [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) + +- [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) + +- [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 + +## 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 + +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: + +- [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 ` + +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/). + +
+ +## 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'; +``` + +
+ +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 + +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