Zero configuration React and TypeScript with Parcel

My JavaScript zero configuration developer experience began with an article on CSS-Tricks about Parcel. Parcel is a new application bundler which promises zero configuration and who wouldn't want that after battling Webpack, Babel, TypeScript, and the many other configuration files in modern web-apps. Realistically as your application grows more complex you will need to use configuration files but as a starting point this is almost a perfect approach.

So let's see how we can very quickly get Hello world. in a browser using React with TypeScript. You'll need npm and node installed already.

npm install -g parcel-bundler
mkdir parceltest
cd parceltest
echo "<html><body><div id="root"></div><script src="./index.tsx"></script></body></html>" > index.html
echo -e "import * as React from 'react'\nimport ReactDOM from 'react-dom'\nReactDOM.render(<h1>Hello world.</h1>,document.getElementById('root'))" > index.tsx
parcel index.html
=> localhost:1234

And there you go, localhost:1234 works as intended;

2019-10-24 at 13.43.png

Parcel figured out we needed React, ReactDOM, TypeScript, and JSX all by parsing the code and not a configuration file.

I've used JSX which either requires a .tsx file extension or a TypeScript configuration which is counter to what we're trying to achieve here. You'll notice import * as React from 'react' rather than the simpler import React from 'react' and this is due to a somewhat counter intuitive default configuration by Parcel for TypeScript which I hope they change.