1 - What is React?

The basic definition of React is:

React is a free and open-source front-end JavaScript library for building user interfaces based on components.

A very simple definition that describes React perfectly in a line. React is a framework for building user interfaces, just like the other popular frameworks like jQuery, Svelte, Vue.js, etc. React is a UI framework like jQuery, but is very different from jQuery. In fact, the style of programming in React world is totally opposite of the style of programming in vanilla JS or jQuery world. React follows the declarative programming paradigm, while others are imperative (we'll cover this very soon).

React was created by Jordan Walke, a software engineer at Meta, who released an early prototype of React called "FaxJS". He was influenced by XHP, an HTML component library for PHP. It was first deployed on Facebook's News Feed in 2011 and later on Instagram in 2012. It was open-sourced at JSConf US in May 2013. By 2015, React got into a stable state. Since 2016, React started attracting serious production applications.

React is developed and maintained by Facebook (now called Meta). Since open sourcing the technology, Facebook developers and a community of individual developers and companies maintain it now.

Before moving on, let's start with the difference between declarative and imperative programming.

Declarative vs Imperative programming

Imperative programming

In computer science, imperative programming is a programming paradigm of software that uses statements that change a program's state. Imperative programming focuses on describing how a program operates step by step, rather than on high-level descriptions of its expected results. (credit: Wiki).

In simple words, imperative programming is about doing things myself. I'll write the exact code to get a task done. Here is an example of setting a value for an input box:

document.getElementById("input-name").val("Mayank C")

What is the purpose of the above line? The purpose or intention in the above line is to set 'Mayank C' into an input field called input-name on the current page. Along with the intention, we're also providing instructions on how to do it. This is called imperative programming. You might always been doing imperative programming, but may not have realized that it is called imperative programming.

The following diagram helps understand it better:

The what (intent) part is highlighted in orange. This is what we want to get done. The how (steps) part is highlighted in red. This is how we want to get it done. Isn't this how we've always been programming things? It is tough to visualize that we can simply tell what to do, but not how to do. The task gets done magically. Doesn't sound right? Isn't it? This is exactly where React shines.

Declarative programming

In contrast to imperative programming, in computer science, declarative programming is a programming paradigm—a style of building the structure and elements of computer programs—that expresses the logic of a computation without describing its control flow. Many languages that apply this style attempt to minimize or eliminate side effects by describing what the program must accomplish in terms of the problem domain, rather than describing how to accomplish it as a sequence of the programming language primitives (the how part being left up to the language's implementation). This is in contrast with imperative programming, which implements algorithms in explicit steps. (Credit: Wiki)

In simple words, declarative programming is about telling the intention, but not the steps. The programming language will figure out a way to carry out the intentions. React is a good example of declarative programming. Other examples are - SQL, PROLOG, LISP.

Although it is too early to get into React coding, we'll still use a very simple example to demonstrate the principle behind declarative programming. The same code that we have written in imperative programming can be written in declarative programming quite easily. It's just that, the style of doing things in declarative programming might not be comfortable for some. But don't worry. It'll become a second nature very soon. And once it becomes second nature, you may not want to go back.

The following diagram shows some idea behind the declarative programming in React (again, don't worry too much about code at this point).

Without worrying too much about the React coding style, we can see that there is no 'how' part here. Nothing is highlighted in red. We convey that the variable name is associated with the input field. Whenever name is changed (using setName), the input field gets updated automatically. The 'what' part is clearly visible. The 'how' part is completely missing. We didn't try to set the new value into the input field. All we did was to update the associated variable and the field gets updated magically. This is exactly how declarative programming works.

Virtual DOM

React uses a key concept called virtual DOM, where an ideal or virtual representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. The idea of virtual DOM makes React declarative. Instead of working directly with 'real' DOM, users work with virtual DOM. You tell React what state you want the UI to be in, and it makes sure the 'real' DOM matches that state. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app.

In other words, the virtual DOM provides a mechanism that abstracts manual DOM manipulations (like $('#some-class').val() or document.getElementById("some-class").value) away from the developer, helping us to write more predictable code. It does so by comparing two parallel trees to determine exactly what has changed, only updating what is necessary on the actual DOM.

This is the fundamental reason why we don't have to specify the 'how' part of the equation. The following diagram helps understand the concept in a different way (don't worry about the word, states):

As an application developer, we work only with React APIs (aka virtual DOM). In React world, we never make changes into the real DOM directly. If we do that, we have broken the concept of declarative programming. The main reason is that working with real DOM requires us to specify the 'how' part, which is against the idea of declarative programming. But nobody can stop you from doing that. There might be some corner cases when you need to work with DOM directly.

Benefits of React

There is a reason why React is a popular choice for developing frontends. Here are some of the key reasons that make React so popular:

JSX

React uses a syntax extension called JSX. This makes using HTML markup within the library much easier. JSX's writing shortcuts allow us to make code simpler and cleaner, converting your HTML mockups into Real components. React is unimaginable without JSX. We'll learn JSX in a separate section.

Components

React encourages modular design. React uses a component-based architecture that allows developers to create reusable components for the user interface. This makes it easier to write, maintain, and scale applications. React doesn't recommend using a single HTML that contains everything present on that page. You can still do that in React, but that defeats one of the core design concepts of React.

Virtual DOM

We've already seen the advantages of using virtual DOM. With React, there is no need to learn & work with real DOM. This makes code very clean and easy to maintain. This also takes out the 'how' part of the equation.

Localized

React basically allows developers to utilize individual parts of their application on both the client-side and the server-side, which ultimately boosts the speed of the development process. In simple terms, different developers can write individual parts and all changes made won’t cause the logic of the application.

SEO optimized

Using React can help to make our site SEO-friendly with the help of server-side rendering, dynamic rendering, and meta tags.

Performance

React was designed to provide high performance in mind. The core of the framework offers a virtual DOM program and server-side rendering, which makes complex apps run extremely fast.

Easy to learn & use

Now, this might be debatable. Some say that React has a sharp learning curve. It is not exactly as easy as moving from vanilla JS to jQuery, for example. The concepts behind vanilla JS and jQuery are the same, therefore movement doesn't feel much. React, on the other hand, is a different world. It is well known that React needs a bit of initial learning curve. However, once you learn React and use it in a couple of projects, you'll find it much easier to use than vanilla JS or jQuery. You'll write more maintainable code. React is very good for complicated apps.

--

That's all about the introduction to React. In the next section, we'll look at some numbers about the tremendous popularity of React.