Front-End Insights

After two weeks of using ReactJS…


A new job means new oportunities… This also applies to frameworks and tools we have had a chance to try. In my case it was a new project in ReactJS (from scratch) which was something completely new to me. Now, after more than two weeks, I can share my thoughts about this new approach for creating user interfaces.

What is ReactJS?

All of you have probably heard of React, even if you haven’t tried it yet at all (just like me). There is a huge hype around it on Twitter and other community channels. But before I tell you what I think about it, I should explain what ReactJS actually is.

First of all, I have to mention, it is not another JavaScript framework! It is more a library which provides an inventive approach for building web applications. As it’s stated in the official documentation:

React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC.

I don’t think this is entirely true (but more about that later). The main concept which is the basis for this library is called “Virtual DOM”. This means that when you create your UI components, ReactJS stores them in the memory and, based on this, it renders a real DOM tree in the browser. But what does it do this for? Well, if it has a copy of the real DOM in the memory it allows it to react to changes easier and faster! When some part of the Virtual DOM changes (e.g. because data is updated), ReactJS knows which part of a real DOM should be modified. This enhances the performance of the application hugely.

Components, JSX and ES6

ReactJS applications are built using small bricks called components. Actually, this is the only way to provide modularity to the code. Please see below an example of such a component (from official ReactJS docs):

"use strict";

var HelloMessage = React.createClass({
  displayName: "HelloMessage",

  render: function render() {
    return React.createElement(
      "Hello ",

As you can see, we have access to the React object which gives us the API. We can use this API to create a special class object. It has a render method which returns an element of the Virtual DOM.

I don’t think this looks nice and friendly. Fortunatelly for us, there exists a special XML-like syntax called JSX. It is really helpful in creating Virtual DOM elements. Let’s see the same example as above but using JSX syntax:

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {}</div>;

It’s much better, isn’t it? As you may have noticed, the render function returns just a HTML element now.

We can go deeper in our improvements if we use a ES6/ES2015 transpiler such as Babel. We can then use a new JavaScript syntax combined with JSX. Let’s see how our previous sample code will look using this approach:

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {}</div>;

I think that the code is much cleaner now.

What are my thoughts on ReactJS?

I think I have shown you the main concept of React. But what do I think about it now after two weeks of using it?

Well… for me, experienced mostly in KnockoutJS and AngularJS, it wasn’t easy to deal with this new approach at the beginning. I still have to get more familiar with advanced concepts which appear in ReactJS applications such as Flux, Redux or Immutable… But now, when I’ve created a dozen or so React components, I admit that this is a really powerfull tool!

It is not only the V from the MVC pattern. The component class is more like V(iew) and C(ontroller) together. It is very clear to me how to achieve a separation of concerns using these components. It is also very easy to manipulate DOM elements using the internal state of the component (you can also keep the state of the whole application in stores provided by, for example, Redux library).

I can’t say yet that I’m completely delighted with ReactJS but I now understand all the “hype” in the community…

Related Post

I recommend Nozbe

Simply Get Everything Done

Get your tasks and projects done thanks to Nozbe system and apps for the Mac, Windows, Linux, Android, iPad and iPhone.

If you want to know more about Nozbe and its capabilities, please take a look at my article about this great application.

  • Andrzej

    Myślałem, że domyślnie react już wspiera syntax z es2015. Bawiłem się jakiś czas temu tym, ale skończyło się jak na razie na oficjalnych tutorialach ze strony głównej. Chyba najpierw więcej czasu poświęce na angular.

    • Wspiera w sensie ze można dziedziczyć po Component i moduły są wspierane przez nowa składnie ale zeby napisać swoje komponenty w stylu ES6 i tak bez Babela lub innego Transpilera sie nie obejdzie

  • Anonimowe pytanie

    W jakich przypadkach najlepiej używać reacta? jakoś mam problem ze zrozumieniem do jakich zastosowań najlepiej go użyć, zrobienie małej rzeczy wydaje mi się rozdmuchane, bo przy normalnej “stronce” raczej nie ma sensu go wdrażać?

    • Przy normalnej “stronce” możliwe, że nie ma sensu. Na pewno reacta można użyć wszędzie tam gdzie użyłbyś frameworka typu angular czy ember. Z drugiej strony nie jest powiedziane, że musisz używać react razem z jakąś implementacją flux więć wydaje mi się, że użycie go ma także sens kiedy masz dużo manipulacji DOM, jako alternatywa do jQuery…

      P.S. Dlaczego piszecie po polsku? To, że ja to rozumiem nie znaczy, że czytelnicy bloga, który jest po angielsku też zrozumieją te komentarze, a moim zdaniem komentarze też wiele potrafią wnieść do tematu…

  • Anonimowe pytanie

    dzieki za odp. 🙂 co do ang to wybacz, jeszcze sie nie przestawilem ze twoj blog stal sie angielskojezyczny, przy nastepnym razie sie poprawie i bede pisal juz po ang.