EdwinGuzman

import ga from 'react-ga';
ga.event({ category: '', action: '', label: '' });

// We can use this function in our applications:

// In the New Arrivals app
ga.event({ category: 'New Arrivals', action: 'click', label: 'list view' });
ga.event({ category: 'New Arrivals', action: 'click', label: 'grid view' });

// In the Staff Picks app

EdwinGuzman

const booksByTolkien = bookBy('J. R. R. Tolkien');
const booksByHerbert = bookBy('Frank Herbert');

// Better than:
const booksByTolkien = (book) => {
  console.log(`J. R. R. Tolkien wrote ${book}.`);
}
const booksByHerbert = (book) => {
  console.log(`Frank Herbert wrote ${book}.`);
}

EdwinGuzman

const booksByRowling = (book) => {
  console.log(`J. K. Rowling wrote ${book}.`);
}

EdwinGuzman

const bookBy = (author) => {
  return (book) => {
    console.log(`${author} wrote ${book}.`);
  };
};
const booksByRowling = bookBy('J. K. Rowling');

booksByRowling('Harry Potter and the Sorcerer\'s Stone');
// J. K. Rowling wrote Harry Potter and the Sorcerer’s Stone.
booksByRowling('Harry Potter and the Chamber of Secrets');

EdwinGuzman

bookBy('J. K. Rowling', 'Harry Potter and the Sorcerer\'s Stone');
// J. K. Rowling wrote Harry Potter and the Sorcerer's Stone.
bookBy('J. K. Rowling', 'Harry Potter and the Chamber of Secrets');
// J. K. Rowling and the Chamber of Secrets
bookBy('J. K. Rowling', 'Harry Potter and the Prisoner of Azkaban');
// J. K. Rowling wrote Harry Potter and the Prisoner of Azkaban
// Etc.

EdwinGuzman

const bookBy = (author, book) => {
  console.log(`${author} wrote ${book}.`);
};

bookBy('Orson Scott Card', 'Ender\'s Game');
// Orson Scott Card wrote Ender's Game.

bookBy('N. K. Jemisin', 'The Fifth Season');
// N. K. Jemisin wrote The Fifth Season.

EdwinGuzman

// Previous way of importing the NYPL Header in package.json:
"dgx-header-component":"git+ssh://git@bitbucket.org/NYPL/dgx-header-component.git#master",

// Installing the npm Header and Footer:
$ npm install --save @nypl/dgx-header-component
$ npm install --save @nypl/dgx-react-footer

// NPM packages in package.json:
"dependencies": {
  "@nypl/dgx-header-component": "1.4.1",

EdwinGuzman

// ES5
const App = React.createClass({
  Mixins: [Navigation],
  // ...
});

// ES6
class App extends React.Component {
  // ...
}

EdwinGuzman

// We went from using React 0.13 and React Router 0.13 syntax: 
import Router from 'react-router';
// ...

app.use('/', (req, res) => {
  let iso = new Iso();
  alt.bootstrap(JSON.stringify(res.locals.data || {}));

  Router.run(routes.server, req.path, (Root, state) => {
    const html = React.renderToString(<Root route={req.path} />);

EdwinGuzman

// React Router v0.13
<Route path="/" name="root" handler={Application}>
  <Route path="blog" name="blogHome" handler={BlogsWrapper} />
  <!-- more routes -->
</Route>

// React Router v2.0
<Route path="/" component={Application}>
  <Route path="blog" component={BlogsWrapper} />
    <!-- more routes -->