Questions And Answers

More Tutorials

React Installation and Setup

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"


In this page (written and validated by ) you learned about React Installation and Setup . What's Next? If you are interested in completing React tutorial, your next topic will be learning about: React Stateless React Components in TypeScript.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.