ReactJS for Jobseekers: The Only Guide You Need to Learn React and Crack Interviews (English Edition)

CHAPTER 1

Introduction to Web Development

In this chapter, we are going to learn about the fundamental Web development concepts. So far, you must have used the ES5 version of JavaScript. When we start working with ReactJS, we will write a lot of modern JavaScript, which includes features from ES6 and newer versions. We will learn those concepts as well in this chapter. If you are strongly comfortable with the ES6 concepts then you can skip this chapter or just skim through it.

Structure

In this chapter, we will discuss the following topics:

Introduction to Web development

Frontend versus backend

Libraries/Frameworks for frontend and backend development

3-tier Web app architecture

Intro to ES6 for ReactJS

Objectives

After studying this chapter, you will be able to understand the difference between frontend and backend, the purpose of HTML, CSS, and JS in frontend development, how Web apps function behind the scenes, and basic ES6 features such as scoped variable creation, array functions, rest and spread operators, and destructuring.

Frontend versus backend

Let us start by understanding what you see versus what happens behind the scenes. The Web apps that you see loaded on your browser screen are called frontend apps. The Web apps which control what data to be loaded on the frontend apps are called backend apps. The space where all your data is stored is called a database.

Figure 1.1: 3-tier architecture

Let us understand it better with an example. Look at YouTube; when you open the homepage, it shows you a grid of videos, as shown here:

Figure 1.2: YouTube landing page

And every time you open the homepage, it shows different grids as follows:

Figure 1.3: YouTube landing page—after refresh

The grid and the video cards, basically the entire page that you see, are the frontend part. The videos to be shown to you on every page load is decided by another application, which is the backend application. I hope that clears the difference between frontend and backend applications.

At the core, we have three Web development technologies—HTML, CSS, and JavaScript. Just by learning these three, you can build any frontend application.

HTML is used to create the structure of a Webpage. Structure refers to all the elements that you see on a Webpage. For example, images, headings, buttons, links, and so on.

Figure 1.4: HTML layout with code

CSS is used for styling, formatting, and designing layouts on a Webpage. For example, the font size of the heading, background color of the page, aligning elements on the left and right side of the same row, all this, and much more can be achieved using CSS, as shown in the following figure:

Figure 1.5: CSS layout with code

JavaScript is used to add functionalities to our Web pages. It is used to:

Render HTML dynamically

Change CSS styles programmatically

Design beautiful animations

For example, consider the following figure showing a login popup on clicking the login button:

Figure 1.6: JavaScript layout with code

Now, the question arises, if we can create any Web app using these three, then why do we have frameworks and libraries such as ReactJS, AngularJS, VueJS, and so on. The simple or naive answer would be that these frameworks make building complex Web apps easy and fast. They save us time and effort by bringing a lot of core functionalities out of the box.

Some of the popular frontend frameworks and libraries include the following:

ReactJS

AngularJS

VueJS

Bootstrap

jQuery and many more

Some of the popular backend frameworks and libraries include the following:

ExpressJS

NextJS

MeteorJS

Django

ASP.NET, and many more

Another quick question, how do you decide which one to choose? Trust me this is one of the most debatable questions on any tech platform. I personally think that any frontend or backend application can be built using any of these applications, but not all will give you the same results. Every framework will have its pros and cons in terms of speed of project completion, learning curve, code maintenance, scalability, and so on. There is no one that fits all solution here. Based on the kind of application you are trying to build, you will have to choose the framework or library.

In this book, we are going to learn how to build fast and scalable single-page applications using a library called ReactJS.

Modern JavaScript for ReactJS

JavaScript has had many versions over the years, and ES6 is one of the JavaScript versions, as shown here:

Figure 1.7: ECMAScript versions

ECMAScript is the standardized name for JavaScript. It is a major enhancement to the JavaScript language and adds many more features intended to make large-scale software development easier. We will learn some of the most commonly used features released in ES6 and in newer versions. As you can see, ES6 was released in 2015, and ES6 refers to version six of the ECMAScript programming language.

Some of these features are as follows:

Block-scoped variable creation using let and const

Template strings

Arrow functions

Rest and spread operator

Destructuring

Array functions: map(), filter(), reduce(), find(), and findIndex()

