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-domFacebook 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-domYou 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-domor, using yarn
yarn add --dev @types/react @types/react-domInstalling react type definitions in older versions of Typescript
You have to use a separate package called tsd
tsd install react react-dom --saveAdding 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"
},