Hey! I'm on a mission to make 100 React.js projects ending March 8th. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!
Link to today's deployed app: Link
Link to the repo: github
I am beginning a new React tutorial on Udemy by Daniel Arzuaga titled "React + Firebase for Beginners". I've built a bunch of products at this point with these two technologies but sometimes it's nice to do a comprehensive refresher course so you remember why everything goes the way it does. Sadly, because web technology moves so fast, this excellent tutorial created in 2018 is already somewhat outdated. Many of the packages we use in the setup are deprecated or changed, and it's fair to say that using Parcel instead of Create-React-App "because you want to get started quickly" is probably not a good reason anymore.
However, Parcel is a great little alternative to Webpack. It's lightweight to download and for the browser to load. Just anecdotally it seems to boot up almost instantly whereas CRA projects take forever. So I followed the tutorial setup as far as I could, before branching out to update his recommended setup to what is encouraged today. I'll quickly tell you what is in this starter. Feel free to clone it and use it! It's up to date as of late January 2021.
Parcel
Parcel is an alternative to Webpack, so you already know it's sensitive because it will need to bundle our JS files together for use in another, not-yet-created folder to be able to render properly in browsers. That also means it's at the mercy of the packages it relies on which are always showing warnings in the terminal. Rather than use my instructor's setup, when I saw that it wasn't working I did a quick Google search which turned up my old favorite React instructor, Bob Ziroll.
His tutorial takes you through a more up-to-date setup of Parcel for React and even gets you going with your first line of JSX. I was happy to find it as following these short instructions were simpler, involved installing fewer dependencies and ultimately built properly. Without this I might have abandoned the Parcel setup entirely. Follow it if you want to live.
Hot Reload
If you've used CRA before you likely know that there is a hot reload feature that rebuilds the application in the build folder whenever the user saves a new change to the application (at least by default). Well with Parcel, because being lightweight is prioritized, there is no such feature. My tutorial's instructor recommended an NPM package called react-hot-loader. Unfortunately as of 2020, right on the front page for this npm package, the authors say it is no longer maintained and shouldn't be used. They said to use react-refresh instead.
React-refresh is a package maintained by the Facebook team that maintains React itself. Apparently it isn't intended for consumer use because there aren't many instructions around for it, but rest assured the Parcel team built in support for it last year, so all you need to do to get hot reload in your Parcel project the same way you do in CRA is install react-refresh. It really works like a charm, and seems to actually have fewer build errors than my CRA apps with hot reload.
Finishing Touches
You couldn't have a CRA competitor without a fun animation so I used Lottie to include a floating Parcel svg to match the theme of the Parcel website. I also probably went overboard and created a custom favicon of a similar open parcel box with a React icon behind it. Can you see it?
Lastly, I gave the body of the project the same color as the CRA theme for familiarity and endowed the text of the document with my favorite native CSS color- 🌈gainsboro🌈.
Feel free to download the package and mess around with it yourself! Even contribute to the Github if you like. Breaking changes welcome.
Top comments (0)