React 101

JavaScript: It is the programming language of the web. Since the dawn of the web,
developers are eager to provide increasingly better experiences for the end-user in
terms of interactivity, animations, effects, and stability. JavaScript made it all possible.
As it progressed, there were needs for some obvious reasons to introduce frameworks
and libraries, for faster development and better stability.

React is one such part of the ecosystem. React sells itself as A JavaScript library for
building user interfaces. But honestly, while being true to the statement, we think React
goes much beyond that. It could be made into a complete ecosystem, powering some of
the most complex web application systems, for example, Facebook.

We’ll be quickly going through the React basics and then taking up intermediate to
advanced topics, which would really give you the essence of React and eventually help
you to start writing your production-ready applications with React.

Very simply speaking, React is a User Interface (UI) library. Let’s break that down:

React, on its own says that it’s a library, which means that it does not try to ship
everything with it. Instead, you have the option to cherry-pick the things you want in
your project and can implement them.

React says that it is a UI library, that is used for building interfaces visible to the user.
What does that mean? In simple terms, it means creating and maintaining what the user
sees on the screen.

Structure
Structure
Introduction

Understanding React

Basic understanding of how React works as a UI library

Declarative versus imperative programming

Cheat-sheet for further React topics

Objectives
In this introductory chapter, we’ll be understanding what exactly is React doing and why
should one care. We’ll be seeing on the surface, how it works as a UI library and how
the declarative approach of React is so powerful in creating better UI systems.

Finally, we’ll want to get started with React programming, but would end the chapter
with some notes that might be handy to see as a JavaScript refresher.

React is component-based
React makes use of components. The ideology is simple - React says that instead of
coding everything at the same place (like we usually do while coding simple HTML
pages), break different (and usually independent) parts of the page into different
components. This increases the code maintainability by factors and allows developers
to have faster and clean codebases. We’ll have dedicated chapters on working with
components, as it is the crux of React.

React is declarative
We’ll focus mainly on two programming paradigms here -declarative programming and
imperative programming. Let’s start with a simple example.

When you write a code, you can specify:

What do you want to do?

How do you want to do?

If you specify both, you’re making use of the imperative programming practice. If you’re
just specifying what you want to do, then you’re using the declarative way of
programming. Here’s a simple example.

Consider that you want to draw a border around a box. In CSS, you’d simply say border:
2px solid black. This is declarative. You just said what you want to do, not how you want
to do. On the other hand, if you try to draw the border in vanilla JavaScript, you have to
specify four coordinates, and then draw the line manually using code. This would be an
imperative way.

Declarative programming has its own pros and cons, but the pros almost always
outweigh the cons:
Declarative code can make use of highly optimized algorithms. Since the how is
abstracted from the end-user, the imperative model under declarative code can make
use of seriously complex code to provide major performance boosts, while exposing an
easy declarative way for users to use the same functionality at the same time.

Declarative programming brings other benefits like code scalability, reduced bugs, and
more understandable code.

Coming back to React, it is declarative. This means that you just tell React what you
want to do, and not how you want to do it. React, under the hood, manages everything
for you in a very optimized way.

We will discuss on how the React virtual DOM, reconciliation and other optional
advanced stuff works under the hood, in detail, in the last chapter.

Quick JS revision
Before we dive into the React ecosystem, we’d like to put some quick JS things that you
should definitely be aware of, while working with React. Let’s take a quick look at this
section for now and come back later as you need.

this
this is surprisingly complicated for a lot of people in JavaScript. Keep in mind that in a
function, this always refers to how that function is called, except for arrow functions,
where this is lexically scoped:

