Getting started for front-End development with TypeScript is extremely easy. Two of the top frameworks out there, which is Angular and View, are actually written in TypeScript and the most popular framework out there, which is React supports TypeScript out of the box. Let's look at how we can create a front-end React application using TypeScript. React comes with a package called Create React app, which takes care of all of the world plate code that you need to create a React application. So we open up the terminal and run NPX Create React app passing in the name of the application.

For our case, we'll use the name example and because we want to use TypeScript, we pass in the additional command line flags minus minus template TypeScript. This will install everything that is needed by a React application and set it up for us in the example folder. Once the installation is complete, we simply CD into the example directory and open it up within our IDE. As you can see, it has created a lot of the files for us so we don't need to worry about creating them ourself. It has the type strip configuration under TS configured json and all the package dependencies are specified under package

JSON and already installed for us into node underscore modules. Additionally, the package adjacent also specifies scripts that we will be looking at. In this lesson, all the source code is located in the source folder and our main application component is in the app. A TSX file. A TSX file is the same as a TS file and the only differences that A TSX file supports J-S-X-J-S-X is a way of writing HTMO within JavaScript. And since this file is a TSX file, all of this HTMO will additionally be type checked

by the TypeScript compiler. Now let's look at some of the scripts that come preconfigured with Create React app, we open up the terminal and run NPM start to start working on our application in live development mode. This starts a development server, which compiles the TypeScript source code on the fly into JavaScript and serves up our application at a particular URL and even opens up the browser for us at that URL. As you can see, our UI application corresponds to the source code within APP or TSX. Now let's make some modification to our UI application.

We turn the text, learn, react into Learning, react the live server reloads the browser, and you can see that the text is updated in the UI application with Learning React. And that's it for the development workflow. We can make any additional modifications to our source code and the browser will live reload. Now let's look at how we can deploy replication once we are ready to publish. A UI application is designed to run completely within the browser and the only support it needs from a web server is something that can serve up static files. In order to build these static files,

there is a command called NPM Run Build. This takes all our TypeScript source code and any static assets found within the Public folder and bundles them up into the build folder. Now the next step would be to deploy this build folder to any static file hosting server. We can even run a static file hosting server ourself by using the Serve NPM package to Run Serve locally. We run NPX serve passing in the name of the folder that we want to serve, which in our case is built. Once this command completes,

it starts serving up the build folder and copies the URL that we can open up in our browser to visit the built application. As you can see, our final application is same as the application that we were building using NPM start. Now there is a lot more learning you can do on your framework of choice, be it React or something else. But rest assured that once you know TypeScript getting started is simply a matter of reading the framework Startup Guide.