René's URL Explorer Experiment


Title: GitHub - tutorial-do/react: Cheatsheets for experienced React developers getting started with TypeScript · GitHub

Open Graph Title: GitHub - tutorial-do/react: Cheatsheets for experienced React developers getting started with TypeScript

X Title: GitHub - tutorial-do/react: Cheatsheets for experienced React developers getting started with TypeScript

Description: Cheatsheets for experienced React developers getting started with TypeScript - tutorial-do/react

Open Graph Description: Cheatsheets for experienced React developers getting started with TypeScript - tutorial-do/react

X Description: Cheatsheets for experienced React developers getting started with TypeScript - tutorial-do/react

Opengraph URL: https://github.com/tutorial-do/react

X: @github

direct link

Domain: github.com

route-pattern/:user_id/:repository
route-controllerfiles
route-actiondisambiguate
fetch-noncev2:5ed0fba9-f277-19fe-b7d9-10b6804f62b7
current-catalog-service-hashf3abb0cc802f3d7b95fc8762b94bdcb13bf39634c40c357301c4aa1d67a256fb
request-idAB52:362D3E:974087:CAD7AA:6A5295A7
html-safe-nonce68905eb920b983bb4f63a9ace800aea328b2cfcb57deaafed9def1feeb4e3c95
visitor-payloadeyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJBQjUyOjM2MkQzRTo5NzQwODc6Q0FEN0FBOjZBNTI5NUE3IiwidmlzaXRvcl9pZCI6IjczNzY4OTg0NTkxNTk0MDE4OTUiLCJyZWdpb25fZWRnZSI6ImlhZCIsInJlZ2lvbl9yZW5kZXIiOiJpYWQifQ==
visitor-hmacb6a854b13e5214e1ca2c0a6184ae7eb4ea5e7808ab83f88f00da3b3d7bea4e0e
hovercard-subject-tagrepository:417046424
github-keyboard-shortcutsrepository,copilot
google-site-verificationApib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I
octolytics-urlhttps://collector.github.com/github/collect
analytics-location//
fb:app_id1401488693436528
apple-itunes-appapp-id=1477376905, app-argument=https://github.com/tutorial-do/react
twitter:imagehttps://opengraph.githubassets.com/e5bb67f20996a71bf117064cf8a6295e4eeafdcf14f5d1efba2af7e56ed23e80/tutorial-do/react
twitter:cardsummary_large_image
og:imagehttps://opengraph.githubassets.com/e5bb67f20996a71bf117064cf8a6295e4eeafdcf14f5d1efba2af7e56ed23e80/tutorial-do/react
og:image:altCheatsheets for experienced React developers getting started with TypeScript - tutorial-do/react
og:image:width1200
og:image:height600
og:site_nameGitHub
og:typeobject
hostnamegithub.com
expected-hostnamegithub.com
Noneb9a586c06a05a7a86fc7e3f4dbd03e42f6869085879aa184aa6369456dbd50fb
turbo-cache-controlno-cache
go-importgithub.com/tutorial-do/react git https://github.com/tutorial-do/react.git
octolytics-dimension-user_id74293648
octolytics-dimension-user_logintutorial-do
octolytics-dimension-repository_id417046424
octolytics-dimension-repository_nwotutorial-do/react
octolytics-dimension-repository_publictrue
octolytics-dimension-repository_is_forktrue
octolytics-dimension-repository_parent_id135786093
octolytics-dimension-repository_parent_nwotypescript-cheatsheets/react
octolytics-dimension-repository_network_root_id135786093
octolytics-dimension-repository_network_root_nwotypescript-cheatsheets/react
turbo-body-classeslogged-out env-production page-responsive
disable-turbofalse
browser-stats-urlhttps://api.github.com/_private/browser/stats
browser-errors-urlhttps://api.github.com/_private/browser/errors
release07a982c1d40157c619b364352b704c3ce66bb332
ui-targetfull
theme-color#1e2327
color-schemelight dark

Links:

