The All-React App

In creating the React page, we made a few starting decisions:

• We didn’t need styled components, because the CSS already existed.
• We did not try to make a React route bridge between the two React pages. Instead, the schedule page still uses the Rails server to route between the two pages.
• There’s some minor date parsing and formatting on this page. Rather than introduce a new JavaScript library to manage this, we did it on the server-side and had the formatted and parsed data made part of the data sent to React.
• We decided to keep the show/hide behavior via CSS classes, even though React makes it relatively easy to just remove and reinsert the DOM elements. This was to keep from also having to rewrite the tests and to avoid more complicated logic in the React components.

We also decided that we couldn’t quite use the existing filter reducer (app/javascript/src/calendar_filter_store.ts) as is, although we did adapt the logic into a Redux reducer.

The only other real design decision was how to break up the components. We made individual calendar days at the top components, individual schedule days, and individual concerts, with some grouping components to manage the lists.

We have to roll the markup up into React components and then make those components talk to and receive data from the reducers. Let’s start on the Rails side.

The controller doesn’t actually have to change, but we do reduce the view file to just this: