Getting started with examples

Installation

Let’s start by creating a simple React Project using create-react-app . In your command terminal, type:

$ create-react-app typescript-react

$ cd typescript-react

This command will create a new React project directory named typescript-react in your folder. Let’s make some changes inside this project so that we can use TypeScript.

Let’s start by installing a couple of packages as dependencies to this project. Along with things like webpack and webpack-dev-server , we also need to install the typescript package and TypeScript specific modules like @types/react and @types/react-dom . We also need the ts-loader for webpack.

$ yarn add webpack webpack-cli webpack-dev-server typescript @types/react @types/react-dom ts-loader

Configuration

Open the project directory in a code editor that supports TypeScript (I ❤️ VS Code) and take a look at the package.json file. Rewrite the scripts objects as shown below:

"scripts": {

"build": "webpack ./webpack.config.js",

"start": "webpack-dev-server ./webpack.config.js --content-base ./public"

}

Here, the start script uses the webpack.config.js file to run the webpack-dev-server for live application development and serves up the ./public folder. Create this file inside the root of the directory and write the following code inside it:

module.exports = {

devtool: 'inline-source-map',

entry: './src/app.tsx',

output: {

path __dirname + '/public',

filename: 'build/app.js'

},

resolve: {

extensions: ['.ts', '.tsx', '.js']

},

module: {

rules: [

{test: /\.tsx?$/, loader: 'ts-loader'}

]

}

}

Here, inline-source-map is used to debug TypeScript files within the browser. ./src/app.tsx is specified as the entry point. I’ve also specified a location for the built bundle inside the output object. We also need to inform webpack that it needs to support all files that have a .ts , .tsx or .js extension. Finally, we need to tell webpack to use ts-loader for .ts and .tsx files.

Inside the public folder, delete everything except the index.html file. Rewrite the code inside this file as shown below:

<!DOCTYPE html>

<html lang="en">

<body>

<div id="root"></div>

<script src="./build/app.js"></script>

</body>

</html>

This code has a simple div with an id of “root” where we will render the React app, and then loads the bundle that is generated by the webpack.

Next, let’s write some configuration for TypeScript. Create a tsconfig.json file inside the root of the directory and write the following code inside it:

{

"compilerOptions": {

"sourceMap": true,

"module": "commonjs",

"target": "es5",

"jsx": "react"

},

"include": [

"src"

],

"compileOnSave": false

}

The sourceMaps is enabled in order to debug the TypeScript files within the browser. We also need to tell TypeScript that we are using commonjs for the module format targeting es5 . But most important piece of code here is the one that tells jsx to transpile to React.createElement . After that we need to tell TypeScript that the source code is present inside the src folder. Disable TypeScript ‘s compileOnSave because that will be handled by webpack.

Verify

Delete all the files inside the src folder and create a new file named app.tsx with the following code inside it:

import * as React from 'react';

import * as ReactDOM from 'react-dom'; ReactDOM.render(

<div>Use TypeScript with React</div>,

document.getElementById('root')

);