In the previous chapter, we took a look at react-router and performed routing at different levels. We also looked at nested routing, passing around parameters, and how react-router maintains history when performing the routing tasks. We learned about passing around context and using context to render React components. We explored data models and mixed and matched them with other frameworks to use as data models in React-like Backbone, and were introduced to Flux.
In this chapter, we are going to explore a fun React add-on, Animation. We will start off by continuing with our Cat Pinterest application and enhancing it to support starring and sharing the data to update the views. We will then explore adding handlers for animation. We will see how components get wrapped for animation and how React adds the handlers for different events. We will also explore different events and how we can easily enhance our application in order to create stunning effects.
In this chapter, we will cover the following topics:
- Making changes to the data flow and passing data from react-router links
- Animation in React
- CSS transitions
- Transition groups
- Transition handlers
- Animating our dynamic component
At the end of chapter, we will be able to start animating our React components for different actions such as adding new content, changing data and position, and so on. We will also be able to add handlers for different types of events and explore different animation options out there, other than core animation add-on.
"Hi Shawn and Mike!" Carla joined Mike and Shawn in their conversation.
The day before, Carla had asked them to build a Pinterest-style application for cats for one of their clients.
"How are things going today?" she enquired.
"All good, Carla. Shawn, do you want to show Carla what we built yesterday?"
"Sure."
"That looks nice! Are we adding button for faving/starring of cats next?"
"Yes, we were just getting ready for that."
"Cool. The client called yesterday. What they want along with displaying the cats is to show a stream of cats being updated on the screen. This is going to happen when someone faves a cat so that we show it to other users."
"Got it. We will start working on it and simulate addition of cats to appear on the screen to start with."