Front-End Insights

Ok, you were right! React is awesome!


When I previously wrote some words about React (first, after two weeks of using it and later about React components) I was complaining a little bit. I only had experience with AngularJS and KnockoutJS frameworks which are very different from React… Now, after my first small but commercial project and after the start of a second, much bigger, project in this technology, I can only tell you that React is awesome!

Here’s why I changed my mind and what are, in my opinion, the best parts of it:

Why I changed my opinion about React

Well… previously I used React in a small project – actually it was just a more advanced website. Additionally, I made some beginner’s mistakes… For example, I used Redux only for those parts of the app which were connecting with the external API, leaving the majority of the components to manage their own state. Now, when I’m participating in a much bigger project, I use Redux as it should be used: the whole state of the application is stored in the Redux store which is a real “single source of truth”. Since I started using this approach and avoiding the use of the internal state of components, the application code is much cleaner and logical! Now everything makes sense and I like it – yes, I think React with the Flux architecture is way better than the approach used in the AngularJS (1.0) framework!

You can find a tremendous amount of information about Redux on the Internet. Dan Abramov, the author of Redux has made a great tutorial which is, I think, worth watching. As Redux is an implementation of Facebook’s Flux architecture, it is also good to know what it is – personally I like this simple article from Andrew Ray’s “for stupid people” series 😉

If we are talking about components handling their own state… the second big change which was revolutionary for me was applying the smart/dummy components approach. Previously I had many nested components and all of them had their own state sometimes shared with child components etc. Generally speaking – a huge mess… Now I use several “smart” components that handle events, call Redux actions and do all other “smart” things. In the render method of these components, I nest other components which are “dummies”. It means that they know nothing about the Redux state and how to handle it’s events – they only know how to present the data on the UI. Of course I pass to them event handlers but their implementation is in the “smart” component. The same is with the state – I pass only data to them, so they are independent of any Redux reducer.

If you are curious and want to know more about the smart/dumb components approach I advise you to check out Dan Abramov’s article on medium

What else makes React awesome?

Yes, these two changes in my approach to the creation of the ReactJS application have altered my perspective on the whole React ecosystem. I remember complaining that we have to mix JavaScript code with JSX and it’s bad because we should separate logic and presentation. Now I know I wasn’t right…

Let’s take a look at Angular (of course it’s the first version) – in this framework we usually split the JavaScript controllers from HTML templates. But is it a real separation? I don’t think so… If you look at a typical Angular template, you can find loads of special attributes inside. These attributes try to add some control to the HTML, so… you still have a logic inside these templates! In my opinion it looks awful and is difficult to maintain.

On the contrary, in React you just use JavaScript. JSX, is also basically JavaScript. You can mix JSX tags with plain JavaScript code. So, there is no reason to separate them. It is better to use the smart/dumb components approach – I think this way you can really achieve the separation of concerns!

Another thing that I like now is the way how everything works in React. It is not easy for a newbie – you have to make your brain switch to thinking in the React way, especially if you have experience with older frameworks. But, if you do, the lifecycle of the React application is extremely clear and concise: all you need to focus on is the state of the application. When you create a component you just have to foresee all application states that the component depends on and write the code to cover all these possible states. Then, when the state is changing (e.g. in reaction to a button click, etc.), the controller re-renders itself to show its “version” for this particular state. I think it’s really simple!

All of these, plus the Virtual DOM which is behind the scenes, makes a React application extremely fast and scalable.


As you can see, many things have changed since my last post about React. Now I’m a big fan of this library and the whole architecture of this ecosystem. That’s why you can expect many, many, many more posts about this matter! I hope you will like them 😉

  • anonymous

    It would be great to see some practical example to what we can use react, and how to use it properly in project

    • yeah, I think it’s good idea – I will think about such post in the feature, thanks