Nowadays, front end applications rely on libraries or frameworks that allow us to make SPAs (Single Page Applications) in their developments. In todays blog post we will delve into a quick comparison between the most popular two; Angular and React, focusing on their components and why you might choose them.

The first and foremost is to consider what types of components we have available. Let´s start with React.

React

React offers several types of components:

Pure Component or class component, extends the Component module of React, they include life cycle, state and props.

Stateless Component or SFC (Stateless Functional Component) is a component that contains no life cycle or status, but only props that it receives from its parent application.

Hight Order Component is a component that acts as another wrapper, that is, it must accept and return a component as a parameter.

Angular 

In Angular, all components must have the Component decorator. A distinction can be made between several types of components, but only depending on how we can structure the application:

Container Components or ready components. Components that will interact with the services and perform logic.

Presentational Components or silly components. Components that only take responsability for data painting and the sending of events that they receive from the parent component.

As we can see, we are left with almost the same types of components, so we can save the lack of Angular HoCs by creating a structural directive, for example.

One of the biggest mistakes when developing in React is when developers believe that the markup is HTML. Although it looks like HTML, it is not; it is actually JSX: a syntactic sugar for the creation of elements in React: React.create, element (component, props,…etc).

Since it is Javascript, we can perform javascript operations.

Angular works with HTML and communicates with it with interpolation through the two-way-data binding (Property binding and Event binding):

Interpolation: Reading of variables of type string in the HTML using the double keys {{}}

Property binding: Variables towards the DOM. It will be collected in child element with an @input ()

Event binding: Events from the DOM. Events that will be sent from the child with an @Output ().

 

It´s also worth mentioning about the treaty that React makes with its data, since the pure components receive two elements in their creation: the Props and the State.

– Props: These are read-only elements. They are simply input parameters to a component, although you can create a prop that is an event for parent-child communication.

– State: Mutable element within the React class. It is not directly mutable by assignment, but you have to use a specific function of react called setState.

Keep in mind that a Stateless Component, as its name indicates, has no status.

Want to learn more about our web development? Read our other blog posts here.