Template strings

Classes

Promises, and much more.

Even today, a lot of features of ES6 and newer versions are not supported by all browsers. Some of these features might not work in your browser directly.

So, what do we do?

We can use a preprocessor like Babel. Babel is mainly used to convert ES6+ code into a backward-compatible version of JavaScript that can run on older browsers.

Let us check it out.

When we write some ES6 code, Babel converts it to an older version of JS, which is supported by the browser. Do not worry if you do not understand this ES6 code. We will learn all about it in this chapter.

ES6 Code:

const getFullName = (fName, lName) => fName + + lName

The preceding code is written using arrow functions provided by ES6. The function takes two arguments, "fName and lName" and returns the concatenated value.

ES5 code:

use strict;

var getFullName = function(fName, lName) {

return (fName + + lName)

}

Okay, so this is what Babel does. But how do we use it in our code??

Well, for practice, the easiest way is Codepen:

Let us give it a try. Follow the given steps:

Go to Codepen and create a new pen, as shown in the following figure. Alternatively, you can open the following URL in your browser: https://codepen.io/pen/

Figure 1.8: New pen on Codepen

Click on the Settings icon of the JavaScript section. It will open a popup where it gives options to configure your HTML, CSS, and JS code. Click on JS to open the JS config section, as shown here:

Figure 1.9: Pen settings on Codepen

Under JavaScript Preprocessor, there is a dropdown where you can select a preprocessor for your JS code. In that dropdown, you can select Babel. Click on "Save & Close", as shown here:

Figure 1.10: JavaScript setting on Codepen

Now, if you notice right next to JS, Babel is written in the brackets, which shows that Codepen is using Babel to compile your JavaScript code:

Figure 1.11: Verify preprocessor as Babel

Now, one thing to remember, sometimes Codepen’s console misses errors. It would not show you any error even though the code throws an error. These errors are logged in your browser’s console, so it is recommended to use the browser’s console to check errors at least until we learn a way to use Babel in ReactJS applications.

In the next section, we will learn about all these features, along with some other features that we will use very frequently while building ReactJS applications.

Creating variables using let and const

ES6 introduced two new ways to create variables. The first one is "let"; this is kind of like a replacement for var. To create a variable, you can simply do something like this.

let mName = John;

let mSum = 100;

The second way is const. It is used to create constants, which means that the variables created using const cannot be updated later in the code. For example,

const API_URL = https://api.test.com/v1/

You can use let and const to create variables that hold all the data types provided by JavaScript. Let us give them a try:

let num1 = 10;

let num2 = Hello Modern JavaScript

let isOldEnough = false;

let marks = [9, 8, 9.5, 8.5, 10]

let blogData = {

title: ‘Title 1’,

description: ‘Lorem ipsum dolor’

}

Similarly, let us try creating variables using constants.

const num1 = 10;

num1 = 20;

console.log(num1);

The preceding code will give us an error (as shown here) because we are trying to update the value of a constant:

Figure 1.12: Updation error on const

So, what is the benefit of creating variables using let and const?

There are two benefits. First, the variables created using let and const are block-scoped. Block scoped means that the variables are scoped inside a code block. For example, a variable created inside an if-else will be scoped inside that block, as shown in the following figure:

Figure 1.13: Block-scoped variables

As you can see in the preceding console, we could access and print the value of the variable "result inside the if-condition. Outside the if-condition, it throws an error because it cannot access the variable result".

Second, they do not support hoisting. This saves us from a lot of unexpected issues, as shown here:

Figure 1.14: Hoisting error using let and const

Hope this gave you a better understanding of variable creation using let and const.

Templates strings

It is a string that allows embedding expressions inside it. To create a template string, you do not use single or double quotes; you use a backtick, and the JavaScript expressions are wrapped inside ${}. For example,

let name = John;

const mGreetings = `Hello ${name}`; //Here name is a variable

console.log(mGreetings); //This will print Hello John

We can even call functions inside this template string. We can also write more complex expressions. Say we wanted to create this string rgba(randomNum(), randomNum(), and randomNum()). It is very cumbersome to create this using concatenation, but with Template Strings, it is a breeze.

Example without template strings:

