Create a minimal React app in less than a minute with Parcel

February 20, 2019

The simplest way to get started with React is to use create-react-app (CRA), but that is often overkill. In this post I’ll take you from zero to React app in less than a minute, without CRA and without loads of dependencies. I’ll throw in TypeScript too for good measure.

The main benefit of CRA is that it saves you from having to set up the Webpack and Babel toolchain. Parcel is a great replacement for Webpack that really is zero-config, and can get you up and running in seconds.

First, create your directory and initialise Yarn. Could could also use NPM if you prefer.

➜ mkdir parceldemo
➜ cd parceldemo
➜ yarn init -y

Now install parcel:

➜ yarn add -D parcel-bundler

That’s your toolchain installed! You could also install parcel globally, or use npx, but I prefer to install it as a devDependency.

Now create the React app:

<html>
<title>Hello React</title>
<body>
<div id="root"></div>
<script src="index.tsx"></script>
</body>
</html>

You can of course use JavaScript instead if you prefer. Just call it index.js instead.

import * as React from "react";
import { render } from "react-dom";

const App:React.SFC = () => <h1>Hello world</h1>;

render(<App />, document.getElementById("root"));

if (module.hot) {
  module.hot.accept();
}

Now run Parcel:

➜ yarn parcel index.html

That’s it! Parcel will install React and ReactDOM as dependencies automatically, as well as TypeScript if you’re using it. Hot module reloading will work too.