The modern Frontend
Up until now.
The modern Frontend landscape has come miles in terms of frameworks and now it is exceedingly simple to abstract out the lower level components of the DOM, leave out that kind of heavy lifting to the many libraries and frameworks and concentrate only on the core functionality of the frontend.
Or so I have heard.
I would not know for sure until I go in deep and get my hands dirty. So, I start this series with the agenda to break out ReactJS, attempt to develop a functional app and find out exactly what has changed on the Frontend scene in these past years.
Its popular, for one. Substantially so, as per Google Trends. Google's own Angular (previously known as AngularJS) used to hold the top spot for a long time until being dethroned by the new ruler of the Frontend: long enough to catch my eye.
I began exploring Angular(JS at that time) but soon found it either boring or not developer friendly enough. Or may be, not enough people were doing it then, for me to get the required support. And ReactJS is supposed to be easier to work with.
Two reasons are good enough to start with, yes?
Once you have it installed, you can type in
node -v in the terminal to verify the installation.
$ node -v
A package manager. Similar to Python's PyPI. A bit longer installation though.
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - $ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list $ sudo apt update && sudo apt install yarn -y $ yarn -v
You should see the version of
React Developer Tools
This is a Google Chrome browser extension. This is supposed to make inspecting React components and debugging them easier. Let's give it a try.
Here's the link
That's pretty much it.
We will be using the Create React App to get up and running. This will take care of Babel, webpack and ESLint setup and configuration for us so we don't have to.
If you are like me and more often than not find yourself fighting off the urge to dive depth-first into whatever you just saw, heard, touched, felt or just in any way experienced, you are probably wondering what these three things are.
You are in good company.
- Babel: Since JS has grown by leaps and bounds since the time I last saw it, many new features have been introduced. Babel will compile your modern JS code down to what browsers in different environments will understand. Much like a compatibility layer.
Described as a "static module bundler", this will generate "assets" bundles for your app. Think of the individual JS and CSS files you needed to add to the
<head>element. Those days are past.
- ESLint: Just a linter.
$ npx create-react-app react-gallery-app
npx is described as a "npm package runner". It will execute commands either from a local
node_modules/bin dir or from a central cache. Any packages need in order for the command to run will be installed.
So, we are actually executing the
It might take a couple of minutes, depending on your internet speed and whether you have a HDD or SSD, but this is what you will be greeted with.
Personally, I like the cheerful touch. Yes, we are creating a gallery app.
$ cd react-gallery-app $ yarn start
Ah, lovely! A browser window must've launched as well.
Let's take it up on the offer and "Edit src/App.js and save to reload."
We'll load up the
react-gallery-app directory in Visual Studio Code which happens to be my code editor of choice.
Let's add another
<p> tag with some content and save the file. The server should hot-reload.
If the page does not update, ensure that you didn't exit the server running in the terminal. Start it up again with
yarn start if you did.
So far, so good. We have discussed frontend frameworks, considered that they might have gotten better to use now, decided to try ReactJS, installed its dependencies, built a starter template app and run it successfully!
Take it all in.
When you are done, click here to get to the next post in this series, where we discuss
Components in ReactJS.