Introduction With React

What Is React?

React is an open source, front-end library that is purely built on JavaScript which focuses on User Interface. By User-interface we mean that it focuses only on the view layer of the application.

As a developer, you can create different views for your application and React will modify just the right view when your data changes. This in turn will make your application much more efficient and reliable.

Okay. Who Developed it?

Many of us scroll through Facebook feeds when bored, while doing this we see that fresh contents get populated as we keep scrolling down without the need of refreshing the page. This is done with react and it was developed by Facebook.

How Does it work?

The working of react applications is what that differentiates it from the rest.

When a web page is loaded, the browser creates a Document Object Model of the page which is basically a tree of objects. It defines the logical structure of documents and the way to accessing/modifying it.

Updating the DOM on a regular basis might affect the performance which in turn will slow down the application.

So, Is the DOM Slow?

No. DOM is fast, but what makes it slow is that every time the DOM changes, browser need to recalculate the CSS, do layout, and repaint the web page. This is when react introduced Virtual DOM.

How does Virtual DOM work then?

  • Each time when the data changes in the react application, a new virtual DOM representation of the UI (User Interface) is created.
  • The difference between previous Virtual DOM representation and the new one will be calculated.
  • The actual DOM will be updated with what has actually changed.

Now that we know how React applications works, we’ll discuss some of its unique features, how and where to use it.

Features of React:

  • JSX
  • Component Based
  • Ideal Mobile Application Development

JSX:

JSX stands for JavaScript XML which is JavaScript + XML. This means HTML can co-exist with JavaScript code.

Component Based:

Everything in React is component based. The entire application is divided into components. Each component has its own view (UI) to support the application. This makes it easier for developers in creating/editing a component.

Ideal for Mobile App Development:

 React JS uses the same design patterns when building a web/mobile application. This integration enables you to create native apps that is supported by IOS and android platforms.

Conclusion:

Apart from these features, Using react will improve your application’s performance and efficiency. Component based approach allows you to develop new features without the need to rewrite the code.

If you are dealing with real-time data, then reactJs is the ideal choice, and can make your application even faster if you take advantage of its immutable data structures. We’ll discuss about this in my next blog.

Author Profile

Vidhya Vaidhiyanathan
Vidhya Vaidhyanathan is a React Developer who works with SharePoint Designs to help you build your organization’s intranet and Customizing SharePoint. Vidhya is inspired in learning React to create a clean application which is adaptable for the end user. In addition to this, she is also familiar with SharePoint Framework to enhance your SharePoint experience. When she isn't is working, you can find her enjoying her day with pets and gardening.

Add a Comment

Your email address will not be published. Required fields are marked *