The Story of React and TypeScript

Why React?

React is a JavaScript framework originally developed by Facebook and is widely used and very popular within the JavaScript community. React uses a specific inline syntax for combining HTML templates and JavaScript code in the same file, which is named JSX or JavaScript XML. Interestingly, React is only geared toward rendering components to the DOM and does not provide an out-of-the-box framework for things like routing. For this reason, React is often combined with other frameworks, such as Redux for state management or React Router for routing capabilities.

That said, React is an extremely efficient rendering engine and is generally a lot faster than other frameworks in terms of rendering speed. There are some, but not many, frameworks that render faster than React, the most notable of these being Backbone.

Along with its JSX syntax for combining HTML and JavaScript, React is actually a very simple framework to understand and use. Its primary principle is that rendering a particular area of the DOM should be handled by a single React component. React uses what is known as a virtual DOM in order to calculate what updates need to be made to the DOM, so it is able to render only those elements that have changed. This means that if we were to render a collection of items to the DOM, then each element of the collection should become a React component, and the collection itself should be a React component. If only a single item in the collection is updated, then React will not need to rerender the entire collection; it will only need to render the updated item.