Reasons to Choose React as a UI Library for your application
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:
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.
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.
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.
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 :
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/
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 email@example.com!