Over the last few years, the options for creating fast interactive front ends for applications have exploded. Technology big ons like Facebook and Google have been vying to become the developer's choice from creating massive and rich Application Interfaces, React JS is one of these technologies. 

Developed by Facebook, and used extensively in their Facebook and Instagram applications. In fact, react JS was first used on the Facebook newsfeed back in 2011, and has evolved into one of the most popular ecosystems in JavaScript development, Companies such as Twitter, Airbnb, Netflix, Uber, and a whole host of other household names use react JS in their applications. 

So what is it? Many assume that it's a framework, it isn't. It's a JavaScript library to help developers create reusable, interactive and stateful UI components. It can be seen as the V or the view part of any application, including MVC architecture. React JS makes no assumptions about the rest of the stack that serves the application. It simply takes data and displays it. 

So what does react JS do? As I've already stated, it simply takes data and displays it. I say simply, but as you've guessed, it's not that simple. At a more technical level, most applications have react JS performing work on the client computer to update what the user sees as they interact and use the application. New views and updated data are seamlessly created and displayed with very few overheads, like additional network calls. A concept called the virtual DOM is used to do this. 

React JS can also work on the server, rendering the page before delivering it to the client. It's possible to have an application, having some parts rendering from the server and other parts rendering in the client. When a normal application renders in a browser, it creates the Document Object Model, a hierarchy of the webpage structure that can be manipulated with JavaScript. Facebook found that, if they used the copy of the DOM kept in memory, called the virtual DOM, they could make fast and fluid UI's. The idea is quite simple. 

Take the react JS code and the user interactions to make updates to the virtual DOM. Then use processes called diffing and reconciliation to make the actual DOM reflect the changes in the virtual DOM saving the developer the trouble of having to code these interactions, attribute manipulations and events handling. Another benefit of this, is that objects and pages don't need to refresh when something changes, which is more efficient. 

Thankfully, we don't need to get into too much detail about how all that happens. We just need to be aware of the process that is happening. And just so you know, the reconciliation engine is called fiber and has been used since react version 16. The build process for deploying a react JS application produces the files needed to deploy it. As you would expect, this is the HTML file to create the initial DOM and its associated CSS and JavaScript files. The JavaScript is mostly the react JS code that has been transpiled into finale JavaScript. 

So when the user requests the URL, the HTML is delivered with these associated files. The JavaScript file runs, producing the virtual DOM and the render for the initial view. As the user interacts with the application, various parts of the JavaScript code execute, updating the virtual DOM and therefore the actual DOM through the diffing and reconciliation process. If you're familiar with the OWASP Top 10 Vulnerabilities, then you're probably already thinking about security issues with react JS. 

Most obvious of these is using components with known vulnerabilities. React JS application has hundreds of dependencies, and it's important to ensure that these are kept up to date. Npm to audit command can then be used to help identify what is known to be vulnerable. and the audit fix command can be used to safely update them. 

However, if an update would introduce breaking changes, then a bigger pill rebuild may be required. At the time of recording, there were no known cross-site scripting vulnerabilities in react JS's core code and developers should always be aware of the dangers of incoming data and whether it should be trusted.