DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Matt Kane
Matt Kane

Posted on

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

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
Enter fullscreen mode Exit fullscreen mode

Now install parcel:

➜ yarn add -D parcel-bundler
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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();
}

Enter fullscreen mode Exit fullscreen mode

Now run Parcel:

➜ yarn parcel index.html
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