React Using ReactJS with Typescript Installation and Setup

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Example

To use typescript with react in a node project, you must first have a project directory initialized with npm. To initialize the directory with npm init

Installing via npm or yarn

You can install React using npm by doing the following:

npm install --save react react-dom

Facebook released its own package manager named Yarn, which can also be used to install React. After installing Yarn you just need to run this command:

yarn add react react-dom

You can then use React in your project in exactly the same way as if you had installed React via npm.

Installing react type definitions in Typescript 2.0+

To compile your code using typescript, add/install type definition files using npm or yarn.

npm install --save-dev @types/react @types/react-dom

or, using yarn

yarn add --dev @types/react @types/react-dom

Installing react type definitions in older versions of Typescript

You have to use a separate package called tsd

tsd install react react-dom --save

Adding or Changing the Typescript configuration

To use JSX, a language mixing javascript with html/xml, you have to change the typescript compiler configuration. In the project's typescript configuration file (usually named tsconfig.json), you will need to add the JSX option as:

"compilerOptions": {
    "jsx": "react"
},

That compiler option basically tells the typescript compiler to translate the JSX tags in code to javascript function calls.

To avoid typescript compiler converting JSX to plain javascript function calls, use

"compilerOptions": {
    "jsx": "preserve"
},


Got any React Question?