Now we'll implement the exact same UI using React. The aim is to illustrate that Immutable.js collections are helpful as the only library, or as a utility alongside many other libraries.
Application state in the previous example was kept in the DOM itself. For example, we had to query the DOM for checkbox nodes if we wanted to see if one of them was selected. With React components, state belongs in a component. Since our application is a simple one, we only need a single container, the app itself:
class App extends React.Component {
constructor() {
super();
this.state = {
episodes,
query: '',
title: true,
date: false,
director: false,
rating: 7
};
}
...
}React component state is stored in a state property of the component when it is created. The episodes value that you see here is the same episode list from the previous example. Now, it's part of this App component's state. The other values here represent...