React is a JavaScript software library that provides a basic framework for the output of user interface components of websites (web framework). Components are structured hierarchically in React and can be represented in its syntax as self-defined HTML tags. Thanks to the concepts of unidirectional data flow and the "Virtual DOM", the React model promises the simple, yet high-performance structure of even complex applications. [Wiki: https://de.wikipedia.org/wiki/React]
React is widely used today for modern web applications/projects, from small and simple (e.g. single page application) to large and complex. It is very flexible and can be used for UI projects of any size and platform, including mobile, web and desktop development, which is why many world-renowned companies, such as Instagram and Airbnb, rely on React for their products.
The features and benefits of React
Virtual DOM
Performance is the biggest challenge of today's dynamic web applications. To enable dynamic websites, a DOM (Document Object Model) is created in the browser, which stores all elements, no matter how small, in a tree structure in order to perform operations such as calculating positions or properties such as color, size, etc. on them. If the DOM or individual properties are to be changed, the DOM must be recalculated. Typically, jQuery is used for this, which executes the operations via the browser DOM. As the elements can influence each other in many different ways, these changes and calculations are quite complex.
In React, Virtual DOM solves this problem: by storing the DOM in memory and only updating it selectively, it can be changed very quickly and the number of updates in the browser is minimized.
Components
Components allow you to break your user interface into independent, reusable parts and view each part in isolation. The components are JavaScript functions or classes (since ES6) with a render method.
One Way Data Flow
React only transfers data in one direction, towards the components. This simplifies debugging.
JSX
A fundamental concept of React is JSX. JSX is an extension of the JavaScript programming language and makes it possible to use HTML-like elements seamlessly in JavaScript. With JSX, React is simply connected to the display (view layer). The idea behind JSX is to no longer separate by technology, but by responsibility. This concept is called Separation of Concerns (SoC). Because a component no longer has to be combined from two entities, JSX helps to write self-contained components that are themselves very reusable.
Advantages of React for development
Simplicity
React has a very steep learning curve because it is very easy to build components with it. A component in React is not much more than a JavaScript class that contains all the logic for displaying the component. You don't even need to learn a template language to write a component, because the UI part of a component is written in React with JavaScript. JSX improves readability, especially by simplifying the writing of DOM elements.
Scalability and flexibility
The core of React are components and their composition into an application. The components are divided into classes that can be easily extended and transferred, allowing scalable and flexible applications to be developed. In addition, the component status can be checked and changed at any time using the React API.
Simplified development complexity and reusability
Another major advantage of React is the JSX syntax extension, which offers excellent reusability. The standard mechanics of React suggest using standardized inline styles described with JavaScript objects. JSX combines HTML and CSS in a JavaScript code and frees you from the pain of having to insert links to other files via attributes. Each component can be freely defined anywhere in the project by assigning it a specific unique status.
Active community and sufficient reusable components
React with its ecosystem is a kind of flexible framework. You can choose libraries and add them to the core of your application.
Sources:
[1] Image of the blog post: React Native Logo, https://commons.wikimedia.org/wiki/File:React_Native_Logo.png (retrieved on 27.11.2019)
