Skip to content

Setup in React

Prerequisites

  1. good understanding of React
  2. familiarity with TypeScript Types (2ality's guide is helpful. If you’re an absolute beginner in TypeScript, check out chibicode’s tutorial.)
  3. having read the TypeScript section in the official React docs.
  4. having read the React section of the new TypeScript playground (optional: also step through the 40+ examples under the playground's Examples section)

This guide will always assume you are starting with the latest TypeScript and React versions. Notes for older versions will be in expandable <details> tags.

VS Code Extensions

  • 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

React + TypeScript Starter Kits

Cloud setups:

Local dev setups:

  • Next.js: npx create-next-app -e with-typescript will create in your current folder
  • Create React App: npx create-react-app name-of-app --template typescript will create in new folder
  • Vite: npm create vite@latest my-react-ts-app -- --template react-ts
  • Meteor: meteor create --typescript name-of-my-new-typescript-app
  • Ignite for React Native: ignite new myapp
  • TSDX: npx tsdx create mylib for Creating React+TS libraries. (in future: TurboRepo)
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