function myName() {

return this.myname

const myNameButArrow = () =>console.log(this.myname)

const person1 = { myname: Mehul, myName }

const person2 = { myname: James, myName }

const person3 = { myname: Enzo, myName: myNameButArrow }

console.log(person1.myName())

console.log(person2.myName())

console.log(person3.myName())

The output is showcased in the following screenshot:

Figure 1.1: Output

Arrow functions
Arrow functions allow you to write smaller functions, lexical scoping to this, and cannot
be instantiated with a new keyword:

const obj = {

myFunction: function() {

return this

},

coolFunction: () => {

return this

console.log(obj.myFunction()) // logs the original obj

console.log(obj.coolFunction()) // logs window (global object)

Here we see the same preceding code with its output as showcased below. As stated
earlier, the first statement logs the original object, and the second statement logs the
whole window object:

Figure 1.2: Output

.map
.map allows you to manipulate an array without mutating the original array -that is, .map
works on every element in an array and returns to you a new array, consisting of the
elements you return from within the function passed in .map.

Here’s a quick example of how maps would work in this case:

const arr = [{

name: Mehul Mohan,

country: India

}, {

name: James Paul,

country: USA

}]

const component = arr.map(name =>arr.name)

console.log(component) // logs [Mehul Mohan, James Paul]

console.log(arr) // logs original object

The preceding code logs the changed array, as you would expect the map function to
do. This, however, does not modify the original array.

.reduce
.reduce allows you to reduce the array to a single value. This is achieved with an
accumulator, and the current value it is iterating over. Let’s look at an example to
understand:

x = [1,2,3,4,5]

x.reduce((acc, val) => acc + val, 0)

In the preceding example, reduce accepts a function thatis called every time with two
values: the accumulator, and the current value. Whatever you return from the function,
becomes the accumulator value for the next function call. Optionally, you can pass the
initial accumulator value as the second argument to the .reduce function. This, if not
present, would initialize the accumulator with the first element in the array, and would
start reducing the array from the second value.

Classes
Classes in ES6 is merely syntactic sugar for functions. JavaScript is not OOP. It follows
the prototypal inheritance model, and that’s what classes do as well. Although, the
proposed syntax makes it look very similar to OOP.

Here’s an example of ES6 class:

class ILoveNumbers {

constructor(num) {

this.anothernum = num

getNum() {

console.log(this.anothernum)

};

class IHateNumbers extends ILoveNumbers {

constructor(num) {

super(num**num)

this.num = num

}
getNum() {

console.log(this.num)

getNumFromParent() {

console.log(super.getNum())

};

let obj = new IHateNumbers(5)

obj.getNum() // 5

obj.getNumFromParent() // 3125

Some important points to note aboutthe preceding code:

Here we created a simple class called ILoveNumbers, which just stores a number.

We created another class,IHateNumbers, which extends from our previous

class. Extending in class-based syntax merely means that you’re adding the parent
class (function) to the prototypal chain of the current class (function).

We make use of a special keyword, called super. Using super, we can access the
parent class. Remember, when using super in a method, super refers to the prototype
chain of the object it was defined with. Thismeans, if I change the prototype chain of
IHateNumbers to something else, the super.getFav() should not work as expected.
Consider the following code:

class C1{ method() { return 1 } }

class C2 extends C1{ method() { return super.method() } }

class C3{ method() { return 3 } }

class C4 extends C3{ method() { return 4 } }

const obj = new C4

console.log(obj.method()) // outputs 4

C4.prototype.method = C2.prototype.method

console.log(obj.method()) // outputs 1

Here you can clearly see that super.method() does not call the method of C3., Instead,
it calls the method of C1. However, if you would have defined the method of C4 to
return super.method(), it would call the method of C3.

Closures
Closure is a fundamental concept implemented in JavaScript that is extremely powerful
and beautiful at the same time. To define closure in one line,:the function remembers.
We have a common understanding as a Computer Scientist that when functions return,
they remove all the local variable information associated with them. This is changed
when you use a closure. For example, consider the following piece of code:

function a() {

let value = 1

return () => value++

const func = a()

func() // 1

func() // 2

func() // 3

In the preceding function, we can see that although value is a local variable, it is not
destroyed when the execution of function a is completed. Instead, the function