React JS is one of a JavaScript library which is used for build user interfaces(UI) including interactive elements on websites. It is maintained by Facebook and a community of individual developers and communities.
If you are new to the web developing and not familiar with JavaScript or JavaScript libraries you might not understand this well. So you should refer about JavaScript before get into React JS.
Usually React is used as a base of single-page web applications and it only renders data to the DOM. You can develop a static one page HTML website by only using React JS. But in order to develop a web-application such as ecommerce, food delivery, authentication and other user interactive applications you might need to use of additional libraries such as Redux and React Router for state management and routing respectively.
Every basic website is a HTML document. Web browsers read these documents and convert those into viewable format and display them on your device (computer, tablet or phone) as web pages. Browser creates a Document Object Model (DOM) during this process. It includes a representational tree of arrangement of the web page. Developers are usually modifying the DOM using languages like JavaScript.
JSX ( JavaScript eXtension) is a react extension which makes the modification of DOM easier for the developers using simple HTML-style code. Using JSX to update a DOM, increases significant site performance improvements and development efficiency.
In case of using basic HTML websites (not React JS & JSX), it will use HTML to update its DOM. (Which is basically the changes of content on the screen without manually refreshing the page). Although this works fine for simple, static websites, this could become a problem for dynamic websites that involve higher user interactions. (Because the entire DOM needs to be reloaded on every time the user clicks a feature calling for a page refresh).
But in the React JS, JSX is used to update its DOM. React JS creates a Virtual DOM which is a copy of the site’s DOM. React use this Virtual DOM to check what element or part of the actual DOM need to change when an event fired by the user interaction. (user clicks a button).
As an example let’s take the Facebook wall. There are millions of posts and images in the wall. When a user clicks the like button, if not using React JS the entire DOM needs to be updated to see the result. It is not a good user experience. But by using React JS using the Virtual DOM it checks which component is affected by the user click and manage to update those components only.
In conclusion, React JS is one of a best JavaScript library maintained by Facebook. It has key features like JSX and Virtual DOM which has been used to enhance the site performance and development efficiency. I have being used React JS for a long time. If you are a web developer it is really worth to try React JS. I can assure you that React JS will make your work easier and effective.
