React is a JavaScript library that provides a framework for rendering user interface components on web pages (web framework). Components in React are structured hierarchically and can be represented in its syntax as custom HTML tags. React’s model, based on the concepts of unidirectional data flow and the “Virtual DOM,” promises a simple yet high-performance way to build even complex applications. [Wiki: https://de.wikipedia.org/wiki/React]
React is widely used today for modern web applications and projects, ranging from small and simple (e.g., single-page applications) to large and complex ones. It is highly flexible and can be used for UI projects of any size and on any platform, including mobile, web, and desktop development. Many world-renowned companies, such as Instagram and Airbnb, therefore rely on React for their products.
The Features and Benefits of React
Virtual DOM
Performance is the biggest challenge facing today’s dynamic web applications. To enable dynamic web pages, a DOM (Document Object Model) is built in the browser, which stores even the smallest elements in a tree structure so that operations such as calculating positions or properties like color, size, etc., can be performed on them. If the DOM or any of its properties need to be changed, the DOM must be recalculated. jQuery is typically used for this purpose, as it performs these operations on the browser’s DOM. Since elements can influence one another in a wide variety of ways, these changes and calculations are quite resource-intensive.
In React, the Virtual DOM solves this problem: By storing the DOM in memory and updating it only selectively, it can be modified very quickly, and the number of updates in the browser is minimized.
Components
Components allow you to break down your user interface into independent, reusable parts and treat each part in isolation. Components are JavaScript functions or classes (since ES6) with a `render` method.
One-Way Data Flow
React flows data in only one direction—toward the components. This simplifies debugging.
JSX
A fundamental concept of React is JSX. JSX is an extension of the JavaScript programming language that allows you to seamlessly use HTML-like elements within JavaScript. JSX seamlessly connects React to the view layer. The idea behind JSX is to separate concerns based on responsibility rather than technology. This concept is called Separation of Concerns (SoC). By eliminating the need to combine a component from two separate entities, JSX helps you write self-contained components that are highly reusable.
Advantages of React for Development
Simplicity
React has a very steep learning curve because it’s very easy to build components with it. In React, a component is little more than a JavaScript class that contains all the logic for rendering the component. To write a component, you don’t even need to learn a template language, since the UI part of a component in React is written in JavaScript. JSX improves readability, particularly by simplifying the process of writing DOM elements.
Scalability and Flexibility
At the core of React are components and their composition into an application. The components are organized into classes that can be easily extended and reused. This enables the development of scalable and flexible applications. Additionally, the component state can be checked and modified at any time via the React API.
Simplified Development Complexity and Reusability
Another major advantage of React is the JSX syntax extension, which offers excellent reusability. React’s standard approach recommends using standardized inline styles defined as JavaScript objects. JSX combines HTML and CSS into a single JavaScript code base, eliminating the hassle 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 ID.
Active Community and Plenty of Reusable Components
React, with its ecosystem, is a flexible framework. You can choose libraries yourself and add them to the core of your application.
Sources:
[1] Image in the blog post: React Native logo, https://commons.wikimedia.org/wiki/File:React_Native_Logo.png (accessed on November 27, 2019)
