"ToDo" App with React and Typescript (Part 1)

In this tutorial we will build a simple app to manage ToDo items. Basic knowledge in React is required: the focus of this article is to create an initial setup to work with Typescript and React. This will include setting up Node with nvm and initializing the project structure.

Node with NVM

In order to install Node you can simply install it globally with the provided executable. But I would recomend to install it with nvm - a version manager for Node. In this way you can use multiple versions and choose the one which suits a project best. On a Mac, the installation is simple with homebrew:

$ brew install nvm

(there are additional steps in order to make nvm available in the CLI: please refer to the message displayed after the installation)

Create the Project Structure

First things first we will need to create a directory for the project and setup node: We will use the latest stable version 6.11.4.

If it is already installed on the system, set it in the project directory:

$ nvm use 6.11.4

Otherwise you will have to install it first (to see all aviable version to install type: $ nvm ls-remote):

$ nvm install 6.11.4

The easiest way to create a project is to use a starter kit, e.x: https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter. It provides a template for a typical TypeScript / React setup with useful tools and defaults.

By typing the following command you will globaly install the starter kit:

$ npm install -g create-react-app

To create the initial project structure:

$ create-react-app todo-react-app --scripts-version=react-scripts-ts

(in this case "todo-react-app" is the project directory and the project name).


A good text editor which supports the features of the language is recommended to work with TypeScript source files: My favorite is Visual Studio Code: it is lightweight, has a very good support for TypeScript and offers many plugins (e.g. for integration with git or different programming languages).