16 Creating a stand-alone web app, part 1

 

This chapter covers

  • Setting up a bundler to create files that can be efficiently delivered to browsers
  • Setting up the TypeScript compiler for the JSX workflow
  • Using JSX files to combine HTML markup and TypeScript code
  • Starting a simple web application without using a web application framework

In this part of the book, I show you how TypeScript fits into the development process for the most popular web application frameworks: Angular and React. In both cases, I go through the process of creating the project, setting up a web service, and writing a simple web application. In this chapter, I create the same web application without using any of these frameworks, providing a baseline for understanding the features they provide and context for how TypeScript features are used.

I don’t recommend creating real applications without using a framework, but working on a stand-alone application reveals much about TypeScript and its role in modern development and is worthwhile simply to learn. For quick reference, table 16.1 lists the TypeScript compiler options used in this chapter.

16.1 Preparing for this chapter

16.2 Creating the toolchain

16.3 Adding a bundler

16.4 Adding a development web server

16.5 Creating the data model

16.5.1 Creating the data source

16.6 Rendering HTML content using the DOM API

16.6.1 Adding support for Bootstrap CSS styles

16.7 Using JSX to create HTML content

16.7.1 Understanding the JSX workflow

16.7.2 Configuring the compiler and the loader

16.7.3 Creating the factory function

16.7.4 Using the JSX class

16.7.5 Importing the factory function in the JSX class

16.8 Adding features to the application

16.8.1 Displaying a filtered list of products

16.8.2 Displaying content and handling updates

Summary