Last yarn start command will:

• start a development server at http://localhost:1234 with hot module replacement

• build automatically development javascript files with source maps

Parcel’s default optimizations will be applied to generated files.

Files are saved at dist folder. Inside dist folder there is also a file with information about bundle content sizes: dist/report.html.

Add React dependencies.

Previous command modifies package.json file adding dependencies section and will also install React packages in node_modules folder.

Add Typescript compiler as development dependency.

We also need Parcel bundler.

I’ve added a non-required dependency, it is a plugin to generate a report of generated bundle contents (the parcel version of webpack-bundle-analyzer.

First we create the React application in src/index.tsx file.

Parcel can take index.html file as entry file and it figures out how to build the application, so let’s create src/index.html as follows:

We need div tag for React to inject the DOM elements. The script declaration is used by Parcel to find entry point to build.

I’ve added the commands:

• build: Check "Build production bundle" section.

• start: Check "Development server" section.

Then to it is really easy to:

• run development server: yarn start

• generate a production bundle: yarn build

There is another approach described in Parcel documentation that consists of installing Parcel globally.

I’ve opted for more isolated approach that affects only project you are working on, you just install Parcel as devDependency. There is a tiny drawback, you can’t just run parcel index.html, because it is not installed in your system, but in node_modules.

There is a simple way to run any binary installed in node_modules, you can just run npx parcel index.html.

I like more to define build steps in package.json file, so you can have well defined commands more suited to build your project. You can also use these commands as documentation how to build your project.

With this configuration, Typescript compiler will:

• Generate files in dist folder.

• Generate source maps.

• Will not allow to declare any type, for example following declaration is not allowed: const elements: any;

• Generated module code will be CommonJs.

• Generated code will be ECMAScript 5 compliant.

• Support JSX in .tsx files.