Set up React dev Environment using Webpack and TypeScript

In the previous posts we saw on how to create React Applications using JavaScript and JSX. We can also write react applications using TypeScript. The build environment setup will be different when we use TypeScript.

When we created React Applications using JavaScript (ES6) we used the Bable loaders to transpile ES6 code into browser compatible JavaScript code, in case of TypeScript we will have to use a TypeScript loader (ts-loader) instead of Bable.  In this post we shall see in details on how to setup the environment for creating React applications using TypeScript.

First to start with let us create a new project by running npm init

React Environment Setup and Build Tools Overview

React Environment Setup and Build Tools Overview

Setting up React dev Environment using Webpack and babel React Setup and Build Tools Webpack npm npm semantic versioning npm package-lock.json Bable Source Map

Source Map

Source Map helps us debug JavaScript code in production. Source Map creates a mapping between the original development version of the JavaScript / JSX files and the compiled and bundles production version of the JavaScript files, thereby allowing us to debug in production.

In the previous posts we saw how Bable compiles the ES6 & JSX code and transforms them into JavaScript and how webpack bundles the individual files into a common bundle.js file. As a result of the transpilation, minification and bundling process we are left with a large JavaScript file which is almost impossible to debug, but we cannot avoid these steps since they are required to make the JavaScript application secure and performance efficient in the production environment. If so then how do we debug issues in production environment, the answer to this is Source Map.

Bable

Babel is a JavaScript compiler which is used to transform ES6 JavaScript code to ES5 JavaScript which the browsers can understand. This transformation is called transpilation. React components are generally written using ES6 classes and JSX syntax, bable loaders are used to transpile ES6 and JSX code to core ES5 JavaScript.

Webpack cannot compile ES6 JavaScript code, hence it used loaders to transpile ES6 and JSX code. In the React sample we used bable-loader in the webpack configuration to compile ES6 and JSX code into native JavaScript code.

For the React Application we used the following 3 bable packages

Webpack

Webpack is a module bundler, its main purpose is to bundle all the dependent files into a single .js file which helps optimize the page load. Apart from bundling webpack can also be used as a task runner by configuring a sequence of tasks in the build process like cleanup target folder, bundle files, copy files etc. Webpack by itself is a big topic, in this post we shall see the minimal configuration required in webpack to bundle and load a React Application.

Webpack is configuration driver, remember we created a file in the webpack.config.js previous Hello World post, this is the webpack configuration file. The most minimal webpack configuration includes and entry (input) and an output.

React Setup and Build Tools

In the previous post we saw how to setup the environment to develop a Hello World React App, we saw that we used a set of npm packages and tools like webpack, bable etc to setup the environment, in this post we shall see the purpose of each of the tools in setting up the React Environment.

Setting up React dev Environment using Webpack and babel

Modern web development frameworks like Angular / React are complex and involves complex environment setup before we could write our Hello World program. Setting up the development environment for React is a tedious task. In this post we will try to set up the development environment and display Hello World using a react component.

1. First let us create a folder ReactHelloWorld, we will setup the environment and create the Hello World component in this folder.

2. Next make sure node is installed in the pc, if not installed already install the latest version of Node.js. We can check if Node is installed by running the command node –v, if Node is installed this command will return the version of Node.js Installed in the pc.

ReactHelloWorld>node –v
v8.12.0