let rgbStr = rgb( + Math.floor(Math.random() * 255) + , + Math.floor(Math.random() * 255) + , + Math.floor(Math.random() * 255) + );

console.log(rgbStr);

Example with template strings:

let rgbStr = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`;

console.log(rgbStr);

Open the following link to try a working example:

https://codepen.io/qaifikhan/pen/XWgEoay?editors=0012

Arrow functions

ES6 gives us a new syntax for defining functions using a fat arrow (=>). Arrow functions bring a lot of clarity and code reduction.

Using function keyword:

function greetings(name) {

return(`Welcome ${name}`);

}

Using Arrow functions:

const greetings = (name) => {

return(`Welcome ${name}`)

}

As you can see, we do not need the function keyword to define functions anymore. This is one way of writing arrow functions. Let us try other variations as well.

Function without arguments:

const getLikeCount = () => {

//Function Body

}

Function with multiple arguments:

const getSum = (num1, num2, num3) => {

return (num1 + num2 + num3)

}

Function with a single argument:

const greetings = name => {

return(`Welcome ${name}`)

}

Similarly, if your function just has one line of code, then you can even skip the curly brackets.

const greetings = name => `Welcome ${name}`

Rest property

So far, we do not know a way to pass a dynamic number of arguments to a function. We always have to specify the number of arguments required by a function. If we pass less, then they are set as undefined. If we pass more arguments, then those extra arguments are simply ignored.

ES9 solved this problem by introducing the Rest property. It is represented by three dots.

Syntax:

const mFunc = (…args) => {

//Function body

}

To access different arguments, you can treat args as an array. The first argument will be accessed as args[0], the second will be accessed as args[1], the third will be accessed as args[2], and so on.

For example,

The following function will return the sum of all the numbers you pass to it:

Figure 1.15: Dynamic arguments using the Rest

Now, just one thing to remember, this rest operator should be the last argument if your function has some named arguments as well. For example,

const getDetails = (firstName, lastName, age, …marks) => {

//Function Body

}

If you add the Rest operator at a position other than the last, then you will get unexpected results from your code.

Open the following link to try a working example:

https://codepen.io/qaifikhan/pen/gORJrzX?editors=0012

Spread property

The spread property allows arrays to be expanded into elements and objects into key-value pairs. This helps to create shallow copies of arrays and objects. It is also represented by three dots.

Let us try an example to understand it better. Say you have to make a copy of an array, as shown in the following figure:

Figure 1.16: Array copy without Spread

The preceding method does not really copy the values from mArr to mArrCopy. It only copies the reference of mArr, which means if you make any changes in mArrCopy, then it will also make the same change in mArr because they are basically the same array.

Now, let us use the same example using the spread property. When you do let mArrCopy = […mArr] it basically copies all the elements from the mArr and stores them in the new array you created for mArrCopy. Notice it is not copying the reference of mArr to mArrCopy instead, it is copying all the values. If you make any changes in mArrCopy it will not be reflected in mArr because both are different arrays with the same elements.

Figure 1.17: Array copy with spread

Open the following link to try a working example:

https://codepen.io/qaifikhan/pen/RwgmpeP

We can also use the spread property to concatenate multiple arrays. For example,

const mArr1 = [1, 2, 3];

const mArr2 = [4, 5, 6];

const concatenatedArr = […mArr1, …mArr2];

Spread property can also be used to add new elements at the start or end. For example, you want to add 1 at the start and 5 at the end of the following array:

let mArr1 = [2, 3, 4];

mArr1 = [1, …mArr1, 5]

console.log(mArr1);

You can perform all these actions on objects as well. For example, to create a copy of an object, you can simply try the following code:

let mObj = {

fName: John,

lName: Lark

}

let mObjCopy = {…mObj}

Destructuring

Destructuring allows us to "unpack" arrays or objects into a bunch of variables. It makes working with arrays and objects a bit more convenient.

Syntax:

let [a, b] = mArr;

let {name, age} = mObj;

Here, a and b are variables that hold the first and second values of the array mArr. The name and age are variables holding values from the keys name and age from the object mObj.

Let us give it a try to understand it better:

Figure 1.18: Destructuring arrays

The name of the variables can be anything