What is React and why you need to use it as a UI Library for your application

By Monikatharaka R, a super intuitive JavaScript developer

What is React?

It is created by Jordan Walke. It is maintained by (Meta)Facebook. React is a front-end library that runs on a browser. React is a Library, not a Framework. It focuses on doing just one thing. But does that one thing really well. It is an Open Source Library used for building user interfaces. React has the capability of seamlessly integrating with any of our applications. It works according to the MVC (Model, View, Controller) architecture and updates all the things in the View part of the architecture. It plays the role of a view layer in applications.

Why do we need React?

React is used for building reusable user interfaces or UI components for web and mobile applications. There are several UI libraries. So why choose React as your preference? I will give you some of the reasons why can we choose React:

Easier Learning:

• One who knows and understands javascript can easily start using React. If you have a functional understanding of HTML, CSS and a basic understanding of programming concepts, you can quickly start working with React.
• It initially takes a lot of time to understand the React concepts and flow. But once you start understanding the basic concepts, you will be digging into advanced concepts whenever you have to use it.
• If you are shifting from another framework or library, it might take some time to get used to React’s innovative methods.

Faster rendering:

• React renders components on browsers faster than other UI libraries because it uses Virtual DOM for rendering. This improves the performance of the application. Let’s discuss this in detailed after this section.

Larger Community:

• It has a massive following of JavaScript developers who develop new solutions and tools regularly. A lot of user-developed applications have been included in the official library.
• Github, for example, has more than 182K followers in their family.

Testability:

• Many of React’s components are pure functions, automated testing doesn’t require mocking or subbing.
• React allows the ability to run unit tests with the help of the Jest library. There are 43 contributors and around 39k users.
• Single React components tested in isolation are reliable and deterministic because they are pure functions.
• SEO-friendly and Easy Debugging with chrome extension tools.

Why does React use Virtual DOM instead of Real DOM?

What is DOM?

DOM stands for Document Object Model. It is a programming interface that allows us to create, change, or remove elements from the document. We can also add events to these elements to make our page more dynamic. The DOM views an HTML document as a tree of nodes. A node represents an HTML element.

We can access these elements in the document and make changes to them using JavaScript.

Let’s say we have a website rendering some content but the data is fetched from an API service, after some time the data got updated from API. Here to update the page in the browser with the updated API data, we have to re-render the whole page which leads to Real DOM manipulation. This is very expensive, slows down our browser page, and takes some time to load the whole page again. Even if it is a smaller or bigger change, it will update the whole DOM tree of our browser.

To Overcome the above issue and to make faster page re-rendering on any updates that happened in the state, React uses Virtual DOM.

What is Virtual DOM and How does React use Virtual DOM?

Virtual DOM is a copy of Real DOM and it is stored in the browser’s memory. Virtual DOM has the same properties as that of the Real DOM, but it lacks the power to directly change the content of the screen.

Think of Virtual DOM as the blueprint of a machine, changes made to the blueprint don’t reflect on the machine itself.

The react-dom library makes Virtual DOM to be always synced with Real DOM. This syncing process is also known as Reconciliation.

How does Virtual DOM Works in React?

Whenever there are any changes to the data either in state or props of component, it creates another Virtual DOM. A Snapshot is taken before and after the changes happened in props or state of the Component. Now, the comparison between the previous and the updated Virtual DOM takes place. This checking takes place using the ‘Diffing Algorithm’ and it’s quite faster than checking with the actual DOM.

Thus whatever changes detected from the comparison of the two virtual DOM’s in the memory gets updated in the actual DOM directly. So with the comparison of two Virtual DOM’s, React comes to know which particular component needs to be updated or re-render. So instead of the re-rendering whole page or DOM tree manipulation, it helps in re-rendering the individual component where the changes have taken place. Hence, Virtual DOM is faster in comparison with Real DOM because it does not involve the complete render of the page.

Quick React Setup:

Nvm — Node version manager. As the name suggests, nvm allows you to run multiple versions of nodejs on your PC. Install nvm on your machine with the help of the below link.

step1: https://tecadmin.net/how-to-install-nvm-on-ubuntu-20-04

step 2: Navigate to particular folder where we need to create app: npx create-react-app my-app

(my-app represents the name of our app)

step 3: Navigate to newly created app :cd my-app

step 4: To run the application: npm start

Once completing the above steps, the browser will take you to the default home page. That’s it! your application is ready to go. Now you can start working on your project application.

How simply we can create react components:

Two types of Components :

1. Functional Component
2. Class Component

After Installing React App, just make some changes to the App.js in src folder as shown below for functional and class components ,

Simple Example for Functional Component:

The above edited file App.js will be automatically imported by index.js file in src folder and further index.js renders the component contents to index.html .

App.js — — → index.js — ->index.html

Simple Example for Class Component:

Hurrah! It feels like, I’m a react developer now 😆. That’s it, It is simple, straightforward and easy. To learn more on react and node, please find this awesome resource: https://fullstackopen.com/

Meet the team!

Author
Monikatharaka

Reviewer
Karthikeyan R

Editor
Mridula Saravanan

We at CaratLane are solving some of the most intriguing challenges to make our mark in the relatively uncharted omnichannel jewellery industry. If you are interested in tackling such obstacles, feel free to drop your updated resume/CV to careers@caratlane.com!