Adding npm scripts

Understand how to add and configure npm scripts in a React and TypeScript project to run the app in development mode and create production builds. Learn to use Webpack commands effectively and resolve type errors during development.

We'll cover the following...

Adding the scripts
Running the app in development mode
Producing a production-ready build #
Wrap up #

Adding the scripts

We are going to leverage npm scripts to start our app in development mode and build a production version of our app. Let’s add a scripts section to package.json with the following scripts:

  ...,
  "scripts": {
    "start": "webpack serve --open --mode development",
    "build": "webpack --mode production"
  },
  ...

1.Why TypeScript?

2.Using basic types

3.Creating types

4.Working with generic types

5.Creating strongly-typed function component props

6.Creating strongly-typed function component state

7.Creating strongly-typed class components

8.Creating strongly-typed component events and event handlers

9.Creating strongly-typed context

10.Creating strongly-typed refs

11.Creating React projects with TypeScript using Create React App

12.Creating a React and TypeScript project manually

13.Putting everything together

Adding npm scripts

Adding the scripts

Running the app in development mode