Skip to contenthttps://github.com/tutorial-do/react#start-of-content
https://github.com/
Sign in https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Ftutorial-do%2Freact
GitHub CopilotWrite better code with AIhttps://github.com/features/copilot
GitHub Copilot appDirect agents from issue to mergehttps://github.com/features/ai/github-app
MCP RegistryNewIntegrate external toolshttps://github.com/mcp
ActionsAutomate any workflowhttps://github.com/features/actions
CodespacesInstant dev environmentshttps://github.com/features/codespaces
IssuesPlan and track workhttps://github.com/features/issues
Code ReviewManage code changeshttps://github.com/features/code-review
GitHub Advanced SecurityFind and fix vulnerabilitieshttps://github.com/security/advanced-security
Code securitySecure your code as you buildhttps://github.com/security/advanced-security/code-security
Secret protectionStop leaks before they starthttps://github.com/security/advanced-security/secret-protection
Why GitHubhttps://github.com/why-github
Documentationhttps://docs.github.com
Bloghttps://github.blog
Changeloghttps://github.blog/changelog
Marketplacehttps://github.com/marketplace
View all featureshttps://github.com/features
Enterpriseshttps://github.com/enterprise
Small and medium teamshttps://github.com/team
Startupshttps://github.com/enterprise/startups
Nonprofitshttps://github.com/solutions/industry/nonprofits
App Modernizationhttps://github.com/solutions/use-case/app-modernization
DevSecOpshttps://github.com/solutions/use-case/devsecops
DevOpshttps://github.com/solutions/use-case/devops
CI/CDhttps://github.com/solutions/use-case/ci-cd
View all use caseshttps://github.com/solutions/use-case
Healthcarehttps://github.com/solutions/industry/healthcare
Financial serviceshttps://github.com/solutions/industry/financial-services
Manufacturinghttps://github.com/solutions/industry/manufacturing
Governmenthttps://github.com/solutions/industry/government
View all industrieshttps://github.com/solutions/industry
View all solutionshttps://github.com/solutions
AIhttps://github.com/resources/articles?topic=ai
Software Developmenthttps://github.com/resources/articles?topic=software-development
DevOpshttps://github.com/resources/articles?topic=devops
Securityhttps://github.com/resources/articles?topic=security
View all topicshttps://github.com/resources/articles
Customer storieshttps://github.com/customer-stories
Events & webinarshttps://github.com/resources/events
Ebooks & reportshttps://github.com/resources/whitepapers
Business insightshttps://github.com/solutions/executive-insights
GitHub Skillshttps://skills.github.com
Documentationhttps://docs.github.com
Customer supporthttps://support.github.com
Community forumhttps://github.com/orgs/community/discussions
Trust centerhttps://github.com/trust-center
Partnershttps://github.com/partners
View all resourceshttps://github.com/resources
GitHub SponsorsFund open source developershttps://github.com/open-source/sponsors
Security Labhttps://securitylab.github.com
Maintainer Communityhttps://maintainers.github.com
Acceleratorhttps://github.com/open-source/accelerator
GitHub Starshttps://stars.github.com
Archive Programhttps://archiveprogram.github.com
Topicshttps://github.com/topics
Trendinghttps://github.com/trending
Collectionshttps://github.com/collections
Enterprise platformAI-powered developer platformhttps://github.com/enterprise
GitHub Advanced SecurityEnterprise-grade security featureshttps://github.com/security/advanced-security
Copilot for BusinessEnterprise-grade AI featureshttps://github.com/features/copilot/copilot-business
Premium SupportEnterprise-grade 24/7 supporthttps://github.com/enterprise/premium-support
Pricinghttps://github.com/pricing
Search syntax tipshttps://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax
documentationhttps://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax
Sign in https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Ftutorial-do%2Freact
Sign up https://github.com/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E&source=header-repo&source_repo=tutorial-do%2Freact
Reloadhttps://github.com/tutorial-do/react
Reloadhttps://github.com/tutorial-do/react
Reloadhttps://github.com/tutorial-do/react
Please reload this pagehttps://github.com/tutorial-do/react
tutorial-do https://github.com/tutorial-do
reacthttps://github.com/tutorial-do/react
typescript-cheatsheets/reacthttps://github.com/typescript-cheatsheets/react
Notifications https://github.com/login?return_to=%2Ftutorial-do%2Freact
Fork 0 https://github.com/login?return_to=%2Ftutorial-do%2Freact
Star 0 https://github.com/login?return_to=%2Ftutorial-do%2Freact
Code https://github.com/tutorial-do/react
Pull requests 0 https://github.com/tutorial-do/react/pulls
Actions https://github.com/tutorial-do/react/actions
Projects https://github.com/tutorial-do/react/projects
Security and quality 0 https://github.com/tutorial-do/react/security
Insights https://github.com/tutorial-do/react/pulse
Code https://github.com/tutorial-do/react
Pull requests https://github.com/tutorial-do/react/pulls
Actions https://github.com/tutorial-do/react/actions
Projects https://github.com/tutorial-do/react/projects
Security and quality https://github.com/tutorial-do/react/security
Insights https://github.com/tutorial-do/react/pulse
https://github.com/tutorial-do/react
Brancheshttps://github.com/tutorial-do/react/branches
Tagshttps://github.com/tutorial-do/react/tags
https://github.com/tutorial-do/react/branches
https://github.com/tutorial-do/react/tags
899 Commitshttps://github.com/tutorial-do/react/commits/main/
https://github.com/tutorial-do/react/commits/main/
.githubhttps://github.com/tutorial-do/react/tree/main/.github
.githubhttps://github.com/tutorial-do/react/tree/main/.github
docshttps://github.com/tutorial-do/react/tree/main/docs
docshttps://github.com/tutorial-do/react/tree/main/docs
websitehttps://github.com/tutorial-do/react/tree/main/website
websitehttps://github.com/tutorial-do/react/tree/main/website
.all-contributorsrchttps://github.com/tutorial-do/react/blob/main/.all-contributorsrc
.all-contributorsrchttps://github.com/tutorial-do/react/blob/main/.all-contributorsrc
.dockerignorehttps://github.com/tutorial-do/react/blob/main/.dockerignore
.dockerignorehttps://github.com/tutorial-do/react/blob/main/.dockerignore
.gitignorehttps://github.com/tutorial-do/react/blob/main/.gitignore
.gitignorehttps://github.com/tutorial-do/react/blob/main/.gitignore
CONTRIBUTING.mdhttps://github.com/tutorial-do/react/blob/main/CONTRIBUTING.md
CONTRIBUTING.mdhttps://github.com/tutorial-do/react/blob/main/CONTRIBUTING.md
CONTRIBUTORS.mdhttps://github.com/tutorial-do/react/blob/main/CONTRIBUTORS.md
CONTRIBUTORS.mdhttps://github.com/tutorial-do/react/blob/main/CONTRIBUTORS.md
LICENSEhttps://github.com/tutorial-do/react/blob/main/LICENSE
LICENSEhttps://github.com/tutorial-do/react/blob/main/LICENSE
README.mdhttps://github.com/tutorial-do/react/blob/main/README.md
README.mdhttps://github.com/tutorial-do/react/blob/main/README.md
copyFile.jshttps://github.com/tutorial-do/react/blob/main/copyFile.js
copyFile.jshttps://github.com/tutorial-do/react/blob/main/copyFile.js
genReadme.jshttps://github.com/tutorial-do/react/blob/main/genReadme.js
genReadme.jshttps://github.com/tutorial-do/react/blob/main/genReadme.js
netlify.tomlhttps://github.com/tutorial-do/react/blob/main/netlify.toml
netlify.tomlhttps://github.com/tutorial-do/react/blob/main/netlify.toml
package.jsonhttps://github.com/tutorial-do/react/blob/main/package.json
package.jsonhttps://github.com/tutorial-do/react/blob/main/package.json
yarn.lockhttps://github.com/tutorial-do/react/blob/main/yarn.lock
yarn.lockhttps://github.com/tutorial-do/react/blob/main/yarn.lock
READMEhttps://github.com/tutorial-do/react
Contributinghttps://github.com/tutorial-do/react
MIT licensehttps://github.com/tutorial-do/react
https://github.com/tutorial-do/react#reacttypescript-cheatsheets
https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/81
Web docshttps://react-typescript-cheatsheet.netlify.app/docs/basic/setup
中文翻译https://github.com/fi3ework/blog/tree/master/react-typescript-cheatsheet-cn
Españolhttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet-es
Portuguêshttps://github.com/typescript-cheatsheets/react-pt
Contribute!https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/CONTRIBUTING.md
Ask!https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new/choose
@swyxhttps://twitter.com/swyx
@ferdaberhttps://twitter.com/ferdaber
@eps1lonhttps://twitter.com/sebsilbermann
@jsjoeiohttps://twitter.com/jsjoeio
@arvind-onehttps://twitter.com/_arvindone
file an issuehttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new/choose
https://github.com/tutorial-do/react/blob/main/CONTRIBUTORS.md
https://discord.gg/wTGS5z9
http://twitter.com/home?status=Awesome%20%40Reactjs%20%2B%20%40TypeScript%20cheatsheet%20by%20%40ferdaber%2C%20%40sebsilbermann%2C%20%40swyx%20%26%20others!%20https%3A%2F%2Fgithub.com%2Ftypescript-cheatsheets%2Freact
https://github.com/tutorial-do/react#all-react--typescript-cheatsheets
/README.mdhttps://github.com/tutorial-do/react/blob/main/README.md#basic-cheatsheet-table-of-contents
/ADVANCED.mdhttps://react-typescript-cheatsheet.netlify.app/docs/advanced/intro
/MIGRATING.mdhttps://react-typescript-cheatsheet.netlify.app/docs/migration/intro
/HOC.mdhttps://react-typescript-cheatsheet.netlify.app/docs/hoc/intro
Genericshttps://www.typescriptlang.org/docs/handbook/generics.html
https://github.com/tutorial-do/react#basic-cheatsheet-table-of-contents
Section 1: Setup TypeScript with Reacthttps://github.com/tutorial-do/react#section-1-setup-typescript-with-react
Prerequisiteshttps://github.com/tutorial-do/react#prerequisites
React + TypeScript Starter Kitshttps://github.com/tutorial-do/react#react--typescript-starter-kits
Import Reacthttps://github.com/tutorial-do/react#import-react
Section 2: Getting Startedhttps://github.com/tutorial-do/react#section-2-getting-started
Function Componentshttps://github.com/tutorial-do/react#function-components
Hookshttps://github.com/tutorial-do/react#hooks
useStatehttps://github.com/tutorial-do/react#usestate
useReducerhttps://github.com/tutorial-do/react#usereducer
useEffecthttps://github.com/tutorial-do/react#useeffect
useRefhttps://github.com/tutorial-do/react#useref
useImperativeHandlehttps://github.com/tutorial-do/react#useimperativehandle
Custom Hookshttps://github.com/tutorial-do/react#custom-hooks
Class Componentshttps://github.com/tutorial-do/react#class-components
You May Not Need defaultPropshttps://github.com/tutorial-do/react#you-may-not-need-defaultprops
Typing defaultPropshttps://github.com/tutorial-do/react#typing-defaultprops
Consuming Props of a Component with defaultPropshttps://github.com/tutorial-do/react#consuming-props-of-a-component-with-defaultprops
Problem Statementhttps://github.com/tutorial-do/react#problem-statement
Solutionhttps://github.com/tutorial-do/react#solution
Misc Discussions and Knowledgehttps://github.com/tutorial-do/react#misc-discussions-and-knowledge
Basic Prop Types Exampleshttps://github.com/tutorial-do/react#basic-prop-types-examples
Useful React Prop Type Exampleshttps://github.com/tutorial-do/react#useful-react-prop-type-examples
getDerivedStateFromPropshttps://github.com/tutorial-do/react#getderivedstatefromprops
Forms and Eventshttps://github.com/tutorial-do/react#forms-and-events
Contexthttps://github.com/tutorial-do/react#context
Basic Examplehttps://github.com/tutorial-do/react#basic-example
Extended Examplehttps://github.com/tutorial-do/react#extended-example
forwardRef/createRefhttps://github.com/tutorial-do/react#forwardrefcreateref
Portalshttps://github.com/tutorial-do/react#portals
Error Boundarieshttps://github.com/tutorial-do/react#error-boundaries
Option 1: Using react-error-boundaryhttps://github.com/tutorial-do/react#option-1-using-react-error-boundary
Options 2: Writing your custom error boundary componenthttps://github.com/tutorial-do/react#options-2-writing-your-custom-error-boundary-component
Concurrent React/React Suspensehttps://github.com/tutorial-do/react#concurrent-reactreact-suspense
Troubleshooting Handbook: Typeshttps://github.com/tutorial-do/react#troubleshooting-handbook-types
Union Types and Type Guardinghttps://github.com/tutorial-do/react#union-types-and-type-guarding
Optional Typeshttps://github.com/tutorial-do/react#optional-types
Enum Typeshttps://github.com/tutorial-do/react#enum-types
Type Assertionhttps://github.com/tutorial-do/react#type-assertion
Simulating Nominal Typeshttps://github.com/tutorial-do/react#simulating-nominal-types
Intersection Typeshttps://github.com/tutorial-do/react#intersection-types
Union Typeshttps://github.com/tutorial-do/react#union-types
Overloading Function Typeshttps://github.com/tutorial-do/react#overloading-function-types
Using Inferred Typeshttps://github.com/tutorial-do/react#using-inferred-types
Using Partial Typeshttps://github.com/tutorial-do/react#using-partial-types
The Types I need weren't exported!https://github.com/tutorial-do/react#the-types-i-need-werent-exported
The Types I need don't exist!https://github.com/tutorial-do/react#the-types-i-need-dont-exist
Slapping any on everythinghttps://github.com/tutorial-do/react#slapping-any-on-everything
Autogenerate typeshttps://github.com/tutorial-do/react#autogenerate-types
Typing Exported Hookshttps://github.com/tutorial-do/react#typing-exported-hooks
Typing Exported Componentshttps://github.com/tutorial-do/react#typing-exported-components
Troubleshooting Handbook: Operatorshttps://github.com/tutorial-do/react#troubleshooting-handbook-operators
Troubleshooting Handbook: Utilitieshttps://github.com/tutorial-do/react#troubleshooting-handbook-utilities
Troubleshooting Handbook: tsconfig.jsonhttps://github.com/tutorial-do/react#troubleshooting-handbook-tsconfigjson
Troubleshooting Handbook: Fixing bugs in official typingshttps://github.com/tutorial-do/react#troubleshooting-handbook-fixing-bugs-in-official-typings
Troubleshooting Handbook: Globals, Images and other non-TS fileshttps://github.com/tutorial-do/react#troubleshooting-handbook-globals-images-and-other-non-ts-files
Other React + TypeScript resourceshttps://github.com/tutorial-do/react#other-react--typescript-resources
Editor Tooling and Integrationhttps://github.com/tutorial-do/react#editor-tooling-and-integration
Lintinghttps://github.com/tutorial-do/react#linting
Other React + TypeScript resourceshttps://github.com/tutorial-do/react#other-react--typescript-resources-1
Recommended React + TypeScript talkshttps://github.com/tutorial-do/react#recommended-react--typescript-talks
Time to Really Learn TypeScripthttps://github.com/tutorial-do/react#time-to-really-learn-typescript
Example Apphttps://github.com/tutorial-do/react#example-app
My question isn't answered here!https://github.com/tutorial-do/react#my-question-isnt-answered-here
Contributorshttps://github.com/tutorial-do/react#contributors
Prerequisiteshttps://github.com/tutorial-do/react#prerequisites
VS Code Extensionshttps://github.com/tutorial-do/react#vs-code-extensions
React + TypeScript Starter Kitshttps://github.com/tutorial-do/react#react--typescript-starter-kits
Import Reacthttps://github.com/tutorial-do/react#import-react
Video Tutorialhttps://github.com/tutorial-do/react#video-tutorial
Section 2: Getting Startedhttps://github.com/tutorial-do/react#section-2-getting-started
Function Componentshttps://github.com/tutorial-do/react#function-components
Hookshttps://github.com/tutorial-do/react#hooks
Class Componentshttps://github.com/tutorial-do/react#class-components
Typing defaultPropshttps://github.com/tutorial-do/react#typing-defaultprops
Types or Interfaces?https://github.com/tutorial-do/react#types-or-interfaces
Basic Prop Types Exampleshttps://github.com/tutorial-do/react#basic-prop-types-examples
Useful React Prop Type Exampleshttps://github.com/tutorial-do/react#useful-react-prop-type-examples
getDerivedStateFromPropshttps://github.com/tutorial-do/react#getDerivedStateFromProps
Forms and Eventshttps://github.com/tutorial-do/react#forms-and-events
Contexthttps://github.com/tutorial-do/react#context
forwardRef/createRefhttps://github.com/tutorial-do/react#forwardrefcreateref
Portalshttps://github.com/tutorial-do/react#portals
Error Boundarieshttps://github.com/tutorial-do/react#error-boundaries
Concurrent React/React Suspensehttps://github.com/tutorial-do/react#concurrent-reactreact-suspense
Basic Troubleshooting Handbook: Typeshttps://github.com/tutorial-do/react#basic-troubleshooting-handbook-types
Union Types and Type Guardinghttps://github.com/tutorial-do/react#union-types-and-type-guarding
Optional Typeshttps://github.com/tutorial-do/react#optional-types
Enum Typeshttps://github.com/tutorial-do/react#enum-types
Type Assertionhttps://github.com/tutorial-do/react#type-assertion
Simulating Nominal Typeshttps://github.com/tutorial-do/react#simulating-nominal-types
Intersection Typeshttps://github.com/tutorial-do/react#intersection-types
Union Typeshttps://github.com/tutorial-do/react#union-types
Overloading Function Typeshttps://github.com/tutorial-do/react#overloading-function-types
Using Inferred Typeshttps://github.com/tutorial-do/react#using-inferred-types
Using Partial Typeshttps://github.com/tutorial-do/react#using-partial-types
The Types I need weren't exported!https://github.com/tutorial-do/react#the-types-i-need-werent-exported
The Types I need don't exist!https://github.com/tutorial-do/react#the-types-i-need-dont-exist
Slapping any on everythinghttps://github.com/tutorial-do/react#slapping-any-on-everything
Autogenerate typeshttps://github.com/tutorial-do/react#autogenerate-types
Typing Exported Hookshttps://github.com/tutorial-do/react#typing-exported-hooks
Typing Exported Componentshttps://github.com/tutorial-do/react#typing-exported-components
Frequent Known Problems with TypeScripthttps://github.com/tutorial-do/react#frequent-known-problems-with-typescript
TypeScript doesn't narrow after an object element null checkhttps://github.com/tutorial-do/react#typescript-doesnt-narrow-after-an-object-element-null-check
TypeScript doesn't let you restrict the type of childrenhttps://github.com/tutorial-do/react#typescript-doesnt-let-you-restrict-the-type-of-children
Troubleshooting Handbook: Operatorshttps://github.com/tutorial-do/react#troubleshooting-handbook-operators
Troubleshooting Handbook: Utiltieshttps://github.com/tutorial-do/react#troubleshooting-handbook-utilities
Troubleshooting Handbook: tsconfig.jsonhttps://github.com/tutorial-do/react#troubleshooting-handbook-tsconfigjson
Troubleshooting Handbook: Bugs in official typingshttps://github.com/tutorial-do/react#troubleshooting-handbook-bugs-in-official-typings
Recommended React + TypeScript codebases to learn fromhttps://github.com/tutorial-do/react#recommended-react--typescript-codebases-to-learn-from
Editor Tooling and Integrationhttps://github.com/tutorial-do/react#editor-tooling-and-integration
Lintinghttps://github.com/tutorial-do/react#linting
Other React + TypeScript resourceshttps://github.com/tutorial-do/react#other-react--typescript-resources
Recommended React + TypeScript talkshttps://github.com/tutorial-do/react#recommended-react--typescript-talks
Time to Really Learn TypeScripthttps://github.com/tutorial-do/react#time-to-really-learn-typescript
Example Apphttps://github.com/tutorial-do/react#example-app
My question isn't answered here!https://github.com/tutorial-do/react#my-question-isnt-answered-here
https://github.com/tutorial-do/react#section-1-setup-typescript-with-react
https://github.com/tutorial-do/react#prerequisites
Reacthttps://reactjs.org
TypeScript Typeshttps://www.typescriptlang.org/docs/handbook/2/everyday-types.html
2ality's guidehttp://2ality.com/2018/04/type-notation-typescript.html
chibicode’s tutorialhttps://ts.chibicode.com/todo/
the TypeScript section in the official React docshttps://reactjs.org/docs/static-type-checking.html#typescript
the React section of the new TypeScript playgroundhttp://www.typescriptlang.org/play/index.html?jsx=2&esModuleInterop=true&e=181#example/typescript-with-react
the playground'shttp://www.typescriptlang.org/play/index.html
https://github.com/tutorial-do/react#vs-code-extensions
https://marketplace.visualstudio.com/items?itemName=paulshen.paul-typescript-toolkithttps://marketplace.visualstudio.com/items?itemName=paulshen.paul-typescript-toolkit
https://marketplace.visualstudio.com/items?itemName=infeng.vscode-react-typescripthttps://marketplace.visualstudio.com/items?itemName=infeng.vscode-react-typescript
https://www.digitalocean.com/community/tutorials/the-best-react-extension-for-vs-codehttps://www.digitalocean.com/community/tutorials/the-best-react-extension-for-vs-code
https://code.visualstudio.com/docs/languages/typescripthttps://code.visualstudio.com/docs/languages/typescript
https://github.com/tutorial-do/react#react--typescript-starter-kits
TypeScript Playground with Reacthttps://www.typescriptlang.org/play#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwCwAUKJLHAN5wCuqWAyjMhhYANFx4BRAgSz44AXzhES5Snhi1GjLAA8W8XBAB2qeAGEInQ0KjjtycABsscALxwAFAEpXAPnaM4OANjeABtA0sYUR4Yc0iAXVcxPgEhdwAGT3oGAOTJaXx3L19-BkDAgBMIXE4QLCsAOhhgGCckgAMATQsgh2BcAGssCrgAEjYIqwVmutR27MC5LM0yuEoYTihDD1zAgB4K4AA3H13yvbAfbs5e-qGRiYspuBmsVD2Aekuz-YAjThgMCMcCMpj6gxcbGKLj8MTiVnck3gAGo4ABGTxyU6rcrlMF3OB1H5wT7-QFGbG4z6HE65ZYMOSMIA
CodeSandboxhttp://ts.react.new
Stackblitzhttps://stackblitz.com/edit/react-typescript-base
Next.jshttps://nextjs.org/docs/basic-features/typescript
Create React Apphttps://facebook.github.io/create-react-app/docs/adding-typescript
Meteorhttps://guide.meteor.com/build-tool.html#typescript
Ignitehttps://github.com/infinitered/ignite#use-ignite-andross-infinite-red-andross-boilerplate
TSDXhttps://tsdx.io/
TurboRepohttps://twitter.com/jaredpalmer/status/1346217789942591488
Vitehttps://twitter.com/swyx/status/1282727239230996480?lang=en
Snowpackhttps://www.snowpack.dev/#create-snowpack-app-(csa)
Docusaurus v2https://v2.docusaurus.io/docs/installation
TypeScript Supporthttps://v2.docusaurus.io/docs/typescript-support
Parcelhttps://v2.parceljs.org/languages/typescript/
JP Morgan's modularhttps://github.com/jpmorganchase/modular
Basarat's guidehttps://github.com/basarat/typescript-react/tree/master/01%20bootstrap
Read more about the DefinitelyTyped project if you are unfamiliarhttps://definitelytyped.org/
our Other Resources listhttps://react-typescript-cheatsheet.netlify.app/docs/basic/recommended/resources/
https://github.com/tutorial-do/react#import-react
most futureproof wayhttps://www.reddit.com/r/reactjs/comments/iyehol/import_react_from_react_will_go_away_in_distant/
Daniel Rosenwasserhttps://twitter.com/drosenwasser/status/1003097042653073408
wmonk/create-react-app-typescript#214https://github.com/wmonk/create-react-app-typescript/issues/214
the new TypeScript docs for official descriptions between each compiler flaghttps://www.typescriptlang.org/tsconfig#allowSyntheticDefaultImports
https://github.com/tutorial-do/react#video-tutorial
https://www.youtube.com/watch?v=PL1NUl7fQ2I&list=PLG-Mk4wQm9_LyKE5EwoZz2_GGXR-zJ5Ml
https://github.com/tutorial-do/react#section-2-getting-started
https://github.com/tutorial-do/react#function-components
Paul Shen's VS Code Extensionhttps://marketplace.visualstudio.com/items?itemName=paulshen.paul-typescript-toolkit
keyboard shortcuthttps://twitter.com/_paulshen/status/1392915279466745857?s=20
discouragedhttps://github.com/facebook/create-react-app/pull/8177
this jscodeshift codemodhttps://github.com/gndelia/codemod-replace-react-fc-typescript
this issue for detailshttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/87
DefinitelyTyped#33006https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33006
@types/react 16.9.48https://github.com/DefinitelyTyped/DefinitelyTyped/pull/46643
See commentary by @ferdaber herehttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/57
https://github.com/tutorial-do/react#hooks
supported in @types/react from v16.8 uphttps://github.com/DefinitelyTyped/DefinitelyTyped/blob/a05cc538a42243c632f054e42eab483ebf1560ab/types/react/index.d.ts#L800-L1031
https://github.com/tutorial-do/react#usestate
Using Inferred Typeshttps://react-typescript-cheatsheet.netlify.app/docs/basic/troubleshooting/types/#using-inferred-types
https://github.com/tutorial-do/react#usereducer
Discriminated Unionshttps://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-func.html#discriminated-unions
View in the TypeScript Playgroundhttps://www.typescriptlang.org/play#code/LAKFEsFsAcHsCcAuACAVMghgZ2QJQKYYDGKAZvLJMgOTyEnUDcooRsAdliuO+IuBgA2AZUQZE+ZAF5kAbzYBXdogBcyAAwBfZmBCIAntEkBBAMIAVAJIB5AHLmAmgAUAotOShkyAD5zkBozVqHiI6SHxlagAaZGgMfUFYDAATNXYFSAAjfHhNDxAvX1l-Q3wg5PxQ-HDImLiEpNTkLngeAHM8ll1SJRJwDmQ6ZIUiHIAKLnEykqNYUmQePgERMQkY4n4ONTMrO0dXAEo5T2aAdz4iAAtkMY3+9gA6APwj2ROvImxJYPYqmsRqCp3l5BvhEAp4Ow5IplGpJhIHjCUABqTB9DgPeqJFLaYGfLDfCp-CIAoEFEFeOjgyHQ2BKVTNVb4RF05TIAC0yFsGWy8Fu6MeWMaB1x5K8FVIGAUglUwK8iEuFFOyHY+GVLngFD5Bx0Xk0oH13V6myhplZEm1x3JbE4KAA2vD8DFkuAsHFEFcALruAgbB4KAkEYajPlDEY5GKLfhCURTHUnKkQqFjYEAHgAfHLkGb6WpZI6WfTDRSvKnMgpEIgBhxTIJwEQANZSWRjI5SdPIF1u8RXMayZ7lSphEnRWLxbFNagAVmomhF6fZqYA9OXKxxM2KQWWK1WoTW643m63pB2u+7e-3SkEQsPamOGik1FO55p08jl6vdxuKcvv8h4yAmhAA
reduxhttps://github.com/reduxjs/redux
https://github.com/tutorial-do/react#useeffect--uselayouteffect
https://github.com/tutorial-do/react#useref
read-onlyhttps://github.com/DefinitelyTyped/DefinitelyTyped/blob/abd69803c1b710db58d511f4544ec1b70bc9077c/types/react/v16/index.d.ts#L1025-L1039
mutablehttps://github.com/DefinitelyTyped/DefinitelyTyped/blob/abd69803c1b710db58d511f4544ec1b70bc9077c/types/react/v16/index.d.ts#L1012-L1023
https://github.com/tutorial-do/react#option-1-dom-element-ref
To access a DOM elementhttps://reactjs.org/docs/refs-and-the-dom.html
lib.dom.tshttps://github.com/microsoft/TypeScript/blob/v3.9.5/lib/lib.dom.d.ts#L19224-L19343
https://user-images.githubusercontent.com/6764957/116914284-1c436380-ac7d-11eb-9150-f52c571c5f07.png
https://github.com/tutorial-do/react#option-2-mutable-value-ref
To have a mutable valuehttps://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables
https://github.com/tutorial-do/react#see-also
Related issue by @rajivpunjabihttps://github.com/typescript-cheatsheets/react/issues/388
Playgroundhttps://www.typescriptlang.org/play#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcARFDvmQNwCwAUI7hAHarwCCYYcAvHAAUASn4A+OAG9GjOHAD0CBLLnKGcxHABiwKBzgQwMYGxS4WUACbBWAczgwIcSxFwBXEFlYxkxtgDoVTQBJVmBjZAAbOAA3KLcsOAB3YEjogCNE1jc0-zgAGQBPG3tHOAAVQrAsAGVcKGAjOHTCuDdUErhWNgBabLSUVFQsWBNWA2qoX2hA9VU4AGFKXyx0AFk3H3TIxOwCOAB5dIArLHwgpHcoSm84MGJJmFbgdG74ZcsDVkjC2Y01f7yFQsdjvLAEACM-EwVBg-naWD2AB4ABLlNb5GpgZCsACiO083jEgn6kQAhMJ6HMQfpKJCFpE2IkBNg8HCEci0RisTj8VhCTBiaSKVSVIoAaoLnBQuFgFFYvFEikBpkujkMps4FgAB7VfCdLmY7F4gleOFwAByEHg7U63VYfXVg2Go1MhhG0ygf3mAHVUtF6jgYLtwUdTvguta4Bstjs9mGznCpVcbvB7u7YM90B8vj9vYgLkDqWxaeCAEzQ1n4eHDTnoo2801EknqykyObii5SmpnNifA5GMZmCzWOwOJwudwC3xjKUyiLROKRBLJf3NLJO9KanV64xj0koVifQ08k38s1Sv0DJZBxIx5DbRGhk6J5Nua5mu4PEZPOAvSNgsgnxsHmXZzIgRZyDSYIEAAzJWsI1k+BCovWp58gKcAAD5qmkQqtqKHbyCexoYRecw7IQugcAs76ptCdIQv4KZmoRcjyMRaGkU28A4aSKiUXAwwgpYtEfrcAh0mWzF0ax7bsZx3Lceetx8eqAlYPAMAABa6KJskSXAdKwTJ4kwGxCjyKy-bfK05SrDA8mWVagHAbZeScOY0CjqUE6uOgqDaRAOSfKqOYgb8KiMaZ9GSeCEIMkyMVyUwRHWYc7nSvAgUQEk6AjMQXpReWyWGdFLHeBZHEuTCQEZT8xVwaV8BxZCzUWZQMDvuMghBHASJVnCWhTLYApiH1chIqgxpGeCfCSIxAC+Yj3o+8YvvgSLyNNOLjeBGhTTNdLzVJy3reGMBbTtrB7RoB3XbNBAneCsHLatcbPhdV3GrdB1WYhw3IKNZq-W2DCLYRO7QPAljgsgORcDwVJAA
Example from Stefan Baumgartnerhttps://fettblog.eu/typescript-react/hooks/#useref
Playgroundhttps://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wFgAoCzAVwDsNgJa4AVJADxgElaxqYA6sBgALAGIQ01AM4AhfjCYAKAJRwA3hThwA9DrjBaw4CgA2waUjgB3YSLi1qp0wBo4AI35wYSZ6wCeYEgAymhQwGDw1lYoRHCmEBAA1oYA5nCY0HAozAASLACyADI8fDAAoqZIIEi0MFpwaEzS8IZllXAAvIjEMAB0MkjImAA8+cWl-JXVtTAAfEqOzioA3A1NtC1wTPIwirQAwuZoSV1wql1zGg3aenAt4RgOTqaNIkgn0g5ISAAmcDJvBA3h9TsBMAZeFNXjl-lIoEQ6nAOBZ+jddPpPPAmGgrPDEfAUS1pG5hAYvhAITBAlZxiUoRUqjU6m5RIDhOi7iIUF9RFYaqIIP9MlJpABCOCAUHJ0eDzm1oXAAGSKyHtUx9fGzNSacjaPWq6Ea6gI2Z9EUyVRrXV6gC+DRtVu0RBgxuYSnRIzm6O06h0ACpIdlfr9jExSQyOkxTP5GjkPFZBv9bKIDYSmbNpH04ABNFD+CV+nR2636kby+BETCddTlyo27w0zr4HycfC6L0lvUjLH7baHY5Jas7BRMI7AE42uYSUXed6pkY6HtMDulnQruCrCg2oA
https://github.com/tutorial-do/react#useimperativehandle
a discussion in our issueshttps://github.com/typescript-cheatsheets/react/issues/106
https://github.com/tutorial-do/react#custom-hooks
TS 3.4 const assertionshttps://devblogs.microsoft.com/typescript/announcing-typescript-3-4/#const-assertions
View in the TypeScript Playgroundhttps://www.typescriptlang.org/play/?target=5&jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCpAD0ljkwFcA7DYCZuRgZyQBkIKACbBmAcwAUASjgBvCnDhoO3eAG1g3AcNFiANHF4wAyjBQwkAXTgBeRMRgA6HklPmkEzCgA2vKQG4FJRV4b0EhWzgJFAAFHBBNJAAuODjcRIAeFGYATwA+GRs8uSDFIzcLCRgoRiQA0rgiGEYoTlj4xMdMUR9vHIlpW2Lys0qvXzr68kUAX0DpxqRm1rgNLXDdAzDhaxRuYOZVfzgAehO4UUwkKH21ACMICG9UZgMYHLAkCEw4baFrUSqVARb5RB5PF5wAA+cHen1BfykaksFBmQA
having trouble with const assertionshttps://github.com/babel/babel/issues/9800
https://github.com/tutorial-do/react#more-hooks--typescript-reading
https://medium.com/@jrwebdev/react-hooks-in-typescript-88fce7001d0dhttps://medium.com/@jrwebdev/react-hooks-in-typescript-88fce7001d0d
https://fettblog.eu/typescript-react/hooks/#userefhttps://fettblog.eu/typescript-react/hooks/#useref
https://github.com/tutorial-do/react#example-react-hooks--typescript-libraries
https://github.com/mweststrate/use-st8https://github.com/mweststrate/use-st8
https://github.com/palmerhq/the-platformhttps://github.com/palmerhq/the-platform
https://github.com/sw-yx/hookshttps://github.com/sw-yx/hooks
Something to add? File an issuehttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new
https://github.com/tutorial-do/react#class-components
View in the TypeScript Playgroundhttps://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCmATzCTgFlqAFHMAZzgF44BvCuHAD0QuAFd2wAHYBzOAANpMJFEzok8uME4oANuwhwIAawFwQSduxQykALjjsYUaTIDcFAL4fyNOo2oAZRgUZW4+MzQIMSkYBykxEAAjFTdhUV1gY3oYAAttLx80XRQrOABBMDA4JAAPZSkAE05kdBgAOgBhXEgpJFiAHiZWCA4AGgDg0KQAPgjyQSdphyYpsJ5+BcF0ozAYYAgpPUckKKa4FCkpCBD9w7hMaDgUmGUoOD96aUwVfrQkMyCKIxOJwAAMZm8ZiITRUAAoAJTzbZwIgwMRQKRwOGA7YDRrAABuM1xKN4eW07TAbHY7QsVhsSE8fAptKWynawNinlJcAGQgJxNxCJ8gh55E8QA
See commentary by @ferdaber herehttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/57
See PR and discussion!https://github.com/DefinitelyTyped/DefinitelyTyped/pull/26813
View in the TypeScript Playgroundhttps://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCtAGxQGc64BBMMOJADxiQDsATRsnQwAdAGFckHrxgAeAN5wQSBigDmSAFxw6MKMB5q4AXwA0cRWggBXHjG09rIAEZIoJgHwWKcHTBTccAC8FnBWtvZwAAwmANw+cET8bgAUAJTe5L6+RDDWUDxwKQnZcLJ8wABucBA8YtTAaADWQfLpwV4wABbAdCIGaETKdikAjGnGHiWlFt29ImA4YH3KqhrGsz19ugFIIuF2xtO+sgD0FZVTWdlp8ddH1wNDMsFFKCCRji5uGUFe8tNTqc4A0mkg4HM6NNISI6EgYABlfzcFI7QJ-IoA66lA6RNF7XFwADUcHeMGmxjStwSxjuxiAA
View in the TypeScript Playgroundhttps://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCtAGxQGc64BBMMOJADxiQDsATRsnQwAdAGFckHrxgAeAN4U4cEEgYoA5kgBccOjCjAeGgNwUAvgD44i8sshHuUXTwCuIAEZIoJuAHo-OGpgAGskOBgAC2A6JTg0SQhpHhgAEWA+AFkIVxSACgBKGzjlKJiRBxTvOABeOABmMzs4cziifm9C4ublIhhXKB44PJLlOFk+YAA3S1GxmzK6CpwwJdV1LXM4FH4F6KXKp1aesdk-SZnRgqblY-MgA
Something to add? File an issuehttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new
https://github.com/tutorial-do/react#typing-getderivedstatefromprops
documentationhttps://reactjs.org/docs/react-component.html#static-getderivedstatefromprops
You Probably Don't Need Derived Statehttps://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html
View in the TypeScript Playgroundhttps://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoUSWOYAZwFEBHAVxQBs5tcD2IATFHQAWAOnpJWHMuQowAnmCRwAwizoxcANQ4tlAXjgoAdvIDcFYMZhIomdMoAKOMHTgBvCnDhgXAQQAuVXVNEB12PQtyAF9La1t7NGUAESRMKyR+AGUYFBsPLzgIGGFbHLykADFgJHZ+II0oKwBzKNjyBSU4cvzDVPTjTJ7lADJEJBgWKGMAFUUkAB5OpAhMOBgoEzpMaBBnCFcZiGGAPijMFmMMYAhjdc3jbd39w+PcmwAKXwO6IJe6ACUBXI3iIk2mwO83joKAAbpkXoEfC46KJvmA-AAaOAAehxcBh8K40DgICQIAgwAAXnkbsZCt5+LZgPDsu8kEF0aj0X5CtE2hQ0OwhG4VLgwHAkAAPGzGfhuZDoGCiRxTJBi8C3JDWBb-bGnSFwNC3RosDDQL4ov4ooGeEFQugsJRQS0-AFRKHrYT0UQaCpwQx2z3eYqlKDDaq1epwABEAEYAEwAZhjmIZUNEmY2Wx2UD2KKOw1drgB6f5fMKfpgwDQcGaE1STVZEZw+Z+xd+cD1BPZQWGtvTwDWH3ozDY7A7aP82KrSF9cIR-gBQLBUzuxhY7HYHqhq4h2ceubbryLXPdFZiQA
https://github.com/tutorial-do/react#you-may-not-need-defaultprops
this tweethttps://twitter.com/dan_abramov/status/1133878326358171650
https://twitter.com/hswolff/status/1133759319571345408https://twitter.com/hswolff/status/1133759319571345408
https://github.com/tutorial-do/react#typing-defaultprops
TypeScript 3.0+https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html
some edge cases are still problematichttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/61
See this in TS Playgroundhttps://www.typescriptlang.org/play#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcARFDvmQNwBQdMAnmFnAOKVYwAKxY6ALxwA3igDmWAFxwAdgFcQAIyxQ4AXzgAyOM1YQCcACZYCyeQBte-VPVwRZqeCbOXrEAXGEi6cCdLgAJgBGABo6dXo6e0d4TixuLzgACjAbGXjuPg9UAEovAD5RXzhKGHkoWTgAHiNgADcCkTScgDpkSTgAeiQFZVVELvVqrrrGiPpMmFaXcytsz2FZtwXbOiA
a couple ways to do ithttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/pull/103#issuecomment-481061483
GreetProps is the internal contract for your component, not the external, consumer facing contracthttps://github.com/typescript-cheatsheets/react/issues/66#issuecomment-453878710
https://github.com/tutorial-do/react#consuming-props-of-a-component-with-defaultprops
https://github.com/tutorial-do/react#problem-statement
https://github.com/tutorial-do/react#solution
See this in TS Playgroundhttps://www.typescriptlang.org/play#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcARFDvmQNwBQdMAnmFnAMImQB2W3MABWJhUAHgAqAPjgBeOOLhYAHjD4ATdNjwwAdJ3ARe-cSyyjg3AlihwB0gD6Yqu-Tz4xzl67cl04cAH44ACkAZQANHQAZYAAjKGQoJgBZZG5kAHMsNQBBGBgoOIBXVTFxABofPzgALjheADdrejoLVSgCPDYASSEIETgAb2r0kCw61AKLDPoAXzpcQ0m4NSxOooAbQWF0OWH-TPG4ACYAVnK6WfpF7mWAcUosGFdDd1k4AApB+uQxysO4LM6r0dnAAGRwZisCAEFZrZCbbb9VAASlk0g+1VEamADUkgwABgAJLAbDYQSogJg-MZwYDoAAkg1GWFmlSZh1mBNmogA9Di8XQUfQHlgni8jLpVustn0BnJpQjZTsWrzeXANsh2gwbstxFhJhK3nIPmAdnUjfw5WIoVgYXBReKuK9+JI0TJpPs4JQYEUoNw4KIABYARjgvN8VwYargADkIIooMQoAslvBSe8JAbns7JTSsDIyAQIBAyOHJDQgA
https://github.com/tutorial-do/react#misc-discussions-and-knowledge
https://medium.com/@martin_hotell/10-typescript-pro-tips-patterns-with-or-without-react-5799488d6680https://medium.com/@martin_hotell/10-typescript-pro-tips-patterns-with-or-without-react-5799488d6680
DefinitelyTyped/DefinitelyTyped#30695https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30695
typescript-cheatsheets#87https://github.com/typescript-cheatsheets/react/issues/87
See commentary by @ferdaber herehttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/57
herehttps://github.com/typescript-cheatsheets/react/issues/61
Something to add? File an issuehttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new
https://github.com/tutorial-do/react#typing-component-props
https://github.com/tutorial-do/react#basic-prop-types-examples
Commenting Componentshttps://react-typescript-cheatsheet.netlify.app/docs/advanced/misc_concerns/#commenting-components
https://github.com/tutorial-do/react#useful-react-prop-type-examples
too widehttps://github.com/DefinitelyTyped/DefinitelyTyped/issues/37596#issue-480260937
Thanks @pomle for raising this.https://github.com/typescript-cheatsheets/react/issues/357
@ferdaberhttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/57
More discussion: Where ReactNode does not overlap with JSX.Elementhttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/129
Something to add? File an issuehttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new
https://github.com/tutorial-do/react#types-or-interfaces
https://github.com/tutorial-do/react#tldr
ortahttps://twitter.com/orta/status/1356129195835973632?s=20
https://github.com/tutorial-do/react#more-advice
Interface vs Type alias in TypeScript 2.7https://medium.com/@martin_hotell/interface-vs-type-alias-in-typescript-2-7-2a8f1777af4c
Differences Between Type Aliases and Interfaceshttps://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces
see official Microsoft notes on thishttps://github.com/microsoft/TypeScript/wiki/Performance#preferring-interfaces-over-intersections
take this with a grain of salthttps://news.ycombinator.com/item?id=25201887
https://github.com/tutorial-do/react#useful-table-for-types-vs-interfaces
Karol Majewskihttps://twitter.com/karoljmajewski/status/1082413696075382785
Something to add? File an issuehttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new
https://github.com/tutorial-do/react#getderivedstatefromprops
documentationhttps://reactjs.org/docs/react-component.html#static-getderivedstatefromprops
You Probably Don't Need Derived Statehttps://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html
View in the TypeScript Playgroundhttps://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoUSWOYAZwFEBHAVxQBs5tcD2IATFHQAWAOnpJWHMuQowAnmCRwAwizoxcANQ4tlAXjgoAdvIDcFYMZhIomdMoAKOMHTgBvCnDhgXAQQAuVXVNEB12PQtyAF9La1t7NGUAESRMKyR+AGUYFBsPLzgIGGFbHLykADFgJHZ+II0oKwBzKNjyBSU4cvzDVPTjTJ7lADJEJBgWKGMAFUUkAB5OpAhMOBgoEzpMaBBnCFcZiGGAPijMFmMMYAhjdc3jbd39w+PcmwAKXwO6IJe6ACUBXI3iIk2mwO83joKAAbpkXoEfC46KJvmA-AAaOAAehxcBh8K40DgICQIAgwAAXnkbsZCt5+LZgPDsu8kEF0aj0X5CtE2hQ0OwhG4VLgwHAkAAPGzGfhuZDoGCiRxTJBi8C3JDWBb-bGnSFwNC3RosDDQL4ov4ooGeEFQugsJRQS0-AFRKHrYT0UQaCpwQx2z3eYqlKDDaq1epwABEAEYAEwAZhjmIZUNEmY2Wx2UD2KKOw1drgB6f5fMKfpgwDQcGaE1STVZEZw+Z+xd+cD1BPZQWGtvTwDWH3ozDY7A7aP82KrSF9cIR-gBQLBUzuxhY7HYHqhq4h2ceubbryLXPdFZiQA
https://github.com/tutorial-do/react#forms-and-events
type inference and contextual typinghttps://www.typescriptlang.org/docs/handbook/type-inference.html#contextual-typing
View in the TypeScript Playgroundhttps://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCtAGxQGc64BBMMOJADxiQDsATRsnQwAdAGFckHrxgAeCnDgBvAL4AaBcs2KA9Drg8IcMDjB1tcblwBccOjCjAeAcwDcmlRQB8W8ovso3HAAvL6KilYwtgBE0R7ulH5wepYAnmBOznAQPIgAkgDiABIAKnAAFij8dsB8SNmYIZo5YpUu9aEAFEi2QhgiAGLQIACiAG4ysqUAsgAyeTxgAK4wI9RIIDJeAJS2YxC1IT5KFjDlwHQidEgwAMowgUidSpacUewiaEtQRDwwJSgoM4biIxihqEt6iptglFCpYXBfnUoJ1tmFwkQYN9cp0LIpZHxgGMvHjwrInMt4DB0khgtFItE4GCIbSlGcLlcHtwRJEVNkeK0qsDgmzzpcWm1gXydCSkuE4LIdITiRYYR4KCogA
See our Github PR for morehttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/pull/24
View in the TypeScript Playgroundhttps://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCtCAOwGctoRlM4BeRYmAOgFc6kLABQBKClVoM4AMSbs4o9gD4FFOHAA8mJmrhFMbAN7aozJJgC+u2gGVeAIxDAYRoUgBcndDxsBPGjAAFkgwwGgAogBuSAEiynCGuupI3GBE0QEAIuYovAA2MKIA3Elw1PTwMChQAOYh8ilVtfUodHAwvmBIEKyN1XXwAGQJpckgKMB5noZwkSh5vB5wDFDANDVwFiXk6rtwYK10AO7QACbTs-OLnitrG1ulDzu75VJI45PyTQPc7xN53DmCyQRTgAHowe1Okg0ME0ABrOgAQlKr3gBzoxzOX36IVShxOUFOgKuIPBkI6XVhMMRKOe6ghcBCaG4rN0Fis5CUug0p2AkW59M0eRQ9iQeUFe3U4Q+U1GmjWYF4lWhbAARH9Jmq4DQUCAkOrNXltWDJbsNGCRWKJTywXyBTz7Wb1BoreLnbsAAoEs7ueUaRXKqFddUYrFE7W6-Whn0R8Eei1um3PC1Ox38hOBlUhtV0BxOGDaoGLdUAGQgGzWJrNqYzFAtJhAgpEQA
you should use Formikhttps://jaredpalmer.com/formik
React Hook Formhttps://react-hook-form.com/
https://github.com/tutorial-do/react#list-of-event-types
microsoft/TypeScript#29441https://github.com/microsoft/TypeScript/issues/29441
https://developer.mozilla.org/en-US/docs/Web/API/InputEventhttps://developer.mozilla.org/en-US/docs/Web/API/InputEvent
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_eventhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
https://github.com/tutorial-do/react#context
https://github.com/tutorial-do/react#basic-example
Class.contextTypehttps://reactjs.org/docs/context.html#classcontexttype
Context.Consumerhttps://reactjs.org/docs/context.html#contextconsumer
Thanks to @AlvSovereignhttps://github.com/typescript-cheatsheets/react/issues/97
https://github.com/tutorial-do/react#extended-example
context gettershttps://kentcdodds.com/blog/application-state-management-with-react/
Playground herehttps://www.typescriptlang.org/play/index.html?jsx=1#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcARFDvmQNwBQduEAdqvLgK5SXMwCqqLFADCLGFgAe8ALyYqMAHS5KycaN6SYAHjZRgzAOYA+ABQdmAEywF9WCwEIAlPQLn8wFnACivABYdUNBhgXABxSixgwxNHOABvOjg4JlZ2Lh5+QSg4WWw8RQCsdXEpE05uLF4BIWLNZ0S4ShguZjgtC2AANyMACS8AGX6AeXjyjOqoBRgIPjAwGrQsGIBfey0Aeg7u+mW6V2Z3TwBBOZj4hqaWtrHKzJqxTQUABWJO4CtszuQAGw4saTIAGVfMgAO7MMhGBpJLQ+GD+QJsELhLCRfQGODrKEw9Y3KpZWpSZ6vd5CIw7IA
View in the TypeScript Playgroundhttp://www.typescriptlang.org/play/index.html?jsx=1&ssl=1&ssc=1&pln=31&pc=2#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcARFDvmQNwBQdA9AgnYnAIJwAWWANmCxQ4MCHFyVkMLCjgBhCADtpAD3jJFAEzgAFYgDdgmoXADuwGNziKxAVzBEl8YwWS2+8fcj62sAGhQtNiRzSwhbeG5kQ0UAcxExXF5cAGs4Amg4Wy0sAmBFLG1vPhFeEVAsADpgxjoCbPxgJXFJaTkYFQAeLiw1LC10AG8AXzgAH2t3PgA+AAoASjhBtnElVHh8FTgAXkwqGEqJHDanXphu8aycvILNOeyXfML5+jh0hpgmxSzULHaVBZLFZvXBrDY7PZ4A62X4KZRnWabF7AuDAAhwRE7ba7B65J6aRaWYimaxYEkAUSgxCgszIML+HTgIBh8AARjJ8qgjDJkLoDNzhKErLyvD4sGRkW83pQYLYoN9cK84MMVjK5d8ANr0-4BTaVPQQQzGKAAXRQ6FBinWNDgjEYcAA5GhVlaYA6mcgUlh0AAVACeggAyhJgGB4PkCCZebKwHwsHQVUx7QBVVDIWJYABcDDtcAA6jJ1sA+CUovoZKI4KhBLg0X7ZDAA-44KyItYxC43B4AIR0XqQWAu9ZwLWwuWUZSpoQAOWQIGbcnH-RgU6gBqNQjNuyOUgZXXWUHysTmyLqHy+cHJym4MLQn1wAHFKFhPnFAcsQWDxEvJ79hDixypZdV1necFiVNV5TgTpNGAfRpgACXJAAZZCAHkllwH8Vz-SpRGTMBBCgOQ0CwBZhm7TpGFg+D6ETepFEaZoOEI99VRfdVoMXIDfyEdcBTgUVfG2MhAyiUxFDIaYUU6K9LFvItH2fV94kYaS3io7iJxwvj+WNaY6KAA
context gettershttps://kentcdodds.com/blog/application-state-management-with-react/
View in the TypeScript Playgroundhttps://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCtCAOwGd4BXOpAYWZlwAkIIBrOAF44ACj5IAngC44DKMBoBzAJRCAfHADeFOHGr14AbQYoYSADSykMAMoxTSALpDExGADpmSOw5GaAvso6cEQwjFA0svZmhuISjhT+FAD0yXpEDnq0ZgAe8ADuwDAAFnA0EHCMYNjZcAAmSJgojAA2MABqKC2MSClphSUQjPDFKABuCopwnPUVjDQNmApIdXrFSGgCXS3T69OgveSY8xjAtOmoZqwwOQA8AIJqIqra5Lr6DHo3LsjoHmgZK7ZJB5B5wAA+lQWjWWdSe80WsOUAG5gscaKdzl5rjlnlpgu9aJ80D83J4WKxgXkRBgciiCXBgJhRABCNCqEo4fJlJDcgCiUBwUBEACJsd8QBw4AAjJCM+jABpwFBwAAKOAmDSgcAGpRVYy6PRF9LeuhC1nCkTQqNNSVNoUtcEM4pyllp7nVEE1SCgzhQdCyBmRcFScBAKHEcAAKhIwN4AcAwPAFJgfcrplUWhYyhB4ChIihBSgJHAIMz5mdIjBY0g6IkKH1KnQUIpDhQQZBYIHPs6KTdLDZrDBJp7vb6XADLmwbrc5JMniiQ2k6HG0EyS9W45ZpcMczyVtMKiuNuu4AbunKqjUaDAWe2cp2sCdh+d7mAwHjXoSDHA4i5sRw3C8HwopxMawahq2eZnoaco1HgKrFMBliSp8sryum1DgLQSA3sEDoRKIDK3IOMDDkoo6Kmm549IImhxP4agMrotyUthNC4fAyRMaaLHJKR5GKJRWo8boJp2h20BPhiL6RGxkAcTen7BB88B-sILrPBBaRoPmUTAC0OxeDqRRIbuNCtDsaDrJsd72hahG3HUwBjGo9GSP4tzJM5rk2v4QA
unstatedhttps://github.com/jamiebuilds/unstated
View in the TypeScript Playgroundhttps://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCpAD0ljkwFcA7DYCZuNIlGJAYRjUAPAEEAfAAoAJkkwpGAGxgA1FIsZIAXHFEBKOAG8KcODACeYJHACqYabyQAVS9YC8iYjAB0AEWAAzmC8aAAWwsjoPgDKSDDRMI6ibBzCFlYQmHCy8kqq6pri4gDcJlwcAfA5Csp2Dnw6dY4uVnAekgZu4tlyNfkaSKXkpmgV8BjUbZ5R3tyofPwcfNQwksbDpnCVjjrVeWoDADRlpoz2Oz25ted8ZQC+ekOmTKww7JwACjgAbsCyUJIwDgwAEdJEMN4vhAQQB1YAwUL8ULARTSIjMYSGO7iAzrTblZiVOAAbW2fEOcDO9SQAF0puCfIwAkgEo4ZL19gUkI8TnAiDBGFBOMIJpCfn8kFA4N8uW5DIYtolyZSbtY7ncjN4tUDoQENQB6Er3Mr8wWcYkTClQ37-OkoAIEyrFOD6-VwdR8IW8YDfJCKcwU4npJCZLhCCnB0PWiVQGkUO4UCiuykBFAAcyQifIo0J8At4bgThoMGjtqmc0cgmokgARAFcM5izWeeQaHRxmNC8XFsxlvAPBMhm3oFgWClOKIwGAOkYTXEzXBJLzhEWVqXJeJeaZhItwBwkL2XZuNtv9auS+L-sfTC2E63aCOGGO3hw4LvIMwD6tcWUc0SFWSSAUlSjhwBqHgMt4TICEsxaSOePZ9i2pimkKi7LooKAAEZ+te+JGIBd74XAwjAMwYCMPAwZuDWfY1nAHBIigzAZnK7jdCBfCSEg3iJFAGY+DKAx6AaeGnphOGKHht5AA
useReducer-based versionhttps://gist.github.com/sw-yx/f18fe6dd4c43fddb3a4971e80114a052
@jpavonhttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/pull/13
Something to add? File an issuehttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new
https://github.com/tutorial-do/react#forwardrefcreateref
Hooks sectionhttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/README.md#hooks
on purposehttps://github.com/DefinitelyTyped/DefinitelyTyped/pull/43265/
ComponentPropsWithRefhttps://github.com/DefinitelyTyped/DefinitelyTyped/blob/a05cc538a42243c632f054e42eab483ebf1560ab/types/react/index.d.ts#L770
https://medium.com/@martin_hotell/react-refs-with-typescript-a32d56c4d315https://medium.com/@martin_hotell/react-refs-with-typescript-a32d56c4d315
Conditional Rendering with forwardRefhttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/167
Something to add? File an issuehttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new
https://github.com/tutorial-do/react#portals
View in the TypeScript Playgroundhttps://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoUSWRYmAEQHkBZObXAo9GAWgBNcZchTQQAdgGd4ICHxQAbBBAjwAvHAFoAriCRiYAOgDmSGAFF5SXfoBCATwCSfABQAiGXPk8cK1wEo4FAk4AAkAFWYAGQsrPRgAbgoAeiTAiQkdYDEjOCy4OwgtKDgACxgQeTZgS1KgwI1gADc4AHdgGBLcvgIPBW9lGHxE4XIkAA9qeDR5IODmWQU4cZg9PmDkbgMAYVxIMTi4AG8KOCX5AC5QiOjLazUNCG07gzQuFZi7tz4m-2GTuFE4HEcXowD48y0+mcAWO5FOp16igGBhQYDAqy2JWqLg6wAkBiQ8j8w1OAF8KP9AXs4gB1aryACqYhkkJg0KO-wRCyRKgMRBkjSQmOxzlx+MJxP+5JGpyIYj4SCg7Nh8LgRBgRTEtG4TGYLzeSAACtAYApRVj8WAcGB8WgsfI+HKADRwMUEokkuDS0lAA
View in the TypeScript Playgroundhttps://www.typescriptlang.org/play#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoUSWOAbzjSJRiQAVoYUAbOAXzmy4CTDAFoAJrjLkKAellwUAZyUBXEMAB2Aczha4ATwiqocABYwQPTMC5JzyxXHHAAbnADuwGGb3iCIBDi3KI4EDD4ANwUFGgQmkrwALJB3ABciMQwAHQAYgDCADy0vAB8cAC8cAAU9GhmtuJEmnwAlJXltBRwcPJwAKIgqlzM9j72aCMqDLiQmkiaEUp6CZyaaPauKFDAKABGdp7evihwRJjdM6twSDxVyOg5qkpIyJjVkmjqCzmMqCz9OwgH7VABELlcoNarWiMnIPQeGGyzyQ-UwmCQGGq1XaFU6lx6fQA6vZlGpgXAAAaBYJcBAQcKUm4AD2AiWWXh8BAAhNIej04tcadx6eFKs4IF9gYtsgBHVRIKAGADKt0xMGgYIAxMKuKEGTAoYplgAJAAqSQAMoCkNKYLD+XBdaKYNzsigwGAFuJ8g0uOJqrdsl8oM0YDCCWckDATC0cR04K4IMB-M6DW6iIFXEhfY1A1xgyYwxH4XwADRwADaAF0S5c+gBJVaofwQTBU26UivjK6cLSKvTLHuU86F0M-SmXIgxqAtP6jdiwbjVeqNZoVoMh4uw3iwuQKZ4obRIGLkTCqdYwYDxOAAQU98a6pcFiSrSjMEA8KVpFZeMGVH5fqkXDVuKiJPC8yqcCw1SYNwLwlj006xjUkaFBCpSRoSChGKoDAoC08EQHAYCqPAPhsishjGKYiTMMAaDmJY1i2CepaOuhbh+BUoK6vq4SgqUhSyBhWF0O+n7ftwcAAGQyah7GOnAhRSVwmGKUpykQmJmmJAYdgVLQT6aSZzhsmAIwGBkoLaDs4igmWOkmRZ6BIA2LAgEo1kbIsioOU5mlmEgwDaBY1kAIwAAyRa4Zj+RpplHOIPgZPgUUxWY+COQlpl7OgADWtnGJo4jWVA2h5dUkVltVtXZOFrTxYlSkAF5NuISDMhkACc3XZc1PS8LwAVwOpA1wA2+B4KcurcrQoJwKCw05UphR7GRGotHpBlGXlaCFTgF6lYtYAegYKAeA0YBLfw8T5FwDH5YZ8Z4nAf4AZJwGwfBSCtGUkwQC8wnrTAm1jYlwmiStwmqeDjp-WJa0bTed0Pftz24uU72Aap1QwFACp-aUEkeHAqnA8jmhw-yfREK+bbUSYiiemhIluODrQULwQA
Event Bubbling Through Portalhttps://reactjs.org/docs/portals.html#event-bubbling-through-portals
https://github.com/tutorial-do/react#error-boundaries
https://github.com/tutorial-do/react#option-1-using-react-error-boundary
React-error-boundaryhttps://github.com/bvaughn/react-error-boundary
https://github.com/tutorial-do/react#options-2-writing-your-custom-error-boundary-component
Something to add? File an issuehttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new
https://github.com/tutorial-do/react#concurrent-reactreact-suspense
https://github.com/sw-yx/fresh-async-reacthttps://github.com/sw-yx/fresh-async-react
Something to add? File an issuehttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new
https://github.com/tutorial-do/react#troubleshooting-handbook-types
the TypeScript FAQhttps://github.com/microsoft/TypeScript/wiki/FAQ
https://github.com/tutorial-do/react#union-types-and-type-guarding
View in the TypeScript Playgroundhttps://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCtAGxQGc64BBMMOJADxiQDsATRsnQwAdAGFckHrxgAeCnDgBvAL4AaBcs2K0EAK48YALjg89IAEZIocAD6m91agG44AejdxqwANZI4MAAWwHSaKhQAfFrkinQwKNxwALzRijr6hiZmTmHOmkT81gAUAJSpaUQwelA8cLJ8wABucBA8Yt5oPklKpclRQSEiwDxoRCAyRQCMJSoRSgN0InEJSCK6BjAqsm4NjRF5MXDhh8OjSOOGyXBFKCDGDpbWZUlRStoBwYt0SDAAyvHcIrLRIva5vQ5pODrTLXYGraHwWz2AAMZQA1HBbjB3ioSiUDooVAcVEA
View in the TypeScript Playgroundhttps://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoC4AOxiSk3STgEEATEGuAbwrjhwAbJAC44AZxhQaAcwDcFAL5Va9RmmYBVcfR584SECmCCxk6dXlKKFTAFdqGYBGoCIdugBUI7TtQAKKDJIABTiwDLUwJjA9ACUeuT80XBhEVExugC8OQR2OlAIEML4CbxJ-AJIMHZQrvi+NGQVinDWlOT2jjDOrjgeSN4AErhIgcFpkdGxUGX6KZMZM3A5WQSGxoKliZVVNXUEIyBIYEFIzfzK5FcUAPS3cACy1QAWEGxwAIxi+cwABjQ-nAANZIACeAHdoGxbA4nC4qmxgEQMCFflAxI1XAAfODaeI7ODREIAIiESBJRNc6LKcHucF+cBgL3+gLgEDA9BQMGgcEwvJgYM5MjsKCgbHEEhoGjgngAynAAEwAOgA7ABqfT8fpeHwcGjjULo5XkuIKFoGQQ6Qna9y6o5jM5ogrKjYmM36K43cj057M95KsRofI8vCCzlwEVitgAGjgbAgSElzOY4hQxyZL1kVPZgjYunlcAAbvRwi5JbyISyiHAAdQgcBxLQDNR3DIXrDur0ieIsc76Jj9Ti8QU4j8Cj3WEPCUR9q5+1A4ChJShqGC4ibiswAIS5Bz5mLUJAw65AA
User-Defined Type Guardshttps://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards
Discriminated Unionshttps://www.typescriptlang.org/docs/handbook/advanced-types.html#discriminated-unions
Basarat's writeuphttps://basarat.gitbook.io/typescript/type-system/discriminated-unions
https://github.com/tutorial-do/react#optional-types
File an issuehttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new
https://github.com/tutorial-do/react#enum-types
documented issueshttps://fettblog.eu/tidy-typescript-avoid-enums/
agreeshttps://twitter.com/orta/status/1348966323271987201?s=20
https://github.com/tutorial-do/react#type-assertion
View in the TypeScript Playgroundhttps://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCmATzCTgGU61gUAbAWSQGduUBzJABVa9ALwFuMKMAB2-fAG4KFOTCRRM6egAUcYbnADeFOHBA8+ggFxwpM+XAA+cAK6yAJkkxykH5eQAvirkaBCyUnAAwriQskiyMABMtsjoMAB0AGJRADx6EAYAfHASABRG5pYCSIEAlKUlZaZwuR7AAG5FLWa5ABYAjEVGFrw1gbkA9IPd5L2T7V0UdSFobCi8cBzUMeDhCfBIAB7qnoZpGBm7cQe5JnNVYzZ20nL8AYEl92ZEnhplDW+ZjgYQi8Eqoys9ECpTgMD6wG4GTA+m4AWBcCIMFcUFkcGaDwxuWu+0SSUeULEI2qgjgG0YzFYnBpwlEn2pT1qUxJ8TJswxdXRcGCQSAA
https://github.com/tutorial-do/react#simulating-nominal-types
type brandinghttps://basarat.gitbook.io/typescript/main-1/nominaltyping
See this PRhttps://github.com/microsoft/TypeScript/pull/33038
https://github.com/tutorial-do/react#intersection-types
herehttps://www.typescriptlang.org/play?ssl=4&ssc=1&pln=12&pc=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCipAD0ljmADsYkpN0k4AFKUFKAE8AQgFcYMCE14QwAZzgBvCnDgAbFACMkagFxw5MPkwDmAbgoBfanWjw0Uwzz4gBI8ZKZwAvHAAUKnBgOPL6vPxCYhJSMvJwAGSIxDAAdFGeABIAKgCyADIAghJ8muJIcgA82fnpUgCiakggSCwAfBQAlD6tSoEA9H1wACYQcGiihrhwpdFMggYwopiYgUSLUF4VM55KKXvBsnKWPYoH8ika2mqWcBV921KtFuSWQA
View in the TypeScript Playgroundhttps://www.typescriptlang.org/play/?jsx=2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCmATzCTgCEUBnJABRzGbgF44BvCnGFoANi2YA5FCCQB+AFxxmMKMAB2AcwA0Q4Suqj5S5OhgA6AMIBlaxwh1YwJMz1x1MpEpVqtcAPT+cACurAAmcBpwAEYQMAAWFAC+VLT0ACIQmvZcvAJ6MCjAosyWEMHqMErqwSDRSFDJqXRwABK1KOo53HyC5MLxnWGl5ZXVtfWN5CnkSAAekLBwaBDqKm0d6ibEFgBilgA8TKzdcABkGyCd3QB8eQAUAJS8d-d6B2HAAG4BNxSPFAo80W8BWa3gmU02zM5n2RxY7E43AukNuD2ePFe70+P38f3IjyAA
https://github.com/tutorial-do/react#union-types
commentary on Union Types usecaseshttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/README.md#union-types-and-type-guarding
https://github.com/tutorial-do/react#overloading-function-types
Read more about Overloading in the Handbook.https://www.typescriptlang.org/docs/handbook/functions.html#overloads
https://github.com/tutorial-do/react#using-inferred-types
https://github.com/tutorial-do/react#using-partial-types
subtle pitfalls of the above example herehttps://twitter.com/ferdaber/status/1084798596027957248
why @types/react uses Pick instead of Partialhttps://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365
https://github.com/tutorial-do/react#the-types-i-need-werent-exported
ComponentPropsWithoutRefhttps://github.com/DefinitelyTyped/DefinitelyTyped/blob/a05cc538a42243c632f054e42eab483ebf1560ab/types/react/index.d.ts#L774
ComponentPropsWithRefhttps://github.com/DefinitelyTyped/DefinitelyTyped/blob/a05cc538a42243c632f054e42eab483ebf1560ab/types/react/index.d.ts#L770
see this blogpost from Ivan Koshelevhttp://ikoshelev.azurewebsites.net/search/id/11/Pragmatic-uses-of-TypeScript-type-system-My-type-of-type
this examplehttps://twitter.com/mgechev/status/1211030455224422401?s=20
also has a good video on inferhttps://www.youtube.com/watch?v=ijK-1R-LFII&list=PLYvdvJlnTOjF6aJsWWAt7kZRJvzw-en8B&index=3&t=0s
https://github.com/tutorial-do/react#the-types-i-need-dont-exist
DefinitelyTypedhttps://github.com/DefinitelyTyped/DefinitelyTyped
TypeSearchhttps://microsoft.github.io/TypeSearch/
https://github.com/tutorial-do/react#slapping-any-on-everything
https://github.com/tutorial-do/react#autogenerate-types
dts-genhttps://github.com/Microsoft/dts-gen
our MIGRATION cheatsheethttps://react-typescript-cheatsheet.netlify.app/docs/migration/from_js
https://github.com/tutorial-do/react#typing-exported-hooks
useDarkMode hookhttps://github.com/donavon/use-dark-mode
https://github.com/tutorial-do/react#typing-exported-components
sw-yx's Gist on React Router 6 typeshttps://gist.github.com/sw-yx/37a6a3d248c2d4031801f0d568904df8
posthttps://templecoding.com/blog/2016/03/31/creating-typescript-typings-for-existing-react-components
https://github.com/tutorial-do/react#frequent-known-problems-with-typescript
https://github.com/tutorial-do/react#typescript-doesnt-narrow-after-an-object-element-null-check
https://mobile.twitter.com/tannerlinsley/status/1390409931627499523
https://mobile.twitter.com/tannerlinsley/status/1390409931627499523https://mobile.twitter.com/tannerlinsley/status/1390409931627499523
microsoft/TypeScript#9998https://github.com/microsoft/TypeScript/issues/9998
https://github.com/tutorial-do/react#typescript-doesnt-let-you-restrict-the-type-of-children
https://twitter.com/ryanflorence/status/1085745787982700544?s=20https://twitter.com/ryanflorence/status/1085745787982700544?s=20
https://github.com/tutorial-do/react#troubleshooting-handbook-operators
Some misconceptions herehttps://twitter.com/SeaRyanC/status/1418678670739218438?s=20
https://artsy.github.io/blog/2018/11/21/conditional-types-in-typescript/https://artsy.github.io/blog/2018/11/21/conditional-types-in-typescript/
https://github.com/sw-yx/ts-spec/blob/master/conditional-types.mdhttps://github.com/sw-yx/ts-spec/blob/master/conditional-types.md
https://www.youtube.com/watch?v=SbVgPQDealg&list=PLYvdvJlnTOjF6aJsWWAt7kZRJvzw-en8B&index=2&t=0shttps://www.youtube.com/watch?v=SbVgPQDealg&list=PLYvdvJlnTOjF6aJsWWAt7kZRJvzw-en8B&index=2&t=0s
Generics, Conditional types and Mapped typeshttps://www.youtube.com/watch?v=PJjeHzvi_VQ&feature=youtu.be
https://github.com/tutorial-do/react#troubleshooting-handbook-utilities
see source in es5.d.tshttps://github.com/microsoft/TypeScript/blob/2c458c0d1ccb96442bca9ce43aa987fb0becf8a9/src/lib/es5.d.ts#L1401-L1474
https://github.com/tutorial-do/react#troubleshooting-handbook-tsconfigjson
all the Compiler options in the TypeScript docshttps://www.typescriptlang.org/docs/handbook/compiler-options.html
The new TS docs also has per-flag annotations of what each doeshttps://www.typescriptlang.org/tsconfig#allowSyntheticDefaultImports
recommended TS config herehttps://github.com/tsconfig/bases
Project Referenceshttps://www.typescriptlang.org/docs/handbook/project-references.html
ADVANCEDhttps://react-typescript-cheatsheet.netlify.app/docs/advanced/intro/
https://github.com/tutorial-do/react#troubleshooting-handbook-fixing-bugs-in-official-typings
Thanks to @adamrackis for the tip.https://twitter.com/AdamRackis/status/1024827730452520963
declaration merginghttps://www.typescriptlang.org/docs/handbook/declaration-merging.html
ambient module declarationhttps://www.typescriptlang.org/docs/handbook/namespaces-and-modules.html#pitfalls-of-namespaces-and-modules
https://github.com/tutorial-do/react#time-to-really-learn-typescript
the playground'shttp://www.typescriptlang.org/play/index.html
https://www.youtube.com/watch?v=ET4kT88JRXshttps://www.youtube.com/watch?v=ET4kT88JRXs
https://blog.mariusschulz.com/series/typescript-evolutionhttps://blog.mariusschulz.com/series/typescript-evolution
Egghead.io coursehttps://egghead.io/courses/advanced-static-types-in-typescript
https://basarat.gitbook.io/typescript/https://basarat.gitbook.io/typescript/
Tackling TypeScripthttps://exploringjs.com/tackling-ts/
Egghead.io coursehttps://egghead.io/courses/practical-advanced-typescript
Generics, Conditional types and Mapped typeshttps://www.youtube.com/watch?v=PJjeHzvi_VQ&feature=youtu.be
TypeScript for Beginner Programmershttps://ts.chibicode.com/
TypeScript Error Guidehttps://github.com/threehams/typescript-error-guide/
https://github.com/tutorial-do/react#other-react--typescript-resources
https://twitter.com/swyxhttps://twitter.com/swyx
https://www.freecodecamp.org/news/how-to-build-a-todo-app-with-react-typescript-nodejs-and-mongodb/https://www.freecodecamp.org/news/how-to-build-a-todo-app-with-react-typescript-nodejs-and-mongodb/
https://github.com/piotrwitek/react-redux-typescript-guidehttps://github.com/piotrwitek/react-redux-typescript-guide
10 Bad TypeScript Habitshttps://startup-cto.net/10-bad-typescript-habits-to-break-this-year/
Ultimate React Component Patterns with TypeScript 2.8https://levelup.gitconnected.com/ultimate-react-component-patterns-with-typescript-2-8-82990c516935
Basarat's TypeScript gitbook has a React sectionhttps://basarat.gitbook.io/typescript/tsx/react
Egghead.io coursehttps://egghead.io/courses/use-typescript-to-develop-react-applications
Palmer Group's TypeScript + React Guidelineshttps://github.com/palmerhq/typescript
disco.chathttps://github.com/jaredpalmer/disco.chat
Sindre Sorhus' TypeScript Style Guidehttps://github.com/sindresorhus/typescript-definition-style-guide
TypeScript React Starter Template by Microsofthttps://github.com/Microsoft/TypeScript-React-Starter
Brian Holt's Intermediate React course on Frontend Masters (paid)https://frontendmasters.com/courses/intermediate-react/converting-the-app-to-typescript/
Mike North's Production TypeScript course on Frontend Masters (paid)https://frontendmasters.com/courses/production-typescript/
TSX Guidehttps://jenil.github.io/chota/
gojutinhttps://github.com/gojutin/www.tsx.guide
Lyft's React-To-TypeScript conversion CLIhttps://github.com/lyft/react-javascript-to-typescript-transform
Gustav Wengel's blogpost - converting a React codebase to TypeScripthttp://www.gustavwengel.dk/converting-typescript-to-javascript-part-1
Microsoft React TypeScript conversion guidehttps://github.com/Microsoft/TypeScript-React-Conversion-Guide#typescript-react-conversion-guide
You?https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new
https://github.com/tutorial-do/react#editor-tooling-and-integration
https://github.com/sw-yx/swyx-react-typescript-snippetshttps://github.com/sw-yx/swyx-react-typescript-snippets
https://marketplace.visualstudio.com/items?itemName=auiworks.amvimhttps://marketplace.visualstudio.com/items?itemName=auiworks.amvim
https://github.com/Quramy/tsuquyomihttps://github.com/Quramy/tsuquyomi
https://github.com/leafgarland/typescript-vimhttps://github.com/leafgarland/typescript-vim
https://github.com/neoclide/coc.nvimhttps://github.com/neoclide/coc.nvim
https://mobile.twitter.com/ryanflorence/status/1085715595994095620https://mobile.twitter.com/ryanflorence/status/1085715595994095620
https://user-images.githubusercontent.com/6764957/53868378-2b51fc80-3fb3-11e9-9cee-0277efe8a927.png
jsx-tsx-logoshttps://github.com/Protectator/jsx-tsx-logos
https://github.com/Protectator/jsx-tsx-logos/raw/master/example.png
https://github.com/tutorial-do/react#linting
TSLint is now in maintenance and you should try to use ESLint insteadhttps://medium.com/palantir/tslint-in-2019-1a144c2317a9
@azdanovhttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/pull/14
You can convert TSlint to ESlint with this toolhttps://github.com/typescript-eslint/tslint-to-eslint-config
work has recently begun on typescript-eslint in the ESLint communityhttps://eslint.org/blog/2019/01/future-typescript-eslint
https://github.com/typescript-eslint/typescript-eslinthttps://github.com/typescript-eslint/typescript-eslint
the tsdx PRhttps://github.com/palmerhq/tsdx/pull/70/files
fuller TypeScript + ESLint setup guide herehttps://blog.matterhorn.dev/posts/learn-typescript-linting-part-1/
https://github.com/MatterhornDev/learn-typescript-lintinghttps://github.com/MatterhornDev/learn-typescript-linting
"Using ESLint and Prettier in a TypeScript Project"https://dev.to/robertcoopercode/using-eslint-and-prettier-in-a-typescript-project-53jb
TypeScript support for his eslint+prettier config.https://github.com/wesbos/eslint-config-wesbos/issues/68
Prettierhttps://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/misc-concerns.md#prettier
https://github.com/tutorial-do/react#other-react--typescript-resources-1
https://twitter.com/swyxhttps://twitter.com/swyx
https://github.com/piotrwitek/react-redux-typescript-guidehttps://github.com/piotrwitek/react-redux-typescript-guide
Ultimate React Component Patterns with TypeScript 2.8https://levelup.gitconnected.com/ultimate-react-component-patterns-with-typescript-2-8-82990c516935
Basarat's TypeScript gitbook has a React sectionhttps://basarat.gitbook.io/typescript/tsx/react
Egghead.io coursehttps://egghead.io/courses/use-typescript-to-develop-react-applications
Palmer Group's TypeScript + React Guidelineshttps://github.com/palmerhq/typescript
disco.chathttps://github.com/jaredpalmer/disco.chat
Stefan Baumgartner's TypeScript + React Guidehttps://fettblog.eu/typescript-react
Sindre Sorhus' TypeScript Style Guidehttps://github.com/sindresorhus/typescript-definition-style-guide
TypeScript React Starter Template by Microsofthttps://github.com/Microsoft/TypeScript-React-Starter
Brian Holt's Intermediate React course on Frontend Masters (paid)https://frontendmasters.com/courses/intermediate-react/converting-the-app-to-typescript/
Lyft's React-To-TypeScript conversion CLIhttps://github.com/lyft/react-javascript-to-typescript-transform
Gustav Wengel's blogpost - converting a React codebase to TypeScripthttp://www.gustavwengel.dk/converting-typescript-to-javascript-part-1
Microsoft React TypeScript conversion guidehttps://github.com/Microsoft/TypeScript-React-Conversion-Guide#typescript-react-conversion-guide
DefinitelyTyped React source codehttps://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react
You?https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new
https://github.com/tutorial-do/react#recommended-react--typescript-talks
Ultimate React Component Patterns with TypeScripthttps://www.youtube.com/watch?v=_PBQ3if6Fmg
https://github.com/tutorial-do/react#time-to-really-learn-typescript-1
the playground'shttp://www.typescriptlang.org/play/index.html
https://www.youtube.com/watch?v=ET4kT88JRXshttps://www.youtube.com/watch?v=ET4kT88JRXs
https://blog.mariusschulz.com/series/typescript-evolutionhttps://blog.mariusschulz.com/series/typescript-evolution
Egghead.io coursehttps://egghead.io/courses/advanced-static-types-in-typescript
https://basarat.gitbook.io/typescript/https://basarat.gitbook.io/typescript/
Tackling TypeScripthttps://exploringjs.com/tackling-ts/
Egghead.io coursehttps://egghead.io/courses/practical-advanced-typescript
Generics, Conditional types and Mapped typeshttps://www.youtube.com/watch?v=PJjeHzvi_VQ&feature=youtu.be
TypeScript for Beginner Programmershttps://ts.chibicode.com/
TypeScript Error Guidehttps://github.com/threehams/typescript-error-guide/
https://github.com/tutorial-do/react#example-app
Create React App TypeScript Todo Example 2021https://github.com/laststance/create-react-app-typescript-todo-example-2021
Ben Awad's 14 hour Fullstack React/GraphQL/TypeScript Tutorialhttps://www.youtube.com/watch?v=I6ypD7qv3Z8
Cypress Realworld Apphttps://github.com/cypress-io/cypress-realworld-app
https://github.com/tutorial-do/react#my-question-isnt-answered-here
File an issuehttps://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/new
https://github.com/tutorial-do/react#contributors
all-contributorshttps://github.com/all-contributors/all-contributors
CONTRIBUTORS.mdhttps://github.com/tutorial-do/react/blob/main/CONTRIBUTORS.md
react-typescript-cheatsheet.netlify.app/https://react-typescript-cheatsheet.netlify.app/
Readme https://github.com/tutorial-do/react#readme-ov-file
MIT license https://github.com/tutorial-do/react#MIT-1-ov-file
Contributing https://github.com/tutorial-do/react#contributing-ov-file
Please reload this pagehttps://github.com/tutorial-do/react
Activityhttps://github.com/tutorial-do/react/activity
Custom propertieshttps://github.com/tutorial-do/react/custom-properties
0 forkshttps://github.com/tutorial-do/react/forks
Report repository https://github.com/contact/report-content?content_url=https%3A%2F%2Fgithub.com%2Ftutorial-do%2Freact&report=tutorial-do+%28user%29
Releaseshttps://github.com/tutorial-do/react/releases
Packages 0https://github.com/orgs/tutorial-do/packages?repo_name=react
Please reload this pagehttps://github.com/tutorial-do/react
Contributorshttps://github.com/tutorial-do/react/graphs/contributors
Please reload this pagehttps://github.com/tutorial-do/react
https://github.com
Termshttps://docs.github.com/site-policy/github-terms/github-terms-of-service
Privacyhttps://docs.github.com/site-policy/privacy-policies/github-privacy-statement
Securityhttps://github.com/security
Statushttps://www.githubstatus.com/
Communityhttps://github.community/
Docshttps://docs.github.com/
Contacthttps://support.github.com?tags=dotcom-footer

Viewport: width=device-width

URLs of crawlers that visited me.