diff --git a/README.md b/README.md index a21bb38e..758de99b 100644 --- a/README.md +++ b/README.md @@ -58,9 +58,8 @@ Cheatsheets for experienced React developers getting started with TypeScript - [Section 1: Setup TypeScript with React](#section-1-setup-typescript-with-react) - [Prerequisites](#prerequisites) - - [VS Code Extensions](#vs-code-extensions) - - [React + TypeScript Starter Kits](#react--typescript-starter-kits) - - [Video Tutorial](#video-tutorial) + - [React and TypeScript starter kits](#react-and-typescript-starter-kits) + - [Try React and TypeScript online](#try-react-and-typescript-online) - [Section 2: Getting Started](#section-2-getting-started) - [Function Components](#function-components) - [Hooks](#hooks) @@ -143,74 +142,33 @@ Cheatsheets for experienced React developers getting started with TypeScript -### Section 1: Setup TypeScript with React +### Section 1: Setup #### Prerequisites You can use this cheatsheet for reference at any skill level, but basic understanding of React and TypeScript is assumed. Here is a list of prerequisites: -- Good understanding of [React](https://reactjs.org). +- Basic understanding of [React](https://react.dev/). - Familiarity with [TypeScript Basics](https://www.typescriptlang.org/docs/handbook/2/basic-types.html) and [Everyday Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html). -- Having read [the TypeScript section in the official React docs](https://reactjs.org/docs/static-type-checking.html#typescript). -- Having read [the React section of the TypeScript playground](http://www.typescriptlang.org/play/index.html?jsx=2&esModuleInterop=true&e=181#example/typescript-with-react). -This guide will always assume you are starting with the latest TypeScript and React versions. Notes for older versions will be in expandable `
` tags. +In the cheatsheet we assume you are using the latest versions of React and TypeScript. -#### VS Code Extensions +#### React and TypeScript starter kits -- Refactoring help https://marketplace.visualstudio.com/items?itemName=paulshen.paul-typescript-toolkit -- R+TS Code Snippets (there are a few...) - - https://marketplace.visualstudio.com/items?itemName=infeng.vscode-react-typescript - - https://www.digitalocean.com/community/tutorials/the-best-react-extension-for-vs-code -- TypeScript official extension https://code.visualstudio.com/docs/languages/typescript -- JavaScript and TypeScript Nightly https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next +React has documentation for [how to start a new React project](https://react.dev/learn/start-a-new-react-project) with some of the most popular frameworks. Here's how to start them with TypeScript: -#### React + TypeScript Starter Kits +- [Next.js](https://nextjs.org/docs/basic-features/typescript): `npx create-next-app@latest --ts` +- [Remix](https://remix.run/docs/tutorials/blog): `npx create-remix@latest` +- [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/): `npm init gatsby --ts` +- [Expo](https://docs.expo.dev/guides/typescript/): `npx create-react-native-app -t with-typescript` -Cloud setups: +#### Try React and TypeScript online -- [TypeScript Playground with React](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwCwAUKJLHAN5wCuqWAyjMhhYANFx4BRAgSz44AXzhES5Snhi1GjLAA8W8XBAB2qeAGEInQ0KjjtycABsscALxwAFAEpXAPnaM4OANjeABtA0sYUR4Yc0iAXVcxPgEhdwAGT3oGAOTJaXx3L19-BkDAgBMIXE4QLCsAOhhgGCckgAMATQsgh2BcAGssCrgAEjYIqwVmutR27MC5LM0yuEoYTihDD1zAgB4K4AA3H13yvbAfbs5e-qGRiYspuBmsVD2Aekuz-YAjThgMCMcCMpj6gxcbGKLj8MTiVnck3gAGo4ABGTxyU6rcrlMF3OB1H5wT7-QFGbG4z6HE65ZYMOSMIA) just if you are debugging types (and reporting issues), not for running code -- [CodeSandbox](http://ts.react.new) - cloud IDE, boots up super fast -- [Stackblitz](https://stackblitz.com/edit/react-typescript-base) - cloud IDE, boots up super fast +There are some tools that let you run React and TypeScript online, which can be helpful for debugging or making sharable reproductions. -Local dev setups: - -- [Next.js](https://nextjs.org/docs/basic-features/typescript): `npx create-next-app@latest --ts` will create in your current folder -- [Create React App](https://facebook.github.io/create-react-app/docs/adding-typescript): `npx create-react-app name-of-app --template typescript` will create in new folder -- [Vite](https://vitejs.dev/): `npm create vite@latest my-react-ts-app -- --template react-ts` -- [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) for React Native: `ignite new myapp` -- [TSDX](https://tsdx.io/): `npx tsdx create mylib` for Creating React+TS _libraries_. (in future: [TurboRepo](https://twitter.com/jaredpalmer/status/1346217789942591488)) - -
-Other tools - -Less mature tools still worth checking out: - -- [Snowpack](): `npx create-snowpack-app my-app --template app-template-react-typescript` -- [Docusaurus v2](https://v2.docusaurus.io/docs/installation) with [TypeScript Support](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 setup: - -- [Basarat's guide](https://github.com/basarat/typescript-react/tree/master/01%20bootstrap) for **manual setup** of React + TypeScript + Webpack + Babel -- In particular, make sure that you have `@types/react` and `@types/react-dom` installed ([Read more about the DefinitelyTyped project if you are unfamiliar](https://definitelytyped.org/)) -- There are also many React + TypeScript boilerplates, please see [our Other Resources list](https://react-typescript-cheatsheet.netlify.app/docs/basic/recommended/resources/). - -
- -#### Video Tutorial - -Have a look at the 7-part "React Typescript Course" video series below for an introduction to TypeScript with React. - - - react typescript course video series - +- [TypeScript playground](https://www.typescriptlang.org/play?target=8&jsx=4#code/JYWwDg9gTgLgBAbzgVwM4FMDKMCGN0A0KGAogGZnoDG8AvnGVBCHAORTo42sDcAsAChB6AB6RYcKhAB2qeAGEIyafihwAvHAAUASg0A+RILiSZcuAG0pymEQwxFNgLobiWXPi0AGHfyECTNHRyShotXQMjAJM4ABMIKmQQdBUAOhhgGAAbdFcAAwBNJUks4CoAa3RYuAASBGsVegzk1Dy-E1pfQWM4DhhkKGltHpMAHn0RmNGwfSLkErLK6vqlRrhm9FRRgHoZybGAI2QYGBk4GXlSivUECPVDe0cVLQb4AGo4AEYdWgnomJil0WcGS+zgOyOJxkfwBOxhcC6AlogiAA) +- [StackBlitz](https://stackblitz.com/fork/react-ts) +- [CodeSandbox](https://ts.react.new/) diff --git a/docs/basic/setup.md b/docs/basic/setup.md index 763653b4..23894c19 100644 --- a/docs/basic/setup.md +++ b/docs/basic/setup.md @@ -1,71 +1,30 @@ --- id: setup -title: Setup TypeScript with React +title: Setup --- ## Prerequisites You can use this cheatsheet for reference at any skill level, but basic understanding of React and TypeScript is assumed. Here is a list of prerequisites: -- Good understanding of [React](https://reactjs.org). +- Basic understanding of [React](https://react.dev/). - Familiarity with [TypeScript Basics](https://www.typescriptlang.org/docs/handbook/2/basic-types.html) and [Everyday Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html). -- Having read [the TypeScript section in the official React docs](https://reactjs.org/docs/static-type-checking.html#typescript). -- Having read [the React section of the TypeScript playground](http://www.typescriptlang.org/play/index.html?jsx=2&esModuleInterop=true&e=181#example/typescript-with-react). -This guide will always assume you are starting with the latest TypeScript and React versions. Notes for older versions will be in expandable `
` tags. +In the cheatsheet we assume you are using the latest versions of React and TypeScript. -## VS Code Extensions +## React and TypeScript starter kits -- Refactoring help https://marketplace.visualstudio.com/items?itemName=paulshen.paul-typescript-toolkit -- R+TS Code Snippets (there are a few...) - - https://marketplace.visualstudio.com/items?itemName=infeng.vscode-react-typescript - - https://www.digitalocean.com/community/tutorials/the-best-react-extension-for-vs-code -- TypeScript official extension https://code.visualstudio.com/docs/languages/typescript -- JavaScript and TypeScript Nightly https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next +React has documentation for [how to start a new React project](https://react.dev/learn/start-a-new-react-project) with some of the most popular frameworks. Here's how to start them with TypeScript: -## React + TypeScript Starter Kits +- [Next.js](https://nextjs.org/docs/basic-features/typescript): `npx create-next-app@latest --ts` +- [Remix](https://remix.run/docs/tutorials/blog): `npx create-remix@latest` +- [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/): `npm init gatsby --ts` +- [Expo](https://docs.expo.dev/guides/typescript/): `npx create-react-native-app -t with-typescript` -Cloud setups: +## Try React and TypeScript online -- [TypeScript Playground with React](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwCwAUKJLHAN5wCuqWAyjMhhYANFx4BRAgSz44AXzhES5Snhi1GjLAA8W8XBAB2qeAGEInQ0KjjtycABsscALxwAFAEpXAPnaM4OANjeABtA0sYUR4Yc0iAXVcxPgEhdwAGT3oGAOTJaXx3L19-BkDAgBMIXE4QLCsAOhhgGCckgAMATQsgh2BcAGssCrgAEjYIqwVmutR27MC5LM0yuEoYTihDD1zAgB4K4AA3H13yvbAfbs5e-qGRiYspuBmsVD2Aekuz-YAjThgMCMcCMpj6gxcbGKLj8MTiVnck3gAGo4ABGTxyU6rcrlMF3OB1H5wT7-QFGbG4z6HE65ZYMOSMIA) just if you are debugging types (and reporting issues), not for running code -- [CodeSandbox](http://ts.react.new) - cloud IDE, boots up super fast -- [Stackblitz](https://stackblitz.com/edit/react-typescript-base) - cloud IDE, boots up super fast +There are some tools that let you run React and TypeScript online, which can be helpful for debugging or making sharable reproductions. -Local dev setups: - -- [Next.js](https://nextjs.org/docs/basic-features/typescript): `npx create-next-app@latest --ts` will create in your current folder -- [Create React App](https://facebook.github.io/create-react-app/docs/adding-typescript): `npx create-react-app name-of-app --template typescript` will create in new folder -- [Vite](https://vitejs.dev/): `npm create vite@latest my-react-ts-app -- --template react-ts` -- [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) for React Native: `ignite new myapp` -- [TSDX](https://tsdx.io/): `npx tsdx create mylib` for Creating React+TS _libraries_. (in future: [TurboRepo](https://twitter.com/jaredpalmer/status/1346217789942591488)) - -
-Other tools - -Less mature tools still worth checking out: - -- [Snowpack](): `npx create-snowpack-app my-app --template app-template-react-typescript` -- [Docusaurus v2](https://v2.docusaurus.io/docs/installation) with [TypeScript Support](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 setup: - -- [Basarat's guide](https://github.com/basarat/typescript-react/tree/master/01%20bootstrap) for **manual setup** of React + TypeScript + Webpack + Babel -- In particular, make sure that you have `@types/react` and `@types/react-dom` installed ([Read more about the DefinitelyTyped project if you are unfamiliar](https://definitelytyped.org/)) -- There are also many React + TypeScript boilerplates, please see [our Other Resources list](https://react-typescript-cheatsheet.netlify.app/docs/basic/recommended/resources/). - -
- -## Video Tutorial - -Have a look at the 7-part "React Typescript Course" video series below for an introduction to TypeScript with React. - - - react typescript course video series - +- [TypeScript playground](https://www.typescriptlang.org/play?target=8&jsx=4#code/JYWwDg9gTgLgBAbzgVwM4FMDKMCGN0A0KGAogGZnoDG8AvnGVBCHAORTo42sDcAsAChB6AB6RYcKhAB2qeAGEIyafihwAvHAAUASg0A+RILiSZcuAG0pymEQwxFNgLobiWXPi0AGHfyECTNHRyShotXQMjAJM4ABMIKmQQdBUAOhhgGAAbdFcAAwBNJUks4CoAa3RYuAASBGsVegzk1Dy-E1pfQWM4DhhkKGltHpMAHn0RmNGwfSLkErLK6vqlRrhm9FRRgHoZybGAI2QYGBk4GXlSivUECPVDe0cVLQb4AGo4AEYdWgnomJil0WcGS+zgOyOJxkfwBOxhcC6AlogiAA) +- [StackBlitz](https://stackblitz.com/fork/react-ts) +- [CodeSandbox](https://ts.react.new/)