oampo

<canvas id="canvas"></canvas>

oampo

Joe Turner

Email, GitHub

oampo

var Local = function() {
    var path = document.location.pathname.split("/");
    path = path[4];
    var ajax = $.ajax({
        url: "/" + path + "/files"
    });
    ajax.done(this.onGetFiles.bind(this));

    this.data = {
        description: decodeURI(path) + "#no-index #crumbs",

oampo

var axios = require('axios');


var findPassTime = function(latitude, longitude) {
    return axios.get('http://api.open-notify.org/iss-pass.json', {
            params: {
                lat: latitude,
                lon: longitude
            }
        })

oampo

Create stateless Trello components

• Add a main <div> to index.html.
• In the js/components repository, create the four stateless components described below.
• As you complete each component, render them into the <div> by adding a ReactDOM.render line to js/index.js.

Components

<Card />

oampo

Create actions, reducers and a store

• In js/actions/index.js make action creators for the following actions:

  {
      type: 'ADD_CARD',
      // Should be variable
      card: {
          id: 0,                  // The ID of the card
  

oampo

Connect the components, dispatch the actions

Rendering the state

• In your ReactDOM.render call, wrap your components in a Provider to provide the store to connected components.
• Connect the Board component, mapping the lists property of the state to the lists prop of the board component.
• Check that your initial state is being rendered at this point.

Adding cards

oampo

Loading and saving the Trello state

Loading the state

• Import and apply the Redux Thunk middleware

• Add some initial content to the db.json file:

  {

"lists": [{

oampo

Testing your components

• Add a test file for each component to the test directory.
• Use shallow or full DOM rendering to test that each component is rendered correctly, and responds to its input props how you would expect.

oampo

Higher-order function drills

Functions as arguments

• Create a function called repeat which takes two arguments:
  • The first argument should be an arbitrary function, fn
  • The second argument should be a number, n
• repeat should loop n times
• Each iteration of the loop, it should call fn
• Create two more functions called hello and goodbye: