Learning ReactJS while brushing up my Javascript knowledge (& fighting with command line & other tools) in 2021 — Prologue
I kick-started my 2021 with different mindset as I have written in my first blog. One of things I have planned to achieve this year is to learn ReactJS. Wasting no time, after finishing with my first blog, I went straight ahead to Udemy and continued with my long overdue ReactJS course that I purchased.
Reviving my memories on ReactJS
I had my hands on first react “not-project” project back in 2015 with my determining mind that I would want to transition the website of the company I worked for at the time, from Wordpress to run completely with ReactJS (and NoSQL database) — thinking it would be THAT easy like how people told me. Little did I know that transitioning from PHP based website which was developed with jQuery to power frontend to Vanilla Javascript based framework that would call JSON data via API, would not be done by snapping of fingers. Of course, I gave up. Luckily, I did not over-boast to my boss that I would want to do it.
Fast forward the time to 2017, I wanted to get my hands on ReactJS again (since a lot of company seemed to love developers who know ReactJS), I decided to purchase a course on Udemy by Andrew Mead. The course is The Complete React Developer Course. Without a doubt, I gave up after first lesson due to the complications I faced when I set up the environment — there were so many errors and I had personal fear of command line. It was pretty disheartening to be honest because I couldn’t even make it past the first lesson. The best thing to do was to just ignore that it ever happened.
Command Line and Package managers — the “not-a-boss” boss fight in a game
First thing that came to my mind was the fear of the command line and the mind-boggling errors that I would have to face while setting up the environment.
Those problems still happened.
Node.js on my Mac was too outdated and I had to update it. Somehow the error showed up while installing it but I knew if I gave up, I will have to come back in 2023 and repeat this crazy time again. I decided to pause the video and went on the developer treasure portal — stackoverflow.com to find out what was going on instead of asking directly to Andrew in the course because I wanted an instant solution.
Turned out all I had to do was to use a simple command “sudo” to elevate the privilege on my machine.
That problem was finally gone as I continued with the course. And as expected, there was another difficulty that I faced.
In the course, Andrew used Yarn as package manager and in order to be able to catch up everything he taught, I had to install Yarn.
Yarn wouldn’t install without Brew package manager. I know, to some, this may sound absurd but imagine an old-schooled developer, who didn’t have to deal with all of these before, had to go through this. I was on the verge of emotional break-down.
Thanks to my persistency, I finally overcame that adversity. Everything was setup — npm, yarn, brew and whatever that had to be installed.
Gasping over ES6, JSX, Babel and live-server
As I continue to start coding the project, I have come to realize why everyone wants ReactJS (and VueJS or AngularJs) developers. You can’t really start a ReactJS project in peace without knowing ES6 syntax, what babel is and does, and how live-server is used to run your project (I found out later that live-server is completely optional).
I would say Andrew is such an amazing teacher. With his comprehensive and straight-to-the-point explanation, I finally understood this modern Javascript development.
Hello ES6!
Getting myself into ES6 syntax at the beginning was like exploring the new world. Coming from jQuery.(document).ready(function() {}); to a simple arrow function made me question myself, “Why did I not think about this before?! it is much easier!” I got to say that currently I only know the surface of ES6 but I start to have fun.
JSX — WOW!
In order to be able to develop a ReactJS project conveniently and efficiently, I have to know what JSX is. JSX is used in ReactJS and isn’t a traditional Javascript I knew. It was a Javascript that you could write HTML code into it — a magic to be honest. As I learned JSX, I was also introduced to Expression which is in the form of {somethingInHere()} that could be written inside JSX to call or refer to Javascript functions (and more). Now that’s neat.
Babel — Jesus take the wheel!
But JSX isn’t understood by web browsers which is why we need a translator (or technically called compiler) — Babel. I am pretty sure there are tons of compilers that could be alternative to Babel but with all of the above new knowledge that I learned — I would stick with just Babel for now.
With Babel you have to install presets, plugins and tools in order for it to work accordingly.
What happened?
In the course, which was created in 2016 I believe, Andrew utilized old presets for React and ENV. It was simply called preset-react and preset-env which is not the case anymore in 2021. Now you can guess it, I could not run the code. Not only did I not know that the presets were outdated, I also got confused with things like package.json which gave me “devDependencies” and “Dependencies” — it is not what it looked like in the course! Oh and Babel CLI and Babel Core did not work… because I installed the wrong version.
Stackoverflow helped me out — this time it took me over an hour to figure out about it. I learned that devDependencies keep dependencies that are used only during development process and regular Dependencies keep production dependencies. But how do I know which one is devDependencies and Dependencies??
Thanks to Babel documentation that told me, “Look, this dependency is supposed to be used in development environment. I had specified in the installation guide”
npm install — save-dev DEPENDENCY-NAME
That was such a roller coaster ride.
Live-server —That was okay I guess.
The last thing I had to setup was live-server so that I could view my project on web browser seamlessly.
The installation wasn’t too difficult but I had to make changes to package.json so that node.js would understand what I want to do when I run a command in my terminal.
Which brings me to the fight with configuration with babel and live-server.
Apparently, you have to tell Babel where the uncompiled code is and which file it should compile the code at. I was confused at first but finally got over it. And once the code is compiled, I have to tell live-server to run and go to the directory where the compiled code is. And in order to make sure the browser automatically reloads, I have to add “ — watch” flag.
It went smooth without any problem. I was HAPPY!
Conclusion
It was actually such an interesting start. The problem-solving as I progress with the development isn’t something new, especially as a developer. The uncharted territory that I had to step feet into was scary at first and once I overcame the difficulties, I learned and became proud of myself.
I am pretty sure there were things that could be done with better and easier ways. There are things that are still wrong — my devDependencies is still a mess. But hey! look at what I learned in just one day — node.js, yarn, brew, ES6, JSX, Babel, Expression, dependencies, live-server and a lot of jargons that would blow my mind back in 2015.
This is just a prologue, I definitely believe that there will be a lot more difficulties that I have to face during my newly learned skill(s) but I am so ready for it.
Stay tuned!
