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 recommend 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.
Create the Project Structure
First things first we will need to create a directory for the project and setup node: At the time this tutorial was created, the latest stable version was 6.11.4.
If it is already installed on the system, set it in the project directory:
$ nvm use 6.11.4Otherwise you will have to install it first (to see all available version to install type: $ nvm ls-remote):
$ nvm install 6.11.4Starter Kit for React
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 globally 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).
After the initial setup, we will continue withe the actual TODO-App in the second part of this tutorial.