React (also known as React.js or ReactJS) is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. However, React is only concerned with rendering data to the DOM, and so creating React applications usually requires the use of additional libraries for state management and routing. Redux and React Router are respective examples of such libraries.
In terms of websites and web applications, UIs are the collection of on-screen menus, search bars, buttons, and anything else someone interacts with to USE a website or app.
Before React JS, developers had to build UIs by hand with “vanilla JavaScript” (raw JavaScript language on its own) or with React predecessors like jQuery. That meant longer development times and plenty of room for errors and bugs. So, in 2011, Facebook engineer Jordan Walke created React JS specifically to improve UI development.
JSX, a syntax extension to JavaScript, allows for the easy manipulation of the Document Object Model (DOM). JSX has a funky HTML-style syntax which creates React "elements," and JSX to update the DOM is not only convenient but it also leads to a significant increase in performance through the use of a Virtual DOM.
When a developer uses JSX to change or update the DOM, React JS creates a Virtual DOM. The Virtual DOM is a copy of the original DOM that React JS uses to see what changes need to be made to the original DOM in response to events such as user interactions with elements on the webpage (e.g. button clicks). Virtual DOM allows us to update only what is needed as opposed to the whole page. If we were using "vanilla JS" and a user decides to add a post to a blog, the entire DOM would have to update. However, with React, only the post component will update to show the new post.
Reach picks up where other frame works like Angular fall short. Angular depends highly on DOM for execution flow, making it harder to debug and test. Angular also has a very complex structure since it is based on the three layer MVC(Model View Controller) architectural patern. React is more of a library than a framework. So, you are not directly working with the DOM. Instead you work with the Virtual DOM, allowing React to only update what is necessary. Additionally, you also get the benefit of using JSX with React. JSX combines both HTML and JavaScript elements, making React more convenient and increasing performance.