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 create 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.

0 (zero!) configuration. It almost sounds too good to be true. It looks like it solves all our problems. Recently a new bundler was released - Parcel - that supposedly require. 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!

Get the code from this post

You'll also get fresh articles about Redux/React a few times per month.

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" : [ "@babel/preset-react" ] }

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

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

…and then index.html :

<!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!

Thoughts

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!