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.
What else makes React awesome?
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 😉