Chapter 9. React Router and Data Models

In the previous chapter, we took a look at the React performance tools that can improve performance of our React apps. We explored using the PERF add-on, PureRenderMixin, and so on and took a look at some of the gotchas related to the performance tools provided by React.

In this chapter, we will take a closer look at react-router and perform routing at different levels. We will take a look at nested routing and passing around parameters, as well as see how react-router maintains history when performing routing tasks. We will also take a look at passing and using context to render React Components. Finally, we will explore data-models and mix and match them with other frameworks to use as data models in React, Backbone in this case.

In this chapter, we will cover the following topics:

• React in your apps

• Routing with react-router

• Different routing mechanism

• Setting up routing and passing around the routing context

• React and data stores/models

• Using Backbone...

A new adventure

"Hi Shawn and Mike!" exclaimed Carla.

Shawn and Mike were startled. They had just got in and were about to start their day. The past few days had been a lot of React exploration for them.

"I have some good news for you guys. We got a new project, where we need to build a cat-based interest site. Something like say – Pinterest? Users can like images and profiles of cats. They can then see and like related articles for sale, as well," continued Carla.

"Oh, nice," replied Shawn.

Shawn and Mike regrouped and started a conversation about the new project that they just heard from Carla.

"This is nice. So, I guess, we want to display a small Pinterest-style gallery of images in panel shapes?" inquired Shawn.

"Correct," continued Mike. "We also want to display the images in large scale, maybe in a modal after a user clicks on the image. Carla said she wants random cats to be featured in the footer, which should take us to a full-fledged cat display page."

"You know what, I know the perfect...

Creating Backbone models

"So, Shawn, let's go ahead and build out our cats' collection that we want to display. For the purpose of development, we are going to use cat images from lorempixel service, for example, http://lorempixel.com/600/600/cats/. This will give us a random cat image of 600 x 600 pixels."

"Next, we are going to create a store of data using different-than-normal objects. We want to explore how to embed different model flows with our React app here. In our case, let's make use of Backbone models, instead of the PICTURES constant. I know that you have already used Backbone."

"Yup, I have used it in my previous projects."

"Alright then, let's define our Cat model."

const PictureModel = Backbone.Model.extend({
  defaults: {
    src: 'http://lorempixel.com/601/600/cats/',
    name: 'Pusheen',
    details: 'Pusheen is a Cat'
  }
});

"Here we store the src for the image of a cat, its name, and some details about it. As you can see, we have provided some default values for these attributes...

Incorporating defined Backbone models

"Next, let's define our index with how we need the routing to be and what paths should the routing respond to. From there, we will go ahead with building our components."

"Got it."

import React from 'react'
import { render } from 'react-dom'
import { createHistory, useBasename } from 'history'
import { Router, Route, IndexRoute, Link } from 'react-router'
import Backbone from 'backbone';
import Modal from './Modal'
import App from './App'
import { Cats, PictureModel } from './models';
import Picture from './Picture'
import Sample from './Sample'
import Home from './Home'

const history = useBasename(createHistory)({
  basename: '/pinterest'
});


render((
  <Router history={history}>
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="/pictures/:id" component={Picture}/>
      <Route path="/this/:cid/is/:randomId/sampleroute" component={Sample}/>
    </Route>
  </Router>...

Data models and Backbone

"Shawn, I wanted to discuss how we used Backbone models here or how we are storing the data. We moved from the following code to make use of Backbone collections. This helped us to define our data in a better way:"

PICTURES =[{array of objects}]

"However, if you notice, we ended up defining a static collection of objects. Along with that, this collection was global and required to be passed around."

"That is true. I also noticed that we had a fixed state in a global fashion for the data. I believe, we could have not done much there. If we updated, the Views would still remain the same?"

"Exactly! What's happening in our case is that we are sending and using/modifying the data in a fixed fashion, globally. Any updates to this data in a different part of the application would not affect how our views were displayed or even the data that was already being accessed in different components would not change. For example, consider that the Home component changed the Cats constant...

Summary

In this chapter, we built a simple Pinterest-like app, making use of react-router and taking a closer look at it while performing routing at different levels. We also took a look at nested routing, passing around parameters, how the react-router maintains history, and so on, when performing the routing tasks. We took a look at how to pass and use the context to render the React components and mix Backbone models to maintain the Cats display data.

In the next chapter, we will explore adding animation to content and some other display goodies on top of the existing app.