React JS is an open-source javascript front-end library from Facebook to build user interfaces for websites. Jordan Walke a software engineer from Facebook initially developed React and they used it for Facebook’s news feed in 2011 and on Instagram in 2012.
Why React JS?
ReactJS is the ‘V’ in MVC design pattern, ReactJS is a component-based front-end library to build View layer of the Web Application. ReactJS allows building large web applications with real-time data changes without reloading the page.
For a Practical Example,
Facebook uses ReactJs in their news feed, When you like a post on Facebook and you’re on the comment section you can see the live changes in the like count without reloading the page. This is the power of RactJS.
The main purpose of RactJS is to be simple, declarative, flexible and scalable, because of these qualities ReactJS is becoming the standard for front-end development. Many developers prefer ReactJs specifically for Single-Page Applications.
What are Single-Page Apps(SPAs)?
In the current era of web development, websites are referred to as web apps, web apps tend to be dynamic and interactive, allowing users to perform the action and receive the response of action seamlessly.
Traditionally, websites are powered by server-side rendering, the browser receives HTML from server and renders it. When the user navigates to next page URL, a full page refresh is required and HTML is loaded from the server again.
In modern SPAs, client-side rendering is used. When the browser loads the initial page, the scripts(framework, app code, stylesheet) to the entire application is loaded along with it. When user navigates to other pages, server page refresh is not triggered. URL of the page is updated with HTML5 API. A JSON data required is loaded from the server. The SPA then renders the page with data and javascript which is already downloaded during initial loading.
Key Features of ReactJS
1. JSX
HTML Documents are at the heart of any basic websites. Web browsers read this HTML documents and display them on your Desktop, Phones or Tablets as web pages. During this process, web browsers create something called DOM(Document Object Model), a representation hierarchical tree of how the webpage is arranged. Later, Developers can add dynamic contents to their webpage by modifying the DOM using languages like javascript.
React uses JSX(short for Javascript extension) instead of regular Javascript. JSX makes it easy for the developer to edit their DOM by using simple HTML-styled code. ReactJS and JSX extend support to all modern browsers you might be working with.
Using JSX leads to significant improvement in site performance and development efficiency.
2. Virtual DOM
If you’re not using JSX for your website, then the website will use HTML for modifying the DOM(this process makes thing change without the user manually having to refresh the page). This approach works for smaller or static websites but with complex and dynamic websites with lots of user interaction, it will be a problem(Since the entire DOM has to reload whenever the user clicks anything on the page).
However, if the developer uses ReactJs(JSX) to update and manipulate its DOM, ReactJS creates something called Virtual DOM is a copy of it’s original DOM and ReactJS uses this DOM to see which part of the actual DOM need to be changed when the user event happens.
Let’s say on a blog post user adds a comment, without using ReactJS the whole DOM has to be reloaded to reflect the new change. On the other hand, using ReactJS- Virtual DOM will have the track of what new change had happened and only that part needs to be updated in actual DOM.
ReactJS is well accepted by leading companies like Apple, Netflix, Paypal and other thousands of companies using to enhance their web apps. It is doubtless efficient, advanced, responsive. The unique features of this library to tackle the large scale applications with data that change constantly. React allows developers to easily work with DOM which is more user-friendly than the old one.