Setting up simple React & TypeScript project

Hello 👋🏻

It’s have been a long time since I last wrote my last blog post. But don’t worry I back and in the first blog post I give you a small template so if you are interested in working with React & TypeScript please join me!


You may ask yourself why even bother adding a new template when there is so much already existing? The answer is simple - because I can. I also have an idea about presenting changes in this template as my project will grow so you can see what was added and why.


It is nothing magical over there: you have parcel-bundler that is doing the most of the work. You plug index.tsx like you can see in index.html:

<!doctype html>
    <title>TypeScript + React with Parcel Sandbox</title>
    <meta charset="UTF-8" />

    <div id="app"></div>

    <script src="src/index.tsx"></script>

One more important config to look into is tsconfig.json which tells TypeScript compiler how to compile a project. The most important entry from the point of type-safely is:

"strict": true,

followed by:

"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,

Type-safely means that you have to put more hard work into typing your application (like ensuring there are no implicit anys) but in reward of having fewer bugs in runtime. I encourage you to enable it every time.

As we are still in tsconfig - there is one entry called plugin where I put typescript-tslint-plugin. This little fella will run tslint plugin from Microsoft in your VSCode. If you don’t use VSCode - you can remove this one line.

Next to tsconfig is tslint.json - linter for TypeScript files configured to follow recommended rules and prettier one. This tslint-config-prettier entry should be the last in extends array to ensure that prettier will format code according to tslint.

I’ve added also a jest for testing with ts-jest that enables TypeScript support to unit test files.

Summary & TL;DR

I give you TypeScript + React with Parcel playground: