Introductions

So here I was quite a while ago, just finished the long lessons from freecodecamp on Front End Development focused on React.js and Redux, and as usual I did and completed all my projects on codepen and all I knew and wanted to know about setting up react was using cdn links in the html files. I mean it was fine and all till I wanted a website that has more than one page and less cluttered components all jam packed in one js file. I was fixated on cdn so I temporarily solved my problem, which was setting up a node backend server and set up a html file for each route, each having React and Babel cdn links and their js files, thanks to freecodecamp backend lessons and glitch. The more the complexity of my app grew, the more the stress of setting it up grew too.

Prerequisites

For this article, I'm going to assume the use of node package manager(npm), for those using yarn replace npm install with yarn add.

• If you want to use Create React App, make sure you install it by

  npm install create-react-app -g
  

• For Parcel.js;

  npm install parcel-bundler -g
  

• If your choice is Gatsby.js

  npm install gatsby-cli -g
  

• Going for Next.js?

  npm install create-next-app -g
  

  or if you want a manual custom setup

  npm install next
  

Create React App

I had to look for a better solution to my previous setup, and easily came across Create-React-App, voila a big relief! So the adventure continued, but it became a little irritable why? Creating and setting up the CRA project is totally done by CRA but time consuming, sometimes takes up to 30 minutes to be done on my local machine. Another is it's just a bare minimum react project, features like Link, Redirect needed to route pages are not present, so you'll have to result to external libraries. So I began the search for a better solution. I then stumbled on Parcel.js.

Parcel.js

Parcel.js is a framework that helps to set up react projects easily and very fast. All you need to do is create three new files, index.html, index.js and package.json and in the package.json, point Parcel to index.html and connect index.js to the html file. Before this you'll have to install it globally.

After this, all your pain is taken away! It becomes so easy to set up a project and Parsing/reload time is very fast mostly under 5 seconds. Learn more on Parcel.js here

Of course there'll be a but, there are some shortcomings of Parcel, it's amazing for small to medium complex projects, large and very complex projects don't do well with Parcel.js, coupled with the fact that it doesn't scale so well. Also, it's still a bare minimal framework, so every extra feature we need like Links needs to be installed externally.

Gatsby.js vs Next.js

Let's talk about Gatsby and Next.js, now these frameworks have custom features, pre-rendering, Links and Redirects, Css-in-Js, easy page generation, static site generation like the previous ones and Next.js goes even more forward to have server side rendering which is a whole new level ahead. Setting up these projects is similar to CRA, so again a little time consuming but yeah we have a lot of features to compensate for that right?

But there are also cons like stopping a Gatsby server sometimes takes a lot more than ctrl + C. And their compilation speed cannot match Parcel.js.

If I were to choose one, I'd consider many factors like my level or experience with these set ups, the size of the project, the features of the application amongst many more.

The popular Gatsby plugins and themes makes Gatsby a good catch but then Gatsby is a bit opinionated, how? It relies heavily on plugins and GraphQL. Also Gatsby as I've said before can be very slow and takes a while to stop or start the server, also doesn't scale very well, but better than Parcel.js of course.

Next.js does everything discussed earlier , possesses server side rendering, scales well, has a lot of custom features, doesn't force us to use GraphQL and more. But, it does not provide a place for dynamic routing, so static routing is our only choice when using Next.js, making it opinionated too.

Conclusion

Amongst the four, for small to fairly complex projects, I'll always pick and advise picking Parcel.js.

If you're a beginner like I was then, just learning React.js, Create-React-App is awesome to use, it helps set everything up and takes care of everything for you under the hood. Then you can move on to Parcel.js as you get more experience.

For fairly complex projects and upwards, I'll say Gatsby vs Next.js has been a hot topic for that in the tech community for quite a while now. While both have many overlapping abilities, some few differences makes them distinct.

Picking the right framework is extremely important, we should consider all factors needed and with this guide make an awesome decision depending on your need.