Creating React and TypeScript apps with Webpack

In this post, we will cover how to use webpack to bundle a React and TypeScript app. We will also include how we can use webpack to provide an awesome experience while developing our app. Our setup will ensure type checking and linting occurs in the webpack process, which will help code quality.

Creating a basic project

Let’s create the following folders in a root folder of our choice:

build: This is where all the artifacts from the build output will be. This will also hold the HTML page that the React app will be injected into.
src: This will hold our source code.

Note that a node_modules folder will also be created as we start to install the project’s dependencies.

In the root of the project, add the following package.json file:

{
  "name": "my-app",
  "version": "0.0.1"
}

This file will automatically update with our project dependencies as we install them throughout this post.

Let’s also add the following index.html file into the build folder:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

Our React app will be injected into the root div element. All the app’s JavaScript code will eventually be bundled together into a file called bundle.js next to index.html in the build folder.

#typescript #react #webpack #javascript

Creating a basic project

carlrippon.com

Creating React and TypeScript apps with Webpack