How to Set Up a React TypeScript Project from Scratch with Babel and Webpack

Updated: 7 September 2019 — typo fixes, npm run => npm run-script, gist code examples

Updated: 3 November 2020 — I am building a self-improvement product and for those who are interested in the opportunity to win a $100 Amazon Gift Card, please fill out this survey: https://forms.gle/xKGKWSZfq5EEk9kc9

Introduction

In this tutorial, you will learn how to set up a React TypeScript project from scratch. I’m assuming most of you know what TypeScript is and what its benefits are, so I won’t delve into that too much. But for those who are unsure and are more interested you can find more information about it here. Now, let’s get into how to setup a React TypeScript project from scratch.

Setup and Explanation

To begin with, we need to ensure you have the correct file structure as shown in the image below.

To replicate it you can use these commands:

mkdir react-typescript-boilerplate 
cd react-typescript-boilerplate 
mkdir -p src/components src/styles

Note: The -p flag stands for parents and allows you to create parent folders along with their children folders. Try the last command without the -p to see.

Make sure you have node and npm installed on your machine, if you’re unsure use npm -v to check your version of npm. If you don't have it installed, install it here.

Once you’ve confirmed that you have npm installed or you’ve installed it, we need to initialize our project with npm and create a package.json.

Type npm init to initialize the project while you're in /react-typescript-boilerplate. This will begin a series of prompts for customizing some of the base properties in package.json, you can also call npm init -y to skip those steps.

Now that we have the basic project set up we’ll need to install some packages, I’ll also provide a brief and simplified explanation of what each package does:

• webpack and webpack-cli

webpack is simply a module bundler. While it can bundle almost any resource or asset, it is most commonly used to bundle JavaScript files for use in a browser, in this case it will be bundling or .tsx and .ts files into .js so it can be served.

npm install webpack webpack-cli --save-dev

• react and react-dom

We also need the react and react-dom packages. react is necessary to define React components and the react-dom package is used as the entry point to the DOM (Document Object Model) for the web whereas the react-native package is used for native environments (mobile).

npm install react react-dom --save

• typescript

typescript is installed for access to its awesome type checking properties.

npm install typescript --save-dev

• babel

babel is a JavaScript compiler, and it allows us to write next-gen JavaScript (es6, es7, esnext) and will compile into browser-compatible JavaScript. As of Babel 7, Microsoft and the Babel team have worked together so that you can use babel-loader to compile JavaScript. The two plugins installed are for letting Babel know about a couple of extra features which TypeScript has.

npm install @babel/core babel-loader @babel/preset-react @babel/preset-typescript @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread --save-dev

• css-loader and style-loader

Two style loaders which will be used to compile your CSS in webpack.

npm install css-loader style-loader --save-dev

html-webpack-plugin

npm install html-webpack-plugin --save-dev

• webpack-dev-server

webpack-dev-server watches our changes and refreshes the webpage whenever any change is made to our components.

npm install webpack-dev-server --save-dev

• tslint

tslint is used in your IDE and will give you underline your code in red if it is does not adhere to the rules you’ve set in tslint.json.

npm install tslint tslint-immutable --save-dev

• react and react-dom types

react and react-dom types are the typing files we install for TypeScript.

npm install @types/react @types/react-dom

A side note about typing files (types.d.ts): the TypeScript compiler will complain when you install a package without its typing files. This is annoying because not all npm packages have typings files, so TypeScript will complain about the module not existing. An easy, albeit hacky way to deal with this is to create an override.d.ts file in /react-typescript-boilerplate/typings and typing: declare module package-with-no-typings-file. This way you will be able to use the package without the IDE complaining, but you won't have types.

Now that we have all the necessary dependencies and packages, let’s also create some of the basic files: index.tsx and index.html in /src. If you're in ./src you can type touch index.tsx index.html to create new files from the terminal.

Note: .tsx is just the TypeScript version of a .jsx file if you’re familiar with React.

index.html:

Creating the HTML file which would normally be hosted on a server and the location where the react code will be injected (root).

We’ll also add in some basic styles.

In ./src/styles, create index.css with the following code:

h1 {
    color: #292727;
    text-align: center;
}

In ./src/components, create App.tsx:

See here for the differences between React.Component and React.PureComponent.

index.tsx:

This is fairly straightforward if you’ve used React before, you’re basically creating a basic HTML file and injecting the react project with ReactDOM.render in root.

We also need to add all the configuration files that will allow us to compile the files, bundle the files and develop with TypeScript:

• package.json

Make sure you have this property set in your package.json, it will allow you to use npm to bundle, test, start, build and check-types. Try using npm run-script to call each one of the properties of scripts (e.g. npm run-script bundle).

The following files should be created in the parent folder /react-typescript-boilerplate:

• .babelrc

.babelrc will tell babel which presets to use for transpiling the code. You can look at what each of these things do, but they each essentially do the same thing which is transpile the code to ES5.

• webpack.config.js

• tsconfig.json

The tsconfig file allows us to configure which rules of TypeScript we would like to adhere to. See here for more information on this.

• tslint.json

Last but not least, the tslint.json file defines the rules which our IDE will use to provide instant feedback on whether our code adheres to the stated rules or not.

Finally, run the command in terminal:

npm start

A new window should’ve opened up in your default browser and that’s all there is to setting up a TypeScript React project from scratch. Now that you have your own TypeScript react boilerplate, you can begin creating React projects! If you want to, you can also clone this react setup from my Github. Don’t forget to star the

If you found this article helpful, please hit the 👏 button. If you have any questions/requests or if you run into any difficulties, let me know down below. I’d be happy to help.