React with its component-based approach is fun! But you can find it hard to build web application with it. That’s because React is not a framework. It’s a library which does one part of building web applications, rendering views, and does it well. You need to bring in other libraries (ecosystem) and piece them together to make efficient web application.

JavaScript is very un-opinionated language, you need to create your own opinions. This can be problem for people who just wants something to be done, not deciding/researching about best libraries for the job. This is where React competitors like Angular or Ember excel (both are frameworks).

I studied and developed with both of them in the past before settling for React. I have to say I’m a fan of neither. Main complaint for Angular are templates with non-standard HTML syntax – ngWhatever, parenthesis and brackets for bindings, wiring dependencies together ((Do you know JavaScript doesn’t even need DI, IoC and stuff like that?)). If there is error in templates, they fail silently. Ember brings me less control and customization – it’s heavily influenced by Ruby on Rails (also not a fan), which prefers convention over configuration paradigm (also also not a fan).

With React at minimum you need also a library for routing, for managing global state management and for making AJAX requests. I use React-Router, Redux and Axios respectively and I regard them as building blocks for web applications in React ((There’s also a build automation tool Webpack (or Browserfiy, Rollup, JSPM, Lasso), which bundles your code and its dependencies together and is vital for delivering it into the browser, but that’s not the focus of this post)). But it’s also good to know few established design patterns used in building maintainable web application in React like higher-order function, functional programming and other utility/optimizations libraries for React (recompose) and especially Redux (Immutable.js, reselect, normalizr). Also bonus perk of using these well established libraries is easier unit-testing.

I’d like to point out I’m not saying you should over-engineer every web application you develop with libraries listed here. Use it if it make sense and you are actual benefiting from them. For example you don’t need Redux if you only have state that controls component’s UI and it’s not shared by other components.