Understanding how the scripting language gets implemented with React by setting up a habit tracking app.

After learning that the 2nd  most loved programming language of 2020 was TypeScript, naturally, for many early JavaScript developers discovering TypeScript like myself, the question lends itself to whether and how engineers are using it with the 2nd most loved and  most used JavaScript framework/library, aka React.

Many in the community believe the two go well together; one developer offers an explanation as to why:

JSX is syntactic sugar. Every JSX element you open and pass properties through, is nothing but a function call in React (or Preact or Vue or Dojo… you name it). This gives us one big advantage in TypeScript: JavaScript can be parsed, understood and evaluated. Which means you get all the tooling and compilation benefits that TypeScript has to offer. Missing a required property? TypeScript will tell you! Having a typo somewhere: You will find out. Not knowing which properties you need? Autocomplete to the rescue!

For a more hands-on approach, I decided to make a mini habit tracker application (Rails on the backend, React on the frontend) to get a sense of how this integration plays out.

The Basics

I typically use Create React App to get a new React project up and running, and as it turns out, the CRA docs offer support for TypeScript.

Start a new react app with TypeScript:

npx create-react-app my-app --template typescript

## or
yarn create react-app my-app --template typescript

Make sure to swap my-app with your intended name for your app/frontend folder.

#typescript #programming #react #javascript