Do not make asynchronous calls within ReactJS's componentWillMount method

Reading Time: 1 minutes

It's a really bad idea to execute asynchronous calls, i.e. AJAX, within the componentWillMount() method. Well, on the ReactJS site, they simply say not to do, but do not mention why. I know now!
I experienced an infinite loop of componentWillMount while making an AJAX call inside componentWillMount. Shifting the code from componentWillMount to componentDidMount resolved my problem instantly; but to get there I lost about three hours of my life.

UPDATE: This was not the real problem. See more here!

Component Composition with ReactJS

Reading Time: 12 minutes

Decoupled and coupled composition.

ReactJS follows the current trend of component oriented Web UI design. Component oriented design is nothing new; in my good old desktop times I wrote applications in Qt, which uses widgets. Java Server Faces, WebForms and others do the same on server side. Nowadays, we can see the same trend hitting client side, like WebComponents, Directives in Angular, FlightJS, and of course ReactJS. In this article I'll talk about different composition types you can realize with ReactJS. Although this article shows how to compose your UI using ReactJS for composition, the ideas behind the composition modalities can be applied for other component driven libraries, or frameworks, too. I distinguish two modalities of composition, which I call Coupled and Decoupled Composition.

A coupled composition means that one component is the owner of another component.The owning component can be considered as a parent, while the owned component becomes a child.This kind of coupling leads to a typical component hierarchy with parent and children components.

decoupled composition is used when none of the components is owner, nor owned.These components exist on the same screen, nevertheless they are not bound or related to each other.

The composition modality defines the way how components communicate which each other.

Continue reading

Component based web UI with ReactJS

Reading Time: 10 minutes

Component based Web UI with ReactJS

Recently, I started a web frontend project using ReactJS. I am working with AngularJS on an enterprise application, but I thought for this relatively small project it would be a total overbloat using Angular. As I started to read about React, my curiosity grew. Most critics were positive, especially from those who already worked with React, and so I decided to give it a try. Now, after some days of seriously working with ReactJS, I would like to share my experiences.

Continue reading