Bootstrap a TypeScript + React project

Instructor: [00:01] We'll start off with the Baboon's package.json file. We'll go ahead and install all the modules we'll need in one go. These are the general React modules like React, ReactDOM, Webpack, Webpack CLI, Webpack Dev Server, along with TypeScript and TypeScript-specific things like the types for React, ReactDOM, and ts-loader for Webpack.

[00:32] Once the installation is complete, let's kick off by wrapping up all the modifications needed for package.json by simply adding two script targets. We add a build script which just invokes Webpack in production mode. We also add a start script which runs with the Webpack Dev Server for live application development using development mode and serves up the public folder.

[01:04] Next we'll go ahead and add a webpack.config.js configuration file. First, we specify the application entry point. Up next is the output location for a built bundle.

[01:20] Next, we tell Webpack to support ts and tsx file extensions along with the original js extension. Finally, we tell Webpack that for ts and tsx files, it should use ts-loader.

[01:38] We'll go ahead and create our basic HTML file in the public folder. This file simply contains a root div where we'll render our React application, and loads the bundle generated from Webpack.

[01:58] Next, we'll go ahead and add a tsconfig.json file to set up the TypeScript compiler options. We enable source maps, so we can debug the TypeScript files.

[02:10] We'll be trans-filing to CommonJS. We want our JS to be compatible with ES5. For JSX, we'll be using React. We include all the files in the source folder, and disable compile on save for the IDE, is that will be done with Webpack.

[02:30] That's it for the configuration. Now let's write some demo code. I'll create a source app.tsx file. We'll simply import React and ReactDOM. Finally, we use ReactDOM to render "Hello world" to our root div.

[02:56] Now if we open up the terminal and run our scripts target npm start, it will start up a Webpack Dev Server and serve the public folder up at localhost 8080. If you visit this URL at the browser, you can see our application running.

[03:15] If you make an edit to the file, Webpack Dev Server will compile the file on the fly and re-load the browser. When you are ready to deploy your application, you can execute npm run built. This time, a Webpack will compile our code and write the app.js file to disk.

[03:39] If we wanted, we could ship the whole public folder to some hosting service provider, as it contains the built file along with index.html.

[03:53] To recap, the set-up simply involves three simple things -- package.json for specifying our npm modules and splits tsconfig.json for configuring TypeScript, webpack.config.js to use a Webpack for compiling and running our code, and npm modules in the browser.