General

This lesson will introduce you to the world of React.

What React is and what it is not

At this point, let’s cite the React documentation that has summarized it nicely:

“[React is] a library for building user interfaces.”

Even if this explanation might seem a little short, we can deduce a few key points from it to understand React better. First, React is just a library, not a framework. It does not boast an abundance of built-in functions to create complex web applications with ease. The second part of the sentence is equally important: “for building user interfaces.”

Strictly speaking, React is just a library that makes it easy to develop user interfaces. There are no services or methods to make API calls,built-in models, or ORM. React is only concerned with user interfaces. One could say it is just the “view layer” in our application. In this context, we occasionally read that React can be thought of as the “V” in MVC or MVVM.

States in React

React offers a declarative way to model state (state here referring to the state of the user interface itself). Simply put, this means that we declare in our code how our user interface should look given each state of the component. Let’s look at a simple example to illustrate this:

If a user is logged in, show the dashboard. If they are not, show the login form.

The logic itself is found in the JavaScript part of the application (where it should live anyway) and not in templates, as opposed to many other web frameworks that mix the two. This shift away from templates doesn’t sound very easy at first, but it will become clearer soon.

Composition vs Inheritance

React is component-based. We write encapsulated, functional components that can be composed together at will and reused at our leisure. Extending or inheriting components is possible in theory but rather uncommon in the world of React. Rather than working with inheritance, React encourages composition, which is the act of combining multiple components into a “whole.”

Does this mean that we cannot build complex web applications with React? Absolutely not. React boasts a large, high-quality, and very active ecosystem of libraries. These libraries, in turn, are based on, extend, or complement React in such a way that it does not need to hide behind large-scale frameworks like Ember or Angular. So in fact, React is great for building complex applications, if we consider the React ecosystem as a whole. Once we have entered the React ecosystem and gained a first impression, we quickly find several excellent tools and libraries to build professional, super individual, and highly complex applications.