React JS Introduction: What is React? the JavaScript Library

In this introduction, you will understand what React JS is and learn how to use NPM commands to get started with React, such as install and start.

React is a popular tool for building UIs (user interfaces) on the web. If you are new to web development, you may wonder what React is and how it can help you create better user experiences.

So, in the following section, you will understand what react is. Let’s get started.

Introduction to React.js Definition

A JavaScript Library React JS (also known as React) which is mostly used in front-end web development.

It makes designing interactive user interfaces more simple whereas page rendering with dynamic and data makes HTML elements quite easy. React, developed and maintained by the Facebook team lets you develop large web applications that can change data without reloading

At the core of React is its ability to divide complex user interfaces into small, reusable parts. That allows for more efficient and maintainable development.

React.js follows the declarative programming model, where developers describe what should happen with a user interface. And a conditional from React that deals with the rendering logic.

The main reason for this is a vDOM with React to keep track of the changes in your app’s state. So it can update only what needs updating and avoid expensive manipulation directly on the browser resulting in more performance.

Lots of people use and support React. It’s free and open for anyone to use. That means a lot of smart developers around the world help make it better.

Let’s take a brief look at the history.

History and Background

Jordan Walke, a software engineer at Facebook is the person who developed React JS first in 2011. It was developed due to the increasing complexity of Facebook’s dynamic user interfaces and traditional JavaScript frameworks couldn’t handle these frequent modifications, with framework inefficiency at processing data.

Initially, React.js originated at Facebook and was first used internally in its newsfeed before the realization of what it could be. The React library was open-sourced by 2013 when Facebook released it as a JSConf US conference. This made the wider developer community able to partake in developing new functions for this library it has gained popularity quickly due to its different way of thinking about UI development.

Over the years, React has evolved a lot and it receives many updates with various improvements. Such as new features like hooks — that allow functional components to manage state and side effects. Or even an internal rewrite of its core algorithm called Fiber which aims for more performant rendering.

Today it is one of the few and most popular libraries in Front-end development! It has been since used by individuals from all around the world to create some marvelous websites, not only that even leading Organizations like Facebook, Instagram Airbnb Netflix started using React which makes it a must-have tool for any web-developer right now.

In the following section, you will understand how the virtual dom works in React.js.

Understanding the Virtual DOM

The virtual dom is one of the most ingenious ideas that have made React super fast and powerful for developing dynamic user interfaces. That is one of the basic concepts React uses to optimize app performance—allowing developers to build very responsive applications, without worrying about it being slow or inefficient.

The Virtual DOM (VDOM) is simply an in-memory representation of actual DOM elements. It is a lightweight copy of the actual DOM, providing React the ability to do fast updates with minimal direct manipulation which can be slow and computationally expensive.

Here’s how the Virtual DOM works in the React.js application:

1. Initial Rendering.
2. Updating the UI.
3. Diffing Algorithm.
4. Reconciliation.
5. Batching Updates.

Let’s see each one of them in detail.

Initial Rendering

React will build a Virtual DOM tree when the component is first rendered. This is a representation in memory of the VDOM structure which has a form similar to real DOM. This VDOM is used by React.js to manage and track the changes in UI.

Updating the UI

As soon as some state or props get changed for a component then react re-render the components which generates a new Virtual DOM tree. React does not update the real DOM right away; instead, it compares the new Virtual DOM tree with the previous one and finds out what has changed. This operation is also known as “diffing”.

Diffing Algorithm

This is when two lists of elements are compared and the minimum number of operations required to adjust a list can be applied as mutations on an actual DOM. Virtual DOM will compare the elements in both Virtual DOM trees and identify which exact element has been changed, removed, or added.

Reconciliation

This is where react compares the virtual and real DOM to learn what has changed, so it can propagate the necessary updates without you telling it how or re-rendering everything all out. This process is called Reconciliation which makes UI to be updated efficiently and quickly.

Batching Updates

It batch updates together for optimized rendering performance. Instead of touching the real DOM for every single change that is made, React holds changes and updates a virtual DOM layer inside until at some points determined to make all updates in one-time batch mode reducing touching the visual DOM.

Another key concept in React is the use of JSX (JavaScript XML), which allows you to write HTML-like syntax directly in your JavaScript code. JSX is not required to use React, but it makes it easier to create and manage complex UIs.

Anyway, in the following section, you will learn how to write an application using React.js.

Write Your First App with React

To begin, it is necessary to install a recent version of node.js on your computer. To install it, follow the instructions on the official page.

Once installed, you can verify NPM and Node.js by using the command below.

# Verifying Node.js
node -v

# Verifying Node.js
npm -v

If everything is ok, you can start your first app with React.js. Simply run the command below and follow its instructions.

npx create-react-app [react folder name]

After executing this command, you will need to wait for a moment while the folder is being downloaded.

If you take a look at this image, you will be able to see the packages that will be installed in the node modules folder, such as:

• React
• React DOM
• React Scripts
• with many other 209 packages.

And there are some commands that you can use to run your React app.

When you open the project folder, you’ll find two files called “package-lock” and “package.json.” You’ll also see three folders, which are named as follows:

• The “node_modules” folder.
• The “src” folder contains jsx, CSS, and so many others
• the “public” folder displays the compiled file in public access.

These files are all about Webpack, a tool that helps you mix together JavaScript, CSS, and other files and put them into the public folder.

Right now, you don’t need to worry about what’s inside these files. We’ll go over what they do in our next lesson. Let’s concentrate on making your first React app instead.

Anyway, before getting started, you have to learn more about Node NPM.

Let’s start the React application with the following command:

npm run start

Once you run this React app through the previous NPM command, it will open the browser with this URL http://localhost:3000/.