Create a React app with zero configuration using Parcel

We have all experienced the pain of getting started with React. You spend hours to configure webpack before you can start actual coding.

Create React App was created to make it easier and quicker to get started. The problem with creat react app is that it hides the webpack config. When your app grows and you need something a bit more advanced, you have to eject and then you get a huge webpack config. And then you are back to the problem that you need to learn webpack anyway.

react parcelRecently a new bundler was released – Parcel – that supposedly require 0 (zero!) configuration. It almost sounds too good to be true. It looks like it solves all our problems.

 

I tried it on a large code base, and it worked out-of-the-box! It even gave me a bundle that was optimized. I have spent days optimizing that bundle using webpack.

I think this tool has potential. Let’s look at how to create a React app from scratch!

Create a React app with Parcel

First, we create a new NPM app:

mkdir react-parcel
cd react-parcel
npm init

npm init will ask you a bunch of questions. Just press enter for the defaults.

next add the dependencies for React, babel and Parcel:

npm install --save react
npm install --save react-dom
npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-env
npm install --save-dev parcel-bundler

Next, we create the .babelrc file. This file tells parcel that we are using ES6 and React JSX!

{
  "presets": ["env", "react"]
}

Next create our react app. It’s only two files:

import React from "react";
import ReactDOM from "react-dom";

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

var mountNode = document.getElementById("app");
ReactDOM.render(<HelloMessage name="Jane" />, mountNode);

index.js

 

<!DOCTYPE html>
<html>
    <head>
        <title>React starter app</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="index.js"></script>
    </body>
</html>

index.html

Now we just need to add a script entry to package.json to be able to start our app


"scripts": {
  "start": "parcel index.html",
},

We are done. Let’s start our app:

npm start

Currently you must use node 8 (or later). Now browse to http://localhost:1234 to see the app!

The full source code can be found here.

Compare this to the config you have to write if you are using webpack. This was a lot simpler!

Parcel looks like a decent alternative to Create React App. Is it ready for production on large application? Not sure, we have to see how things develop. It is going to be interesting to follow!

  • Unbelievably simple. Will give it a shot.

    • jakoblind

      Yes it’s almost too good to be true, worth checking out! 🙂

  • Cool, I know it just yesterday …

    • jakoblind

      Awesome, Snow!

  • Chaim Lando

    nice, thanks the introduction. I love your short and simple posts.
    btw, you can run `npm init -y` instead of entering through all the questions

    • jakoblind

      cool, didn’t know that!
      It makes me very happy you like my posts, Chaim! 🙂

  • Oz

    react-parcel/index.js:6:11: Unexpected token (6:11)

    • jakoblind

      Do you get that error in the console or in the browser?
      Are you using node 8 or later?

      • Oz

        User error. I had spelt .babelrc incorrectly. Your repo worked so I diffed it with mine to find out where I had gone wrong.

  • Samet Cömert

    Thanks. Giving a clear direction to people is hard these times..

  • Uyntx Xyntu

    unnecessary comma in the scripts section in package.json

  • Uyntx Xyntu

    parcel build index.html
    https://i.imgur.com/mqIMGu0.png

  • I’ve been using Webpack for a long time and after seen this post I gave it a try.
    It is so much easier, and faster.
    I’ve learnt that we can use CSS like import './index.css' in our JS file.
    And I wonder that how can we compile and use SCSS files with Parcel?

    • jakoblind

      I think you can import an SCSS file the same way you import CSS file. I have not tried it myself though. Did you try it?

      • While I was waiting for your reply, I’ve found the answer.

        Yes, the same way.
        import './style.scss'

        But we need to install node-sass package.
        npm install node-sass

        • jakoblind

          Sweet, thanks for sharing, Özgür!

  • pratheep

    Thanks for the simple example. But zero configuration does not seem practical, e.g. what if I want the index.js(and other source files) inside a subfolder? Its common to place the source files inside an ‘src’ folder.

    • jakoblind

      That is possible also with Parcel! Just edit your NPM script to point to the path where your index.html is. For example:
      “start”: “parcel src/index.html”

  • Mrhut10

    Thank you that was such a great article, very helpful.
    thank you.