Create a new project directory and navigate there:
Init this directory as an
npm-package. It will allow you to install third-party packages such as React and TypeScript later:
Install React, React-DOM and TypeScript:
Install type definitions for React and React-DOM. They will allow TypeScript compiler to work with packages and figure out the types that can and cannot be used with
If you use some other packages you will need to install types for those packages too. The
DefinitelyTyped repository contains the biggest amount of type declarations for npm packages. You can find the types for your package there and install them.
This file is used as settings for TypeScript compiler and tells it how to interpret the code.
After it's done, open this file and add the following option:
This will allow a compiler to work with JSX components as React components.
Setting up Webpack#
webpack, its command line interface, and
The latter is used to deal with the
html-entrypoint so that we will be able to run our application in a browser.
ts-loader package is a loader for webpack that knows how to work with TypeScript files. Webpack itself doesn't know that.
Then, create a
Create an entry point file
Create a first component
Add a template
This package is used to run application while developing. Also, it will reload the application when source code is changed.
Set up development server in your
package.json file, update
scripts section with these scripts:
build script will build your application in a
production mode which creates an optimized production build.
dev script will set up a development server on
localhost for you to develop the application.
If you now run
npm run dev and open
http://localhost:9000/ you will see a running app.