Getting Going

To get started I created a empty directory and followed the setup guide here: https://parceljs.org/getting_started.html.

Now that I had the required CLI tools in place I wanted to see how quickly I could get something up and running. I decided to put a simple react application together.

This is something I have done plenty of times with webpack, yet it had always taken me half an hour or so to get going from a clean slate.

The Seemingly Simple First Step

So according to the documentation I could simply create some files and start running things. I started a new node project with yarn init and created my static html file index.html .

To test that all of this was working correctly I quickly created a simple javascript file called app.js that would console log a message to my terminal:

// app.js console.log('Hello From Parcel');

I then simply ran the parcel command to get my app running: NODE_ENV=development parcel ./index.html to my amazement things started to happen. I was greeted with a nice message indicating that I could see my application running at http://localhost:1234/ . Upon visiting this and checking my console, I was pretty happy to see the the message was displayed as expected.

Wow.. you got it to say hello?

Okay yes, this is a very trivial example so lets press on with the react application and see what happens.

Note: Im going to presume from this point onwards that people know how react works. If not there are great guides online.

So the next step was to start creating a react component to render to the page, again I went for a simple change. Rather than logging “Hello From Parcel” to my console I just wanted to get this rendering as text to the DOM.

I created a simple stateless react component to achieve this:

I then updated my code in the app.js file to render my components to the DOM.