To demonstrate how Immutable.js applications use side-effects to render UI components, we'll build a very simple application that lists Black Mirror episodes and provides a handful of filter controls. We'll build the exact same user interface using DOM APIs and then do so again with React.
The application data that we will be rendering is a list of Black Mirror episodes. Each episode is a map with some information about the episode. Here's a truncated version of the list to give you an idea of what it looks like as an Immutable.js collection:
const episodes = List.of(
Map.of(
'title', 'The National Anthem',
'date', 'December 4 2011',
'director', 'Otto Bathurst',
'rating', 8.0
),
Map.of(
'title', 'Fifteen Million Merits',
'date', 'December 11 2011',
'director', 'Euros Lyn',
'rating', 8.3
),
Map.of(
'title', 'The Entire History of You',
'date', 'December 18 2011',
'director', 'Brian Welsh',
'rating...