Creating our application

Before we can begin writing our code, we need to install React. While it is possible to create the infrastructure we need for React manually, most people use the create-react-app command to create a React application. We aren't going to do this any differently, so we are also going to use the create-react-app command. React does not use TypeScript by default so we are going to add a little bit extra to the command we use to create our application to give us all the TypeScript capacity that we need. We use create-react-app, giving it the name of our application and an extra scripts-version parameter that hooks in TypeScript for us:

npx create-react-app chapter03 --scripts-version=react-scripts-ts

If you have installed Node.js packages before, you may think that there is a mistake in the preceding command and that we should be using npm to install create-react-app. However, we are using npx in place of npm because npx is an enhanced version of the Node Package Manager (NPM). With npx, we missed out the need to run npm install create-react-app to install the create-react-app package before manually running create-react-app to start the process. The use of npx does help to speed up our development workflow.

Once our application has been created, we open the Chapter03 directory and run the following command:

npm start

Assuming that we have a default browser set, it should be opened to http://localhost:3000, which is the default web page for this application. This will serve up a standard web page that just happens to contain a default React sample. What we are going to do now is edit the public/index.html file and set a title for it. We are going to set our title to Advanced TypeScript - Personal Contacts Manager. While the contents of this file appear to be sparse, they contain everything that we need on our HTML side, namely, a div element called root. This is the hook that our React code will hang off, as we will discuss later. We can live edit our application so that any changes we make will be compiled and served back to the browser automatically:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>Advanced TypeScript - Personal Contacts Manager</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

Table of Contents for Creating our application

Create new playlist

Sign In

Sign Up

Table of Contents for
Creating our application