A quick insight into React

Athraja Vibhu Jayawardane
3 min readMay 14, 2022

1. What is React?

React.js was released by a software engineer named Jordane Walke who is working for Facebook in 2011. React.js is a JavaScript library dedicated to creating declarative user interfaces using a component-based concept. It is used for handling the view layer and can be used for web and mobile applications. React.js and its main goal are to be vast, rapid, asserting, adaptable, and straightforward.

React can be described as a library rather than a framework. This explains why React only deals with rendering UIs and reserves many things at the discretion of individual projects. The standard set of tools for creating an application using React.js is frequently called the stack.

Many powerful and popular web applications like Facebook, Netflix, Salesforce, Dropbox, and other widely used web applications use React.js for powering their web applications.

2. What are the key features of React?

JSX React.js — JSX is a Javascript syntax extension that can be used to code HTML or XML-like text code alongside React.js. This additional text can co-exist within the React.js code and can be processed properly by the React library. Web developers do not need to use JSX when working with React.js, but many follow the technique because of the flexibility it can offer projects.

Reusable Components — React.js code contains multiple components. Each React.js component has its controls and logic that are particular to the component. Components can be reused or even rearranged in other parts of the code to meet certain requirements and help maintain the order of the code, especially during larger projects that necessitate a lot of scripts.

Virtual DOM — DOM (Document Object Model) manipulation is essential for modern, collaborative web effects. Web applications structure their elements in DOM trees which are established to help scripts access the different elements of a webpage. Traditional DOM manipulation involved entire elements and DOM components to be re-arranged every time a manipulation occurred. A virtual DOM only re-renders the actual components that were manipulated. React.js uses a virtual DOM to enhance memory and effectiveness.

3. Why use React?

A Virtual DOM is a representation of a real DOM that is built and manipulated by browsers. Advanced libraries, such as React, generate a tree of elements in memory equivalent to the real DOM, which forms the virtual DOM in a declarative way. The virtual DOM is one of the features that make the library so fast and reliable.

React permits developers to use individual parts of their application on both the client and server sides, and any changes they make will not affect the application’s logic. This makes the development process extremely fast.

Components Support — Using HTML tags and JS codes make it easy to work with a massive dataset including DOM. React acts as an intermediary that represents the DOM and helps you decide which component needs changes to get precise results.

SEO Friendly — A frequent problem criticized by most developers is that traditional JavaScript frameworks often have problems with SEO. React.js solves this problem by assisting developers to navigate various search engines easily through the fact that the React.js application can run on the server, and the virtual DOM renders and returns it to the browser as a web page.

Convenient use — React.js is extremely user-friendly and makes any UI interactive. It also allows you to build applications quickly and efficiently, which is economical for clients and developers alike.

Data Binding — Single-way data binding indicates that anyone can trace all the changes that have been made to a segment of the data. This is also one of the reasons that make React so effortless.

4. Drawbacks

Many tools and libraries can enhance the performance of React. Even React itself is updated frequently. Unfortunately, that comes with a downside. Due to the number of updates and new releases, there’s simply not enough time for writing complete documentation. Developers are left with only sparse text guides that don’t cover the details.

This one seems to be an upside rather than a downside, but it may still be apparent as something negative. The reason is that the library is continuously changing, resulting in developers being annoyed by the need for continuous relearning of processes or new mechanics.

--

--