The last two parts of the tutorial series in React introduced two functionalities, a paginated list and an infinite scroll , by using higher order components. However, these functionalities were used exclusively. In one scenario you used a paginated list, where you manually fetched the data, and in the other scenario you used an infinite scroll…
The following React tutorial builds up on Paginated List in React - Build a powerful Component (Part I) . The series of tutorials goes beyond the basic React components that you encounter in other React tutorials. This part of the series will show you how to build an infinite scroll in React. So far, your List component is able to opt-in two…
There are a ton of tutorials about the implementation of applications in React. Most of the time, they use basic components to teach the fundamentals of React, because, to be fair, everything else is hard to cover in one tutorial. Only a handful of long written content will take you on the journey to build more powerful components. I want to take…
At the time of writing this, I am travelling through South East Asia. On my quest to experience the countries in their most natural ways, I try to connect with locals often as possible. When travelling a country, it is not about seeing another cave or waterfall that drives me. Instead, I seek to connect with the local people. When speaking to them…
This tutorial is outdated. Please read over here everything you need to know about React Ref . In the past there has been a lot of confusion around the ref attribute in React. The attribute makes it possible to reference a DOM node in order to access it and to interact with it. This article should give some clarification around the ref…
I did a lot of Angular 1.x back in the days until I started to use React. I can say that I used both solutions extensively. But there were and are several reasons why I moved to React. These reasons were not clear from the beginning, but retrospectively I think I can summarize these very well. In the following I want to give you 10 reasons why I…
Sometimes I feel it's quite obvious, but I never saw it somewhere written down. The article is my attempt to show you a way to organize your state with state keys . I'm using it in my projects, others might already use a similar approach. But nobody advertised it so far. Table of Contents Cluttered State React + Redux developers tend to use…
The good thing about the Redux + React ecosystem is you can always have a shot at something novel in the JavaScript landscape. Especially when it comes to the middleware of Redux to handle asynchronous requests, one will find a great selection of paradigms and implementations to choose from. In the beginning you often end up with a Promise based…
MobX is a state management solution. It is a standalone pure technical solution without being opinionated about the architectural state management app design. The 4 pillars State, Actions, Reactions and Derivations make state management in MobX possible. First the State encapsulates all of your application state which can consist of primitives to…
The Normalizr in Redux tutorial will teach you how to use normalizr for an improved data management in your Redux store. The library itself will help you to avoid deep nested data structures although the returned data from a server is deeply nested. Additionally it comes for free to enable a manageable single source of truth for data entities in…
