Video 3.1 React.js: Introduction Chris Murphy · Property of Penn Engineering, Chris Murphy Normal DOM –How it Works •When a node is updated, the browser updates (re-renders)

Video 3.1

React.js: Introduction

Chris Murphy

SD4x-3.1 1

Property of Penn Engineering, Chris Murphy

Review

• JavaScript: a general-purpose, easy-to-use programming language

• DOM: representation of structure of HTML page, which can be manipulated using JavaScript

• jQuery: library that simplifies accessing/using the DOM

SD4x-3.1 2


What is React?

• JavaScript library for building user interfaces

• HTML page is composed of recyclable, interactive ‘components’ that have a lifecycle during which the state of the component changes

• Highly efficient because of notion of VirtualDOM

• Created and maintained by Facebook

• Used in production by many well known companies

• Netflix

• WhatsApp, Instagram

• Atlassian(BitBucket, HipChat, Jira)

• Codecademy

• Airbnb

• Pinterest

• Dropbox

• PayPal

• Reddit

• Salesforce

• Squarespace

• New York Times

• Treehouse

• eBay

• Trulia

• Expedia

• Visa

• Wolfram Alpha

SD4x-3.1 3


Why React?

• Modularity: organize code into reusable components that can work together

• Lifecycle maintenance: modifying component based on state; event listeners; simplified conditional rendering

• JSX: write HTML within JavaScript

SD4x-3.1 4


Components

• Building blocks of React

• Make up the nodes included in the VirtualDOM

• Include and maintain a state that changes with events

• Each component maintains state independently

• Applications can be configured to respond to component level events

SD4x-3.1 5


VirtualDOM

• Node tree that represents HTML elements, their attributes, and content as objects and properties

• Selectively renders and re-renders subtrees of nodes based on state changes

• Efficient because it does the least amount of DOM manipulation to update components

• Provides a layer of abstraction to the developer, providing simpler programming model and high performance

SD4x-3.1 6


Normal DOM – How it Works

• When a node is updated, the browser updates (re-renders) all nodes

SD4x-3.1 7




SD4x-3.1 8




Change has been made to any given

node

SD4x-3.1 9




Change has been made to any given

node

Re-render all nodes to reflect the change

SD4x-3.1 10


VirtualDOM – How it Works

• When a node is updated, two things occur:

• ‘diff’ to determine which nodes within DOM have changed

• ‘reconciliation’ to update the nodes that are affected

SD4x-3.1 11






Identify nodes that have changed

(‘diff’)

SD4x-3.1 12







(‘diff’)

Identify nodes that are affected by the

change (reconciliation)

SD4x-3.1 13







(‘diff’)

Identify nodes that are affected by the

change (reconciliation)

Re-render ONLY the nodes that were

affected by change

SD4x-3.1 14


Developing with React

1. Within the page’s HTML, allocate a position on the page in which the desired React component will be rendered, e.g. a div

2. Create a React component in JavaScript

• Establish an initial state

• Define any events that could change the component’s state over its lifecycle

• Define the function to render the HTML

3. Drop the component into position allocated in Step 1

SD4x-3.1 15


Getting Started

<!DOCTYPE html>

<html>

<head>

<title>ReactJS Example</title>

<script src="react.js"></script>

<script src="react-dom.js"></script>

</head>

<body>

<div id="container"></div>

<script type="text/jsx">



</script>

</body>

</html>

• Create a div in the HTML to represent the location where the React component will be placed

• Write JavaScript code to create and display component in div

SD4x-3.1 16


Getting Started

<!DOCTYPE html>

<html>

<head>




</head>

<body>




</script>

</body>

</html>



SD4x-3.1 17


Getting Started

<!DOCTYPE html>

<html>

<head>




</head>

<body>




</script>

</body>

</html>



SD4x-3.1 18


Getting Started

<!DOCTYPE html>

<html>

<head>




</head>

<body>




</script>

</body>

</html>



SD4x-3.1 19


Getting Started

<!DOCTYPE html>

<html>

<head>




</head>

<body>




</script>

</body>

</html>



SD4x-3.1 20


Getting Started

<!DOCTYPE html>

<html>

<head>




</head>

<body>




</script>

</body>

</html>



SD4x-3.1 21


Getting Started

<!DOCTYPE html>

<html>

<head>




</head>

<body>




</script>

</body>

</html>



SD4x-3.1 22


Getting Started

<!DOCTYPE html>

<html>

<head>




</head>

<body>




</script>

</body>

</html>



SD4x-3.1 23


JSX

• JSX – JavaScript XML Syntax Transform

• Allows user to write HTML-like tags within JavaScript

• Converts text (HTML) to React code

SD4x-3.1 24


Rendering Elements using JSX


<script type='text/jsx'>

ReactDOM.render(

<h1>Hello, World!</h1>,

document.getElementById('container')

);

</script>

SD4x-3.1 25





ReactDOM.render(



);

</script>

SD4x-3.1 26





ReactDOM.render(



);

</script>

SD4x-3.1 27





ReactDOM.render(



);

</script>

SD4x-3.1 28





ReactDOM.render(



);

</script>

SD4x-3.1 29





ReactDOM.render(



);

</script>

SD4x-3.1 30


Hello, React!

SD4x-3.1 31

<!DOCTYPE html>

<html>

<head>




</head>

<body>

<div id='container'></div>


ReactDOM.render(

<h1> Hello, React! </h1>,


);

</script>

</body>

</html>


Hello, React!

SD4x-3.1 32

<!DOCTYPE html>

<html>

<head>




</head>

<body>



ReactDOM.render(



);

</script>

</body>

</html>


Hello, React!

SD4x-3.1 33

<!DOCTYPE html>

<html>

<head>




</head>

<body>



ReactDOM.render(



);

</script>

</body>

</html>


Hello, React!

SD4x-3.1 34

<!DOCTYPE html>

<html>

<head>




</head>

<body>



ReactDOM.render(



);

</script>

</body>

</html>


Hello, React!

SD4x-3.1 35

<!DOCTYPE html>

<html>

<head>




</head>

<body>



ReactDOM.render(



);

</script>

</body>

</html>


Hello, React!

SD4x-3.1 36

<!DOCTYPE html>

<html>

<head>




</head>

<body>



ReactDOM.render(



);

</script>

</body>

</html>


Hello, React!

SD4x-3.1 37

<!DOCTYPE html>

<html>

<head>




</head>

<body>



ReactDOM.render(



);

</script>

</body>

</html>


Looking Ahead

• Defining React components

• Reacting to user events

• Interaction between React components

• Developing large applications with React

SD4x-3.1 38


Looking Ahead

• Defining React components

• Reacting to user events

• Interaction between React components

• Developing large applications with React

SD4x-3.1 39

Video 3.2

React Components

Chris Murphy

SD4x-3.2 40


Review

• React allows us to create custom components and insert them into the VirtualDOM in our HTML page

• This allows for selective rendering and modular development of dynamic behavior

SD4x-3.2 41


React Components

• Components are JavaScript objects based off the React.Component prototype

• Components define properties, event-based state variables, and callback functions

• A component’s render() function is used to render its HTML

• VirtualDOM manages each component’s lifecycle and calls its render() function as needed

SD4x-3.2 42


Creating React Components

• React.createClass() allows us to define a component

• This function takes an object containing the component’s specifications as an argument:

var HelloComponent = React.createClass ({

render: function() {

return (

<h1>Hello, React!</h1>

);

}

});

SD4x-3.2 43







return (


);

}

});

SD4x-3.2 44







return (


);

}

});

SD4x-3.2 45







return (


);

}

});

SD4x-3.2 46







return (


);

}

});

SD4x-3.2 47







return (


);

}

});

SD4x-3.2 48







return (


);

}

});

SD4x-3.2 49







return (


);

}

});

SD4x-3.2 50





• Once we create the custom component, we can render it in the same way as HTML elements



return (


);

}

});

ReactDOM.render(

<HelloComponent />,


);

SD4x-3.2 51








return (


);

}

});

ReactDOM.render(

<HelloComponent />,


);

SD4x-3.2 52








return (


);

}

});

ReactDOM.render(

<HelloComponent />,


);

SD4x-3.2 53








return (


);

}

});

ReactDOM.render(

<HelloComponent />,


);

SD4x-3.2 54








return (


);

}

});

ReactDOM.render(

<HelloComponent />,


);

SD4x-3.2 55


Creating Custom Components – ES6

• ES6 is a more recent version of JavaScript syntax

• We can define a class instead of a single object

class HelloComponent extends React.Component {

render() {

return (


);

}

}

ReactDOM.render(

<HelloComponent />,


);

SD4x-3.2 56






render() {

return (


);

}

}

ReactDOM.render(

<HelloComponent />,


);

SD4x-3.2 57






render() {

return (


);

}

}

ReactDOM.render(

<HelloComponent />,


);

SD4x-3.2 58






render() {

return (


);

}

}

ReactDOM.render(

<HelloComponent />,


);

SD4x-3.2 59






render() {

return (


);

}

}

ReactDOM.render(

<HelloComponent />,


);

SD4x-3.2 60






render() {

return (


);

}

}

ReactDOM.render(

<HelloComponent />,


);

SD4x-3.2 61


React Component Attributes

• Properties

• Attributes and values that are set when the component is created

• Should never be modified after initialization

SD4x-3.2 62



• Properties



• State

• Attributes and values that represent the current state of the component, based on what it does/represents

• Can be modified during the component’s lifecycle

SD4x-3.2 63



• Properties



• State

• Attributes and values that represent the current state of the component, based on what it does/represents

• Can be modified during the component’s lifecycle

• Both properties and state can be used when rendering the component

SD4x-3.2 64


Component Properties

• Should always be assigned upon object creation, never modified afterward

• Component accesses its properties through this.props

SD4x-3.2 65





ReactDOM.render(

<HelloUser name="Maria" />,


);

SD4x-3.2 66





ReactDOM.render(



);

SD4x-3.2 67





ReactDOM.render(



);

SD4x-3.2 68





class HelloUser extends React.Component {

render() {

return (

<h1>Hello {this.props.name}!</h1>

);

}

}

ReactDOM.render(



);

SD4x-3.2 69






render() {

return (


);

}

}

ReactDOM.render(



);

SD4x-3.2 70






render() {

return (


);

}

}

ReactDOM.render(



);

SD4x-3.2 71






render() {

return (


);

}

}

ReactDOM.render(



);

SD4x-3.2 72






render() {

return (


);

}

}

ReactDOM.render(



);

SD4x-3.2 73






render() {

return (


);

}

}

ReactDOM.render(



);

SD4x-3.2 74






render() {

return (


);

}

}

ReactDOM.render(



);

SD4x-3.2 75






render() {

return (


);

}

}

ReactDOM.render(



);

SD4x-3.2 76






render() {

return (


);

}

}

ReactDOM.render(



);

SD4x-3.2 77


Component State

• The set of variables that can change during the component’s lifecycle

• Should be initialized in the constructor

• Component accesses its state through this.state

SD4x-3.2 78


class TimesViewed extends React.Component {

constructor(props) {

super(props);

var timesViewed = 0;

if (localStorage.timesViewed) {

timesViewed = localStorage.timesViewed;

}

timesViewed++;

this.state = { numViews: timesViewed };

localStorage.timesViewed = timesViewed;

}

render() {

return <b>{this.state.numViews}</b>;

}

}

ReactDOM.render(

<TimesViewed />,


);

SD4x-3.2 79




super(props);




}

timesViewed++;



}

render() {


}

}

ReactDOM.render(

<TimesViewed />,


);

SD4x-3.2 80




super(props);




}

timesViewed++;



}

render() {


}

}

ReactDOM.render(

<TimesViewed />,


);

SD4x-3.2 81




super(props);




}

timesViewed++;



}

render() {


}

}

ReactDOM.render(

<TimesViewed />,


);

SD4x-3.2 82




super(props);




}

timesViewed++;



}

render() {


}

}

ReactDOM.render(

<TimesViewed />,


);

SD4x-3.2 83




super(props);




}

timesViewed++;



}

render() {


}

}

ReactDOM.render(

<TimesViewed />,


);

SD4x-3.2 84




super(props);




}

timesViewed++;



}

render() {


}

}

ReactDOM.render(

<TimesViewed />,


);

SD4x-3.2 85




super(props);




}

timesViewed++;



}

render() {


}

}

ReactDOM.render(

<TimesViewed />,


);

SD4x-3.2 86




super(props);




}

timesViewed++;



}

render() {


}

}

ReactDOM.render(

<TimesViewed />,


);

SD4x-3.2 87




super(props);




}

timesViewed++;



}

render() {


}

}

ReactDOM.render(

<TimesViewed />,


);

SD4x-3.2 88




super(props);




}

timesViewed++;



}

render() {


}

}

ReactDOM.render(

<TimesViewed />,


);

SD4x-3.2 89




super(props);




}

timesViewed++;



}

render() {


}

}

ReactDOM.render(

<TimesViewed />,


);

SD4x-3.2 90




super(props);




}

timesViewed++;



}

render() {


}

}

ReactDOM.render(

<TimesViewed />,


);

SD4x-3.2 91




super(props);




}

timesViewed++;



}

render() {


}

}

ReactDOM.render(

<TimesViewed />,


);

SD4x-3.2 92




super(props);




}

timesViewed++;



}

render() {


}

}

ReactDOM.render(

<TimesViewed />,


);

SD4x-3.2 93




super(props);




}

timesViewed++;



}

render() {


}

}

ReactDOM.render(

<TimesViewed />,


);

SD4x-3.2 94


Component Lifecycle

• The React VirtualDOM invokes callback functions on components during their lifecycle

• These functions fall into three categories:

• Mounting

• Updating

• Unmounting

• You can optionally implement these for controlling the component

SD4x-3.2 95


Component Lifecycle: Mounting

• Called when a component is being created and added to the VirtualDOM

• constructor: creates component, initializes state based on properties

• componentWillMount: invoked before component is added to VirtualDOM

• componentDidMount: invoked after component has been added to VirtualDOM and has been rendered

SD4x-3.2 96


Component Lifecycle: Updating

• Called when a component’s props or state is changing and the component is re-rendered

• componentWillReceiveProps: invoked before receiving new props, e.g. when its parent component re-renders

• shouldComponentUpdate: can be used to determine whether to re-render

• componentWillUpdate: invoked before re-rendering after change to state

• componentDidUpdate: invoked after being re-rendered

SD4x-3.2 97


Component Lifecycle: Unmounting

• Called when a component is being removed from the VirtualDOM

• componentWillUnmount: invoked before component is removed from VirtualDOM and destroyed

SD4x-3.2 98


Summary

• React components are JavaScript objects that can be used as HTML elements in the VirtualDOM

• A component’s render() function is used to render its HTML

• A component’s properties are assigned when it is created

• A component’s state can change during its lifecycle

• A component’s lifecycle functions are invoked depending on relevant activities

SD4x-3.2 99

Video 3.3

React Events

Chris Murphy

SD4x-3.3 100


Review

• React allows us to insert JavaScript elements/components into VirtualDOM

• We can create additional components using the React.Component class as a base

• Components have two types of attributes

• Properties: set at initialization and immutable thereafter

• State: change in response to user events

• Component callback functions can be bound to HTML events

SD4x-3.3 101


Changing Component State

• A component’s state typically changes in response to some user action or “event”

• We can bind an event to a callback function within a React component

• That component can then change state using its setState function

• This will automatically re-render the component and any other affected component

SD4x-3.3 102

Property of Penn Engineering, Chris Murphy SD4x-3.3 103



class Counter extends React.Component {


super(props);

this.state = { count: 0 };

}

incrementCount() { // callback function

this.setState( { count: this.state.count + 1; } );

}

render() { // invoked when setState is called

return (

<div> Count: { this.state.count }

<button type="button"

onClick={ this.incrementCount.bind(this); } >

Increment

</button>

</div>

);

}

};

SD4x-3.3 105




super(props);


}



}


return (




Increment

</button>

</div>

);

}

};

SD4x-3.3 106




super(props);


}



}


return (




Increment

</button>

</div>

);

}

};

SD4x-3.3 107




super(props);


}



}


return (




Increment

</button>

</div>

);

}

};

SD4x-3.3 108




super(props);


}



}


return (




Increment

</button>

</div>

);

}

};

SD4x-3.3 109




super(props);


}



}


return (




Increment

</button>

</div>

);

}

};

SD4x-3.3 110




super(props);


}



}


return (




Increment

</button>

</div>

);

}

};

SD4x-3.3 111




super(props);


}



}


return (




Increment

</button>

</div>

);

}

};

SD4x-3.3 112




super(props);


}



}


return (




Increment

</button>

</div>

);

}

};

SD4x-3.3 113




super(props);


}



}


return (




Increment

</button>

</div>

);

}

};

SD4x-3.3 114




super(props);


}



}


return (




Increment

</button>

</div>

);

}

};

SD4x-3.3 115




super(props);


}



}


return (




Increment

</button>

</div>

);

}

};

SD4x-3.3 116




super(props);


}



}


return (




Increment

</button>

</div>

);

}

};

SD4x-3.3 117




super(props);


}



}


return (




Increment

</button>

</div>

);

}

};

SD4x-3.3 118




super(props);


}



}


return (




Increment

</button>

</div>

);

}

};

SD4x-3.3 119




super(props);


}



}


return (




Increment

</button>

</div>

);

}

};

SD4x-3.3 120




super(props);


}



}


return (




Increment

</button>

</div>

);

}

};

SD4x-3.3 121









ReactDOM.render(

<div>

<LikeButton name="Java" />

<LikeButton name="JavaScript" />

</div>,

document.getElementById('container'));

SD4x-3.3 129


ReactDOM.render(

<div>



</div>,


SD4x-3.3 130


ReactDOM.render(

<div>



</div>,


SD4x-3.3 131


ReactDOM.render(

<div>



</div>,


SD4x-3.3 132


ReactDOM.render(

<div>



</div>,


SD4x-3.3 133


ReactDOM.render(

<div>



</div>,


SD4x-3.3 134


class LikeButton extends React.Component {


super(props);

this.state = { liked : false };

}

toggle() {

this.setState( {liked: !this.state.liked} );

}

render() {

var name = this.props.name;

var txt = this.state.liked ? 'Unlike' : 'Like';

var myColor = this.state.liked ? 'red' : 'black';

var weight = this.state.liked ? 'bold' : 'normal';

return (

<p><span style={{color:myColor, fontWeight:weight }}>

{name} </span>

<span onClick={this.toggle.bind(this)}>

{'\ud83d\udc4d' + txt}

</span> </p> );

}

};

SD4x-3.3 135




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 136




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 137




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 138




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 139




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 140




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 141




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 142




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 143




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 144




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 145




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 146




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 147




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 148




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 149




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 150




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 151




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 152




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 153




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 154




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 155




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 156




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 157




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 158




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 159




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 160




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 161




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 162




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 163




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 164




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 165




super(props);


}

toggle() {


}

render() {





return (


{name} </span>



</span> </p> );

}

};

SD4x-3.3 166







class MyText extends React.Component {


super(props);

this.state = { bold : false, color : 'black' };

}

handleMouseOver() {

this.setState( { bold : true } );

}

handleMouseOut() {

this.setState( { bold: false } );

}

handleClick() {

if (this.state.color == 'red' )

this.setState( { color: 'black' } );

else

this.setState( { color: 'red' } );

}

. . .

SD4x-3.3 172




super(props);


}

handleMouseOver() {


}

handleMouseOut() {


}

handleClick() {



else


}

. . .

SD4x-3.3 173




super(props);


}

handleMouseOver() {


}

handleMouseOut() {


}

handleClick() {



else


}

. . .

SD4x-3.3 174




super(props);


}

handleMouseOver() {


}

handleMouseOut() {


}

handleClick() {



else


}

. . .

SD4x-3.3 175




super(props);


}

handleMouseOver() {


}

handleMouseOut() {


}

handleClick() {



else


}

. . .

SD4x-3.3 176




super(props);


}

handleMouseOver() {


}

handleMouseOut() {


}

handleClick() {



else


}

. . .

SD4x-3.3 177




super(props);


}

handleMouseOver() {


}

handleMouseOut() {


}

handleClick() {



else


}

. . .

SD4x-3.3 178




super(props);


}

handleMouseOver() {


}

handleMouseOut() {


}

handleClick() {



else


}

. . .

SD4x-3.3 179




super(props);


}

handleMouseOver() {


}

handleMouseOut() {


}

handleClick() {



else


}

. . .

SD4x-3.3 180




super(props);


}

handleMouseOver() {


}

handleMouseOut() {


}

handleClick() {



else


}

. . .

SD4x-3.3 181




super(props);


}

handleMouseOver() {


}

handleMouseOut() {


}

handleClick() {



else


}

. . .

SD4x-3.3 182




super(props);


}

handleMouseOver() {


}

handleMouseOut() {


}

handleClick() {



else


}

. . .

SD4x-3.3 183




super(props);


}

handleMouseOver() {


}

handleMouseOut() {


}

handleClick() {



else


}

. . .

SD4x-3.3 184




super(props);


}

handleMouseOver() {


}

handleMouseOut() {


}

handleClick() {



else


}

. . .

SD4x-3.3 185



. . .

render () {

var myColor = this.state.color;

var weight = this.state.bold ? 'bold' : 'normal' ;

return (

<span style={ {color:myColor, fontWeight:weight} }

onClick={this.handleClick.bind(this)}

onMouseOver={this.handleMouseOver.bind(this)}

onMouseOut={this.handleMouseOut.bind(this)} >

{this.props.text}

</span>

);

}

};

ReactDOM.render(

<div><MyText text="Look at me!" /></div>,


);

SD4x-3.3 186



. . .

render () {



return (





{this.props.text}

</span>

);

}

};

ReactDOM.render(



);

SD4x-3.3 187



. . .

render () {



return (





{this.props.text}

</span>

);

}

};

ReactDOM.render(



);

SD4x-3.3 188



. . .

render () {



return (





{this.props.text}

</span>

);

}

};

ReactDOM.render(



);

SD4x-3.3 189



. . .

render () {



return (





{this.props.text}

</span>

);

}

};

ReactDOM.render(



);

SD4x-3.3 190



. . .

render () {



return (





{this.props.text}

</span>

);

}

};

ReactDOM.render(



);

SD4x-3.3 191



. . .

render () {



return (





{this.props.text}

</span>

);

}

};

ReactDOM.render(



);

SD4x-3.3 192



. . .

render () {



return (





{this.props.text}

</span>

);

}

};

ReactDOM.render(



);

SD4x-3.3 193



. . .

render () {



return (





{this.props.text}

</span>

);

}

};

ReactDOM.render(



);

SD4x-3.3 194



. . .

render () {



return (





{this.props.text}

</span>

);

}

};

ReactDOM.render(



);

SD4x-3.3 195



. . .

render () {



return (





{this.props.text}

</span>

);

}

};

ReactDOM.render(



);

SD4x-3.3 196



. . .

render () {



return (





{this.props.text}

</span>

);

}

};

ReactDOM.render(



);

SD4x-3.3 197


Summary

• We can bind user events in HTML elements to callback functions in React components

• When we invoke a component’s setStatefunction, the render function will automatically be called and the component’s appearance can change accordingly

SD4x-3.3 198

Video 3.4

React Component Interaction

Chris Murphy

SD4x-3.4 199


Review

• We can bind user events in HTML elements to callback functions in React components

• When we invoke a component’s setStatefunction, the render function will automatically be called and the component’s appearance can change accordingly

• Re-rendering one component may necessitate re-rendering others as well

SD4x-3.4 200





class FilteredList extends React.Component {


super(props);

var allItems = [ "Anteater", "Bear", "Cat",

"Dog", "Elephant" ];

this.state = { initialItems: allItems,

currentItems: allItems };

}

filterList(input) { // callback function

var updatedList = this.state.initialItems;

updatedList = updatedList.filter(function(item){

return item.search(input.target.value) !== -1;

});

this.setState( { currentItems: updatedList } );

}

. . .

SD4x-3.4 204




super(props);





}





});


}

. . .

SD4x-3.4 205




super(props);





}





});


}

. . .

SD4x-3.4 206




super(props);





}





});


}

. . .

SD4x-3.4 207




super(props);





}





});


}

. . .

SD4x-3.4 208




super(props);





}





});


}

. . .

SD4x-3.4 209




super(props);





}





});


}

. . .

SD4x-3.4 210




super(props);





}





});


}

. . .

SD4x-3.4 211




super(props);





}





});


}

. . .

SD4x-3.4 212




super(props);





}





});


}

. . .

SD4x-3.4 213




super(props);





}





});


}

. . .

SD4x-3.4 214




super(props);





}





});


}

. . .

SD4x-3.4 215




super(props);





}





});


}

. . .

SD4x-3.4 216




super(props);





}





});


}

. . .

SD4x-3.4 217




super(props);





}





});


}

. . .

SD4x-3.4 218




super(props);





}





});


}

. . .

SD4x-3.4 219




super(props);





}





});


}

. . .

SD4x-3.4 220




super(props);





}





});


}

. . .

SD4x-3.4 221




super(props);





}





});


}

. . .

SD4x-3.4 222



. . .

render(){

return (

<div><input type="text" placeholder="Search"

onChange={this.filterList.bind(this)}/>

<ListItems items={this.state.currentItems}/>

</div>

);

}

};

class ListItems extends React.Component {

render(){

return (

<ul> { this.props.items.map(function(item) {

return <li key={item}> {item} </li> } ) } </ul>

);

}

};

ReactDOM.render(<FilteredList/>,


SD4x-3.4 223



. . .

render(){

return (




</div>

);

}

};


render(){

return (



);

}

};



SD4x-3.4 224



. . .

render(){

return (




</div>

);

}

};


render(){

return (



);

}

};



SD4x-3.4 225



. . .

render(){

return (




</div>

);

}

};


render(){

return (



);

}

};



SD4x-3.4 226



. . .

render(){

return (




</div>

);

}

};


render(){

return (



);

}

};



SD4x-3.4 227



. . .

render(){

return (




</div>

);

}

};


render(){

return (



);

}

};



SD4x-3.4 228



. . .

render(){

return (




</div>

);

}

};


render(){

return (



);

}

};



SD4x-3.4 229



. . .

render(){

return (




</div>

);

}

};


render(){

return (



);

}

};



SD4x-3.4 230



. . .

render(){

return (




</div>

);

}

};


render(){

return (



);

}

};



SD4x-3.4 231



. . .

render(){

return (




</div>

);

}

};


render(){

return (



);

}

};



SD4x-3.4 232



. . .

render(){

return (




</div>

);

}

};


render(){

return (



);

}

};



SD4x-3.4 233



. . .

render(){

return (




</div>

);

}

};


render(){

return (



);

}

};



SD4x-3.4 234



. . .

render(){

return (




</div>

);

}

};


render(){

return (



);

}

};



SD4x-3.4 235



. . .

render(){

return (




</div>

);

}

};


render(){

return (



);

}

};



SD4x-3.4 236



. . .

render(){

return (




</div>

);

}

};


render(){

return (



);

}

};



SD4x-3.4 237



. . .

render(){

return (




</div>

);

}

};


render(){

return (



);

}

};



SD4x-3.4 238



. . .

render(){

return (




</div>

);

}

};


render(){

return (



);

}

};



SD4x-3.4 239



. . .

render(){

return (




</div>

);

}

};


render(){

return (



);

}

};



SD4x-3.4 240



. . .

render(){

return (




</div>

);

}

};


render(){

return (



);

}

};



SD4x-3.4 241







class TodoApp extends React.Component {


super(props);

this.state = {items: [], text: ' ', id: 0};

}

handleChange(e) {

this.setState( { text: e.target.value } );

}

handleSubmit(e) {

e.preventDefault(); // so as not to reload the page

var newItem = { text: this.state.text,

id: this.state.id };

this.setState( {

items: this.state.items.concat(newItem),

text: ' ',

id: this.state.id + 1

});

}

SD4x-3.4 247




super(props);


}

handleChange(e) {


}

handleSubmit(e) {




this.setState( {


text: ' ',


});

}

SD4x-3.4 248




super(props);


}

handleChange(e) {


}

handleSubmit(e) {




this.setState( {


text: ' ',


});

}

SD4x-3.4 249




super(props);


}

handleChange(e) {


}

handleSubmit(e) {




this.setState( {


text: ' ',


});

}

SD4x-3.4 250




super(props);


}

handleChange(e) {


}

handleSubmit(e) {




this.setState( {


text: ' ',


});

}

SD4x-3.4 251




super(props);


}

handleChange(e) {


}

handleSubmit(e) {




this.setState( {


text: ' ',


});

}

SD4x-3.4 252




super(props);


}

handleChange(e) {


}

handleSubmit(e) {




this.setState( {


text: ' ',


});

}

SD4x-3.4 253




super(props);


}

handleChange(e) {


}

handleSubmit(e) {




this.setState( {


text: ' ',


});

}

SD4x-3.4 254




super(props);


}

handleChange(e) {


}

handleSubmit(e) {




this.setState( {


text: ' ',


});

}

SD4x-3.4 255




super(props);


}

handleChange(e) {


}

handleSubmit(e) {




this.setState( {


text: ' ',


});

}

SD4x-3.4 256




super(props);


}

handleChange(e) {


}

handleSubmit(e) {




this.setState( {


text: ' ',


});

}

SD4x-3.4 257




super(props);


}

handleChange(e) {


}

handleSubmit(e) {




this.setState( {


text: ' ',


});

}

SD4x-3.4 258




super(props);


}

handleChange(e) {


}

handleSubmit(e) {




this.setState( {


text: ' ',


});

}

SD4x-3.4 259




super(props);


}

handleChange(e) {


}

handleSubmit(e) {




this.setState( {


text: ' ',


});

}

SD4x-3.4 260




super(props);


}

handleChange(e) {


}

handleSubmit(e) {




this.setState( {


text: ' ',


});

}

SD4x-3.4 261




super(props);


}

handleChange(e) {


}

handleSubmit(e) {




this.setState( {


text: ' ',


});

}

SD4x-3.4 262




super(props);


}

handleChange(e) {


}

handleSubmit(e) {




this.setState( {


text: ' ',


});

}

SD4x-3.4 263




super(props);


}

handleChange(e) {


}

handleSubmit(e) {




this.setState( {


text: ' ',


});

}

SD4x-3.4 264




super(props);


}

handleChange(e) {


}

handleSubmit(e) {




this.setState( {


text: ' ',


});

}

SD4x-3.4 265



. . .

render() {

return (

<div>

<h3>TO-DO LIST</h3>

<TodoList items={this.state.items} />

<form onSubmit={this.handleSubmit.bind(this)}>

<input onChange={this.handleChange.bind(this)}

value={this.state.text} />

<button>Add</button>

</form>

</div>

);

}

};

SD4x-3.4 266



. . .

render() {

return (

<div>

<h3>TO-DO LIST</h3>






</form>

</div>

);

}

};

SD4x-3.4 267



. . .

render() {

return (

<div>

<h3>TO-DO LIST</h3>






</form>

</div>

);

}

};

SD4x-3.4 268



. . .

render() {

return (

<div>

<h3>TO-DO LIST</h3>






</form>

</div>

);

}

};

SD4x-3.4 269



. . .

render() {

return (

<div>

<h3>TO-DO LIST</h3>






</form>

</div>

);

}

};

SD4x-3.4 270



. . .

render() {

return (

<div>

<h3>TO-DO LIST</h3>






</form>

</div>

);

}

};

SD4x-3.4 271



. . .

render() {

return (

<div>

<h3>TO-DO LIST</h3>






</form>

</div>

);

}

};

SD4x-3.4 272



. . .

render() {

return (

<div>

<h3>TO-DO LIST</h3>






</form>

</div>

);

}

};

SD4x-3.4 273



. . .

render() {

return (

<div>

<h3>TO-DO LIST</h3>






</form>

</div>

);

}

};

SD4x-3.4 274



. . .

render() {

return (

<div>

<h3>TO-DO LIST</h3>






</form>

</div>

);

}

};

SD4x-3.4 275


class TodoList extends React.Component {

render() {

return (

<ul>

{this.props.items.map(function (item) {

return

<TodoItem id={item.id} text={item.text}/>

})}

</ul>

);

}

}


. . .

render() {

return (

. . .


. . .

SD4x-3.4 276



render() {

return (

<ul>


return


})}

</ul>

);

}

}


. . .

render() {

return (

. . .


. . .

SD4x-3.4 277



render() {

return (

<ul>


return


})}

</ul>

);

}

}


. . .

render() {

return (

. . .


. . .

SD4x-3.4 278



render() {

return (

<ul>


return


})}

</ul>

);

}

}


. . .

render() {

return (

. . .


. . .

SD4x-3.4 279



render() {

return (

<ul>


return


})}

</ul>

);

}

}


. . .

render() {

return (

. . .


. . .

SD4x-3.4 280



render() {

return (

<ul>


return


})}

</ul>

);

}

}


. . .

render() {

return (

. . .


. . .

SD4x-3.4 281



render() {

return (

<ul>


return


})}

</ul>

);

}

}


. . .

render() {

return (

. . .


. . .

SD4x-3.4 282



render() {

return (

<ul>


return


})}

</ul>

);

}

}


. . .

render() {

return (

. . .


. . .

SD4x-3.4 283



render() {

return (

<ul>


return


})}

</ul>

);

}

}


. . .

render() {

return (

. . .


. . .

SD4x-3.4 284



render() {

return (

<ul>


return


})}

</ul>

);

}

}


. . .

render() {

return (

. . .


. . .

SD4x-3.4 285



render() {

return (

<ul>


return


})}

</ul>

);

}

}


. . .

render() {

return (

. . .


. . .

SD4x-3.4 286



render() {

return (

<ul>


return


})}

</ul>

);

}

}


. . .

render() {

return (

. . .


. . .

SD4x-3.4 287



render() {

return (

<ul>


return


})}

</ul>

);

}

}


. . .

render() {

return (

. . .


. . .

SD4x-3.4 288


class TodoItem extends React.Component {


super(props);

this.state = { amDone: false };

}

handleClick() {

this.setState( { amDone: !this.state.amDone} );

}

render() {

var line = this.state.amDone ? 'line-through' : 'none';

return (

<li key={this.props.id}


style={{textDecoration:line}}>

{this.props.text} </li>

);

}

}

SD4x-3.4 289




super(props);


}

handleClick() {


}

render() {


return (





);

}

}

SD4x-3.4 290




super(props);


}

handleClick() {


}

render() {


return (





);

}

}

SD4x-3.4 291




super(props);


}

handleClick() {


}

render() {


return (





);

}

}

SD4x-3.4 292




super(props);


}

handleClick() {


}

render() {


return (





);

}

}

SD4x-3.4 293




super(props);


}

handleClick() {


}

render() {


return (





);

}

}

SD4x-3.4 294




super(props);


}

handleClick() {


}

render() {


return (





);

}

}

SD4x-3.4 295




super(props);


}

handleClick() {


}

render() {


return (





);

}

}

SD4x-3.4 296




super(props);


}

handleClick() {


}

render() {


return (





);

}

}

SD4x-3.4 297




super(props);


}

handleClick() {


}

render() {


return (





);

}

}

SD4x-3.4 298




super(props);


}

handleClick() {


}

render() {


return (





);

}

}

SD4x-3.4 299




super(props);


}

handleClick() {


}

render() {


return (





);

}

}

SD4x-3.4 300




super(props);


}

handleClick() {


}

render() {


return (





);

}

}

SD4x-3.4 301




super(props);


}

handleClick() {


}

render() {


return (





);

}

}

SD4x-3.4 302


Review

• React allows us to create reusable, modularized components that can be combined to form web applications

• React handles re-rendering of components based on the structure of VirtualDOM

SD4x-3.4 303

Video 3.5

React Component Interaction – part 2

Chris Murphy

SD4x-3.5 304


Review


• React handles re-rendering of components based on the structure of VirtualDOM

SD4x-3.5 305













class Multiplier extends React.Component {


super(props);

this.state = { input1: 0, input2: 0, product: 0 };

this.multiply = this.multiply.bind(this);

}

multiply(id, val) {

if (id == 1) {

this.setState( { input1: val,

product: val * this.state.input2 } );

}

else if (id == 2) {


product: this.state.input1 * val } );

}

}

. . .

SD4x-3.5 317




super(props);



}

multiply(id, val) {

if (id == 1) {



}

else if (id == 2) {



}

}

. . .

SD4x-3.5 318




super(props);



}

multiply(id, val) {

if (id == 1) {



}

else if (id == 2) {



}

}

. . .

SD4x-3.5 319




super(props);



}

multiply(id, val) {

if (id == 1) {



}

else if (id == 2) {



}

}

. . .

SD4x-3.5 320




super(props);



}

multiply(id, val) {

if (id == 1) {



}

else if (id == 2) {



}

}

. . .

SD4x-3.5 321




super(props);



}

multiply(id, val) {

if (id == 1) {



}

else if (id == 2) {



}

}

. . .

SD4x-3.5 322




super(props);



}

multiply(id, val) {

if (id == 1) {



}

else if (id == 2) {



}

}

. . .

SD4x-3.5 323




super(props);



}

multiply(id, val) {

if (id == 1) {



}

else if (id == 2) {



}

}

. . .

SD4x-3.5 324




super(props);



}

multiply(id, val) {

if (id == 1) {



}

else if (id == 2) {



}

}

. . .

SD4x-3.5 325




super(props);



}

multiply(id, val) {

if (id == 1) {



}

else if (id == 2) {



}

}

. . .

SD4x-3.5 326




super(props);



}

multiply(id, val) {

if (id == 1) {



}

else if (id == 2) {



}

}

. . .

SD4x-3.5 327




super(props);



}

multiply(id, val) {

if (id == 1) {



}

else if (id == 2) {



}

}

. . .

SD4x-3.5 328




super(props);



}

multiply(id, val) {

if (id == 1) {



}

else if (id == 2) {



}

}

. . .

SD4x-3.5 329




super(props);



}

multiply(id, val) {

if (id == 1) {



}

else if (id == 2) {



}

}

. . .

SD4x-3.5 330




super(props);



}

multiply(id, val) {

if (id == 1) {



}

else if (id == 2) {



}

}

. . .

SD4x-3.5 331




super(props);



}

multiply(id, val) {

if (id == 1) {



}

else if (id == 2) {



}

}

. . .

SD4x-3.5 332




super(props);



}

multiply(id, val) {

if (id == 1) {



}

else if (id == 2) {



}

}

. . .

SD4x-3.5 333



. . .

render() {

return (

<div>

<NumberInputField id="1" action={this.multiply}/>


<OutputField product={this.state.product}/>

</div>

);

}

}

SD4x-3.5 334



. . .

render() {

return (

<div>




</div>

);

}

}

SD4x-3.5 335



. . .

render() {

return (

<div>




</div>

);

}

}

SD4x-3.5 336



. . .

render() {

return (

<div>




</div>

);

}

}

SD4x-3.5 337



. . .

render() {

return (

<div>




</div>

);

}

}

SD4x-3.5 338



. . .

render() {

return (

<div>




</div>

);

}

}

SD4x-3.5 339



. . .

render() {

return (

<div>




</div>

);

}

}

SD4x-3.5 340



. . .


. . .

SD4x-3.5 341

class NumberInputField extends React.Component {


super(props);

this.handleChange = this.handleChange.bind(this);

}

handleChange(e) {

this.props.action(this.props.id, e.target.value);

}

render() {

return(

<input onChange={this.handleChange}></input>

);

}

}



. . .


. . .

SD4x-3.5 342



super(props);


}

handleChange(e) {


}

render() {

return(


);

}

}



. . .


. . .

SD4x-3.5 343



super(props);


}

handleChange(e) {


}

render() {

return(


);

}

}



. . .


. . .

SD4x-3.5 344



super(props);


}

handleChange(e) {


}

render() {

return(


);

}

}



. . .


. . .

SD4x-3.5 345



super(props);


}

handleChange(e) {


}

render() {

return(


);

}

}



. . .


. . .

SD4x-3.5 346



super(props);


}

handleChange(e) {


}

render() {

return(


);

}

}



. . .


. . .

SD4x-3.5 347



super(props);


}

handleChange(e) {


}

render() {

return(


);

}

}



. . .


. . .

SD4x-3.5 348



super(props);


}

handleChange(e) {


}

render() {

return(


);

}

}



. . .


. . .

SD4x-3.5 349



super(props);


}

handleChange(e) {


}

render() {

return(


);

}

}



. . .


. . .

SD4x-3.5 350



super(props);


}

handleChange(e) {


}

render() {

return(


);

}

}



. . .


. . .

SD4x-3.5 351



super(props);


}

handleChange(e) {


}

render() {

return(


);

}

}



. . .


. . .

SD4x-3.5 352



super(props);


}

handleChange(e) {


}

render() {

return(


);

}

}



. . .


. . .

SD4x-3.5 353



super(props);


}

handleChange(e) {


}

render() {

return(


);

}

}



. . .

multiply(id, val) {

if (id == 1) {



}

else if (id == 2) {



}

}

. . .

SD4x-3.5 354



. . .

multiply(id, val) {

if (id == 1) {



}

else if (id == 2) {



}

}

. . .

SD4x-3.5 355



. . .

multiply(id, val) {

if (id == 1) {



}

else if (id == 2) {



}

}

. . .

SD4x-3.5 356


class OutputField extends React.Component {

render() {

return(

<div>The product is {this.props.product}.

</div>

);

}

}

ReactDOM.render(<Multiplier/>,



. . .


. . .

SD4x-3.5 357



render() {

return(


</div>

);

}

}




. . .


. . .

SD4x-3.5 358



render() {

return(


</div>

);

}

}




. . .


. . .

SD4x-3.5 359



render() {

return(


</div>

);

}

}




. . .


. . .

SD4x-3.5 360



render() {

return(


</div>

);

}

}




. . .


. . .

SD4x-3.5 361



render() {

return(


</div>

);

}

}




. . .


. . .

SD4x-3.5 362



render() {

return(


</div>

);

}

}




. . .


. . .

SD4x-3.5 363



render() {

return(


</div>

);

}

}




. . .


. . .

SD4x-3.5 364


Review


• Components can communicate with each other via callback methods that are set as props

SD4x-3.5 365

Video 3.6

React and APIs

Chris Murphy

SD4x-3.6 366


Review

• React allows us to create modular JavaScript components that we can use in our HTML pages to develop web applications

• How can we take advantage of the modular nature of the Web?

SD4x-3.6 367


Web development in the old days

SD4x-3.6 368


Designing software for the Web

• How can we make this better?

• Use design paradigms with the following goals:

• Break up code into distinct components

• The components interact with each other in a “standard” manner

• Makes it easy to change any component

• Less dependency and coupling

SD4x-3.6 369


Service-Oriented Architecture

• Letter by Jeff Bezos to all employees at Amazon (circa 2002)

• “All teams will henceforth expose their data and functionality through service interfaces.”

• “The only communication allowed is via service interface calls over the network.”

• “All service interfaces, without exception, must be designed from the ground up to be externalizable. That is to say, the team must plan and design to be able to expose the interface to developers in the outside world. No exceptions.”

SD4x-3.6 370


Software as a Service (SaaS)

• Extends the idea of Service-oriented Architecture

• SaaS – entire software runs as a service

• Examples

• Google Docs (as opposed to Microsoft Word)

• Gmail (as opposed to email clients like Outlook)

• Cloud9 (as opposed to Eclipse)

SD4x-3.6 371


Software as a Service: Advantages

• No user installation is needed

• Less likely to lose data

• Users can collaborate with each other

• Upgrading software and datasets is easy

• Software is centralized in a single environment (don’t need to worry about versions of operating systems, etc.)

• User’s computer (hardware and software specifications) don’t matter – usually all that’s needed is a web browser

SD4x-3.6 372


Microservices

SD4x-3.6 373


Microservices

SD4x-3.6 374


REST

• How do well-designed web servers behave?

• Define a set of rules and conventions

• REST: REpresentational State Transfer

• Collection of resources on which specific operations can be performed

• URI names resources, not pages or actions

• Self-contained - which resource, what to do with it, server doesn’t need to maintain state between requests

SD4x-3.6 375


What is an API?

• An API is an Application Programming Interface

• In web programming, an API is a URL or a set of URLs that returns pure data to requests

• APIs can be used to incorporate data and functionality from other sources in your webapp

SD4x-3.6 376


The New York Times

• The New York Times is an American daily newspaper company

• The New York Times provides a variety of APIs that provide article data, books data, movies data, and more

• You can see more about available APIs and request access at https://developer.nytimes.com/

SD4x-3.6 377


Our Goal

• Created a webapp that creates a dashboard of clickable New York Times article images

SD4x-3.6 378


Getting Started

• Request a developer key for the Article Search API at https://developer.nytimes.com/

• You can test out the API and what the returned data looks like at https://developer.nytimes.com/article_search_v2.json

SD4x-3.6 379


Structure

• First, let’s create a new React component named ArticlesGrid to store the data in the page

class ArticlesGrid extends React.Component {

constructor (props) {

super(props);

this.state = {

articles: []

};

}

. . .

SD4x-3.6 380


Structure




super(props);

this.state = {

articles: []

};

}

. . .

SD4x-3.6 381


Structure




super(props);

this.state = {

articles: []

};

}

. . .

SD4x-3.6 382


Structure




super(props);

this.state = {

articles: []

};

}

. . .

SD4x-3.6 383


Getting Data

• Let’s start by getting some data from the API with a search term.

• We will do this with jQuery AJAXclass ArticlesGrid extends React.Component {

. . .

componentDidMount () {

var url=

'http://api.nytimes.com/svc/search/v2/articlesearch.json?'

+ 'api-key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

$.getJSON(url, function(data, status) {

return this.setState({articles: this.parse(data)});

}.bind(this));

}

. . .

SD4x-3.6 384


Getting Data



. . .


var url=





}.bind(this));

}

. . .

SD4x-3.6 385


Getting Data



. . .


var url=





}.bind(this));

}

. . .

SD4x-3.6 386


Getting Data


• We will do this with jQuery AJAX

SD4x-3.6 387


. . .


var url=





}.bind(this));

}

. . .


Getting Data



. . .


var url=





}.bind(this));

}

. . .

SD4x-3.6 388


Getting Data



. . .


var url=





}.bind(this));

}

. . .

SD4x-3.6 389


Getting Data



SD4x-3.6 390


. . .


var url=





}.bind(this));

}

. . .


Getting Data



SD4x-3.6 391


. . .


var url=





}.bind(this));

}

. . .


Getting Data



. . .


var url=





}.bind(this));

}

. . .

SD4x-3.6 392


Getting Data



. . .


var url=





}.bind(this));

}

. . .

SD4x-3.6 393


Getting Data



. . .


var url=





}.bind(this));

}

. . .

SD4x-3.6 394


Getting Data



. . .


var url=





}.bind(this));

}

. . .

SD4x-3.6 395


{

"response": {

"meta": {

"hits": 4251,

"time": 36,

"offset": 0

},

"docs": [

{

"web_url": "https://query.nytimes.com/gst/...",

"snippet": "Having invited Senator LA FOLLETTE to make a

statement of his cause and case in today's TIMES, we would

refer to it only with becoming courtesy. Its great lack must

be obvious to every reader. This is its extreme indefiniteness.

The Senator uses w...",

"lead_paragraph": "Having invited Senator LA FOLLETTE

to make a statement of his cause and case in today's TIMES,

we would refer to it only with becoming courtesy. Its great

lack must be obvious to every reader. This is its extreme

indefiniteness. The Senator uses with vehemence a great many

terms without defining one of them.",

. . .

}

{


"snippet": ”At Washington last week the spokesman...


{

"response": {

"meta": {

"hits": 4251,

"time": 36,

"offset": 0

},

"docs": [

{













. . .

}

{




{

"response": {

"meta": {

"hits": 4251,

"time": 36,

"offset": 0

},

"docs": [

{













. . .

}

{




{

"response": {

"meta": {

"hits": 4251,

"time": 36,

"offset": 0

},

"docs": [

{













. . .

}

{




{

"response": {

"meta": {

"hits": 4251,

"time": 36,

"offset": 0

},

"docs": [

{













. . .

}

{




{

"response": {

"meta": {

"hits": 4251,

"time": 36,

"offset": 0

},

"docs": [

{













. . .

}

{




{

"response": {

"meta": {

"hits": 4251,

"time": 36,

"offset": 0

},

"docs": [

{













. . .

}

{




Parsing Data

• The NY Times API will return a lot of raw data!

• Let’s parse the data into something we can use

• For each article, we’ll keep the image URL, title, and URL to original article if a large image exists

SD4x-3.6 403



. . .

parse(results) {

if( !results || !results.response ) return [];

var articles = results.response.docs;

var parsedArticles = [];

for (var i = 0; i < articles.length; i++) {

var article = articles[i];

if (article.multimedia.find(this.isXL)) {

parsedArticles.push({

id: article._id,

title: article.headline.main || 'Untitled',

imageURL: article.multimedia.find(this.isXL).url || '#',

webURL: article.web_url || '#'

});

}

}

return parsedArticles;

}

isXL (image) {

return image.subtype === 'xlarge';

}

SD4x-3.6 404



. . .

parse(results) {








id: article._id,




});

}

}


}

isXL (image) {


}

SD4x-3.6 405



. . .

parse(results) {








id: article._id,




});

}

}


}

isXL (image) {


}

SD4x-3.6 406



. . .

parse(results) {








id: article._id,




});

}

}


}

isXL (image) {


}

SD4x-3.6 407



. . .

parse(results) {








id: article._id,




});

}

}


}

isXL (image) {


}

SD4x-3.6 408



. . .

parse(results) {








id: article._id,




});

}

}


}

isXL (image) {


}

SD4x-3.6 409



. . .

parse(results) {








id: article._id,




});

}

}


}

isXL (image) {


}

SD4x-3.6 410



. . .

parse(results) {








id: article._id,




});

}

}


}

isXL (image) {


}

SD4x-3.6 411



. . .

parse(results) {








id: article._id,




});

}

}


}

isXL (image) {


}

SD4x-3.6 412



. . .

parse(results) {








id: article._id,




});

}

}


}

isXL (image) {


}

SD4x-3.6 413



. . .

parse(results) {








id: article._id,




});

}

}


}

isXL (image) {


}

SD4x-3.6 414



. . .

parse(results) {








id: article._id,




});

}

}


}

isXL (image) {


}

SD4x-3.6 415



. . .

parse(results) {








id: article._id,




});

}

}


}

isXL (image) {


}

SD4x-3.6 416



. . .

parse(results) {








id: article._id,




});

}

}


}

isXL (image) {


}

SD4x-3.6 417



. . .

parse(results) {








id: article._id,




});

}

}


}

isXL (image) {


}

SD4x-3.6 418


Displaying Data

• Now that we have the data, let’s make a component to display each article!

• This is shorthand for a component that only has a “render” function

var Article = function({article}) {

var imgURL = 'https://static01.nyt.com/' + article.imageURL;

return (

<div className='article'>

<a className='article-link' href={article.webURL}>

<img className='article-image'

title={article.title}

src={imgURL} />

</a>

</div>

);

}

SD4x-3.6 419


Displaying Data





return (





src={imgURL} />

</a>

</div>

);

}

SD4x-3.6 420


Displaying Data





return (





src={imgURL} />

</a>

</div>

);

}

SD4x-3.6 421


Displaying Data





return (





src={imgURL} />

</a>

</div>

);

}

SD4x-3.6 422


Displaying Data





return (





src={imgURL} />

</a>

</div>

);

}

SD4x-3.6 423


Displaying Data





return (





src={imgURL} />

</a>

</div>

);

}

SD4x-3.6 424


Displaying Data





return (





src={imgURL} />

</a>

</div>

);

}

SD4x-3.6 425


Displaying Data





return (





src={imgURL} />

</a>

</div>

);

}

SD4x-3.6 426


Displaying Data





return (





src={imgURL} />

</a>

</div>

);

}

SD4x-3.6 427


Displaying Data





return (





src={imgURL} />

</a>

</div>

);

}

SD4x-3.6 428


Displaying Data





return (





src={imgURL} />

</a>

</div>

);

}

SD4x-3.6 429


Displaying Data





return (





src={imgURL} />

</a>

</div>

);

}

SD4x-3.6 430


Displaying Data





return (





src={imgURL} />

</a>

</div>

);

}

SD4x-3.6 431


Displaying Data





return (





src={imgURL} />

</a>

</div>

);

}

SD4x-3.6 432


Displaying Data

• Finally, we can render the Articles Grid to tie it all together.


. . .

render () {

return this.state.articles && (

<div className='articles'>

{ this.state.articles.map( function (article) {

return <Article article={article} key={article._id} />;

})}

</div>

);

}

SD4x-3.6 433


Displaying Data



. . .

render () {





})}

</div>

);

}

SD4x-3.6 434


Displaying Data



. . .

render () {





})}

</div>

);

}

SD4x-3.6 435


Displaying Data



. . .

render () {





})}

</div>

);

}

SD4x-3.6 436


Displaying Data



. . .

render () {





})}

</div>

);

}

SD4x-3.6 437


Displaying Data



. . .

render () {





})}

</div>

);

}

SD4x-3.6 438


Displaying Data



. . .

render () {





})}

</div>

);

}

SD4x-3.6 439


Displaying Data



. . .

render () {





})}

</div>

);

}

SD4x-3.6 440


Displaying Data



. . .

render () {





})}

</div>

);

}

SD4x-3.6 441


Displaying Data



. . .

render () {





})}

</div>

);

}

SD4x-3.6 442


Displaying Data



. . .

render () {





})}

</div>

);

}

SD4x-3.6 443


Summary

• Service Oriented Architecture and Software as a Service (SaaS) simplify the creation of web applications by allowing for combinations of online components

• We can accesses services via RESTful APIs and develop React components to make use of them

SD4x-3.6 444

Video 3.7

React App Development

Chris Murphy

SD4x-3.7 445


Review

• React allows us to create web applications by developing reusable, modular components

• So far, we’ve seen how to define components within the HTML pages

• How do we develop larger applications with multiple components?

SD4x-3.7 446


Node.js - Introduction

• Node.js is a free, open source platform and framework built in JavaScript

• Includes suite of tools that allows user to prepare JavaScript (and thus React) applications for deployment

• Utilizes Node.js Package Manager (npm) to install programs and manage dependencies

SD4x-3.7 447


Node.js - Benefits

• Instead of including all JavaScript code in a <script> tag, now we can separate the components into different files to make code more modular

• Node.js allows us to incorporate dependencies of the code within the current file

var React = require('react');

var ReactDOM = require('react-dom');

import MyComponent from './MyComponent.js';

SD4x-3.7 448


Node.js - Benefits






SD4x-3.7 449


Node.js - Benefits






SD4x-3.7 450


Node.js - Installation

• Navigate to https://nodejs.org/en/download/ and download and install Node.js and appropriate packages

• Although npm always comes with a Node.jsinstallation, be sure to update the version to the most recent with the following command.

npm install npm -g

SD4x-3.7 451


Creating a React App - Considerations

• Including dependencies (React, React-DOM libraries, etc.)

• Making code compatible with browsers that only support older versions of JavaScript

• Transforming JSX into JavaScript

• Modularity: implementing modules in separate files, bundling them as dependencies

SD4x-3.7 452


Creating a React App with Node.js - Setup

• Fortunately, there exists a package (through npm) that takes all of the above into consideration when creating a React app

• Incorporates Babel for JSX and ES6 transformation

• Incorporates Webpack for bundling

SD4x-3.7 453

npm install -g create-react-app


Creating a React App with Node.js - Setup

• Fortunately, there exists a package (through npm) that takes all of the above into consideration when creating a React app

• Incorporates Babel for JSX and ES6 transformation

• Incorporates Webpack for bundling

• To create new React app, run the following command in the desired parent directory of new application

create-react-app my-app

SD4x-3.7 454

npm install -g create-react-app


Anatomy of a React App

SD4x-3.7 455

• package.json: information about app, lists of dependencies, shortcuts for scripts

• public: directory containing HTML files, images, other static web content

• src: directory containing JavaScript and CSS files


Starting React App with Node.js

• You can start the default app as follows:

cd my-app/

npm start

SD4x-3.7 456




• This will start a web server that listens for incoming HTTP requests on port 3000 on your computer

cd my-app/

npm start

SD4x-3.7 457




• This will start a web server that listens for incoming HTTP requests on port 3000 on your computer

• You can access the web server by accessing http://localhost:3000/ from your computer

cd my-app/

npm start

SD4x-3.7 458



Incorporating Components

• We can now create separate JavaScript files for each component.

• src/Counter.js would look like this:



constructor(props) { . . . }

incrementCount() { . . . }

render() { . . . }

};

export default Counter;

SD4x-3.7 460









render() { . . . }

};


SD4x-3.7 461









render() { . . . }

};


SD4x-3.7 462









render() { . . . }

};


SD4x-3.7 463


Incorporating Components into the App

• Edit src/App.js as follows:

import Counter from './Counter.js';

SD4x-3.7 464

class App extends Component {

render() {

return (

<div className="App">

<Counter />

</div>

);

}

}





SD4x-3.7 465


render() {

return (


<Counter />

</div>

);

}

}





SD4x-3.7 466


render() {

return (


<Counter />

</div>

);

}

}









App


AppDogs


AppDogsDogItem

DogItem


AppDogsDogItem

DogItem

AddDog


import React, { Component } from 'react';

import Dogs from './components/Dogs';

import AddDog from './components/AddDog';

import './App.css';


constructor() { . . . }

handleAddDog(dog) { . . . }

handleDeleteDog(name) { . . . }

render() {

return (


<Dogs dogs={this.state.dogs}

onDelete={this.handleDeleteDog.bind(this)} />

<AddDog onAddDog={this.handleAddDog.bind(this)} />

<hr />

</div>

);

}

};

SD4x-3.7 478





import './App.css';





render() {

return (





<hr />

</div>

);

}

};

SD4x-3.7 479





import './App.css';





render() {

return (





<hr />

</div>

);

}

};

SD4x-3.7 480





import './App.css';





render() {

return (





<hr />

</div>

);

}

};

SD4x-3.7 481





import './App.css';





render() {

return (





<hr />

</div>

);

}

};

SD4x-3.7 482





import './App.css';





render() {

return (





<hr />

</div>

);

}

};

SD4x-3.7 483





import './App.css';





render() {

return (





<hr />

</div>

);

}

};

SD4x-3.7 484





import './App.css';





render() {

return (





<hr />

</div>

);

}

};

SD4x-3.7 485





import './App.css';





render() {

return (





<hr />

</div>

);

}

};

SD4x-3.7 486





import './App.css';





render() {

return (





<hr />

</div>

);

}

};

SD4x-3.7 487





import './App.css';





render() {

return (





<hr />

</div>

);

}

};

SD4x-3.7 488


AppDogs

AddDog





import './App.css';





render() {

return (





<hr />

</div>

);

}

};

SD4x-3.7 490





import './App.css';





render() {

return (





<hr />

</div>

);

}

};

SD4x-3.7 491


Testing React Apps

• Mocha – widely used test runner (testing framework) used to run JavaScript tests

• Chai – assertion library for Behavior Driven Testing

• Enzyme – testing utility for React for manipulating and inspecting React Component state and output

SD4x-3.7 492


Getting Started - Installation

• To include Enzyme and Chai as dependencies, run the following command:

npm install --save-dev enzyme react-test-renderer chai

SD4x-3.7 493


Getting Started - Installation

• To include Enzyme and Chai as dependencies, run the following command:

• Note that the default file structure places all JavaScript and CSS code in the ‘src’ folder.

• We will create an additional folder within ‘src’ named ‘tests’ in which we include all testing scripts

• All test files must be in the form of *.test.js, e.g. Dogs.test.js

npm install --save-dev enzyme react-test-renderer chai

SD4x-3.7 494


Getting Started

• Node.js should create a default App.test.js, or you can write your own

SD4x-3.7 495


Getting Started


• Include libraries necessary for testing

• Import React and ReactDOM for component manipulation

• Import keywords from Enzyme

• Import keywords from Chai

import React from 'react';

import ReactDOM from 'react-dom';

import { mount, shallow } from 'enzyme';

import {expect} from 'chai';

SD4x-3.7 496


Getting Started










SD4x-3.7 497


Getting Started










SD4x-3.7 498


Getting Started










SD4x-3.7 499


Anatomy of a React Test


import { expect } from 'chai';


import App from '../App';

describe("Test suite for App component", function(){

it("only one element in App class", function() {

const wrapper = shallow(<App />);

expect(wrapper.find(".App")).length(1);

});

});

SD4x-3.7 500











});

});

SD4x-3.7 501











});

});

SD4x-3.7 502











});

});

SD4x-3.7 503











});

});

SD4x-3.7 504











});

});

SD4x-3.7 505











});

});

SD4x-3.7 506











});

});

SD4x-3.7 507











});

});

SD4x-3.7 508











});

});

SD4x-3.7 509











});

});

SD4x-3.7 510











});

});

SD4x-3.7 511











});

});

SD4x-3.7 512











});

});

SD4x-3.7 513











});

});

SD4x-3.7 514











});

});

SD4x-3.7 515











});

});

SD4x-3.7 516











});

});

SD4x-3.7 517


Testing React Component Relationships

it('Dog List contains two dogs', function() {

const wrapper = mount(<App/>);

expect(wrapper.find('Dogs')

.find('DogItem')).length(2);

});

SD4x-3.7 518







});

SD4x-3.7 519







});

SD4x-3.7 520







});

SD4x-3.7 521







});

SD4x-3.7 522







});

SD4x-3.7 523







});

SD4x-3.7 524


Testing Data Entry and Form Submission

it("successfully adds dog to list when form submitted",

function() {


const adddog = wrapper.find('AddDog');

adddog.find('#dogName').get(0).value = 'Lola';

adddog.find('#imageURL').get(0).value = 'https://

static.pexels.com/photos/54386/pexels-

photo-54386.jpeg';

adddog.find('#dogBreed').get(0).value = 'Beagle';

const form = adddog.find('form');

form.simulate('submit');



expect(wrapper.state().dogs[2].name == 'Lola');

});

SD4x-3.7 525




function() {






photo-54386.jpeg';







});

SD4x-3.7 526




function() {






photo-54386.jpeg';







});

SD4x-3.7 527




function() {






photo-54386.jpeg';







});

SD4x-3.7 528




function() {






photo-54386.jpeg';







});

SD4x-3.7 529




function() {






photo-54386.jpeg';







});

SD4x-3.7 530




function() {






photo-54386.jpeg';







});

SD4x-3.7 531




function() {






photo-54386.jpeg';







});

SD4x-3.7 532




function() {






photo-54386.jpeg';







});

SD4x-3.7 533




function() {






photo-54386.jpeg';







});

SD4x-3.7 534




function() {






photo-54386.jpeg';







});

SD4x-3.7 535




function() {






photo-54386.jpeg';







});

SD4x-3.7 536




function() {






photo-54386.jpeg';







});

SD4x-3.7 537




function() {






photo-54386.jpeg';







});

SD4x-3.7 538




function() {






photo-54386.jpeg';







});

SD4x-3.7 539




function() {






photo-54386.jpeg';







});

SD4x-3.7 540




function() {






photo-54386.jpeg';







});

SD4x-3.7 541




function() {






photo-54386.jpeg';







});

SD4x-3.7 542




function() {






photo-54386.jpeg';







});

SD4x-3.7 543


Testing Links

it('removes dog from list when deleted', function() {


const deleteLink = wrapper.find('a').first();

deleteLink.simulate('click');



});

SD4x-3.7 544


Testing Links







});

SD4x-3.7 545


Testing Links







});

SD4x-3.7 546


Testing Links







});

SD4x-3.7 547


Testing Links







});

SD4x-3.7 548


Testing Links







});

SD4x-3.7 549


Running Tests

• To run tests, navigate to the project within the terminal and run the following command:

npm run test

SD4x-3.7 550



Running Tests: Success!

SD4x-3.7 552


Summary

• We can use Node.js to create React applications

• This allows us to put component code into separate .js files and then include them into our App as necessary

• Mocha, Chai, and Enzyme can be used for testing our React apps

SD4x-3.7 553

Video 3.8

ES6

Chris Murphy

SD4x-3.8 554


What is ES6?

• ES6 stands for ECMAScript 6

• ECMAScript is the ”proper” name for JavaScript

• ES6 is the newest JavaScript Specification, released in 2015

SD4x-3.8 555


What can you do with ES6?

• In ES6, you can…

• Define constants

• Use simpler notations for function declarations

• Build classes

• Refactor code into modules

• Store data in Sets, Maps, and Typed Arrays

• Copy objects in one line of code

• … and much more!

SD4x-3.8 556


ES6 – Arrow Functions

• New syntax for defining functions using arrows

• ES5 Syntax:var arr = [1,2,3,4,5];

var square = function (n) {

return n*n;

};

arr.forEach( function(v, i) {

arr[i] = square(v);

});

SD4x-3.8 557






return n*n;

};


arr[i] = square(v);

});

SD4x-3.8 558






return n*n;

};


arr[i] = square(v);

});

SD4x-3.8 559




• ES5 Syntax:

• ES6 Syntax:

var arr = [1,2,3,4,5];


return n*n;

};


arr[i] = square(v);

});

let arr = [1,2,3,4,5];

let square = n => {

return n*n;

};

arr.forEach( (v, i) => {

arr[i] = square(v);

});

SD4x-3.8 560




• ES5 Syntax:

• ES6 Syntax:

var arr = [1,2,3,4,5];


return n*n;

};


arr[i] = square(v);

});

let arr = [1,2,3,4,5];

let square = n => {

return n*n;

};


arr[i] = square(v);

});

SD4x-3.8 561




• ES5 Syntax:

• ES6 Syntax:

var arr = [1,2,3,4,5];


return n*n;

};


arr[i] = square(v);

});

let arr = [1,2,3,4,5];

let square = n => {

return n*n;

};


arr[i] = square(v);

});

SD4x-3.8 562




• ES5 Syntax:

• ES6 Syntax:

var arr = [1,2,3,4,5];


return n*n;

};


arr[i] = square(v);

});

let arr = [1,2,3,4,5];

let square = n => {

return n*n;

};


arr[i] = square(v);

});

SD4x-3.8 563




• ES5 Syntax:

• ES6 Syntax:

var arr = [1,2,3,4,5];


return n*n;

};


arr[i] = square(v);

});

let arr = [1,2,3,4,5];

let square = n => {

return n*n;

};


arr[i] = square(v);

});

SD4x-3.8 564


ES6 – Default Parameter Values

• The “=“ symbol can be used to assign default values to function parameters

function pow (base, power = 2) {

return Math.pow(base, power);

};

SD4x-3.8 565






};

SD4x-3.8 566






};

SD4x-3.8 567






};

console.log(pow(3));

SD4x-3.8 568






};


SD4x-3.8 569






};


SD4x-3.8 570






};

console.log(pow(3)); // 9

SD4x-3.8 571






};


console.log(pow(3,3));

SD4x-3.8 572






};


console.log(pow(3,3));

SD4x-3.8 573






};


console.log(pow(3,3)); // 27

SD4x-3.8 574


ES6 – Template Literals

• Can define a template for rendering strings

• ES5 Syntax:

var person = { name: "Lydia" };

var msg = "Dear " + person.name + ",\n" + "How are you? ";

SD4x-3.8 575




• ES5 Syntax:



SD4x-3.8 576




• ES5 Syntax:



SD4x-3.8 577




• ES5 Syntax:



SD4x-3.8 578




• ES5 Syntax:



SD4x-3.8 579




• ES5 Syntax:

• ES6 Syntax:




var msg = ‘Dear ${person.name},

How are you?‘

SD4x-3.8 580




• ES5 Syntax:

• ES6 Syntax:





How are you?‘

SD4x-3.8 581




• ES5 Syntax:

• ES6 Syntax:





How are you?‘

SD4x-3.8 582




• ES5 Syntax:

• ES6 Syntax:





How are you?‘

SD4x-3.8 583




• ES5 Syntax:

• ES6 Syntax:





How are you?‘

SD4x-3.8 584


ES6 – Classes

• Instead of building prototypes, ES6 allows classes to be directly defined in more traditional OOP style

• ES5 Syntax: var Rectangle = function (height, width) {

this.height = height;

this.width = width;

}

Rectangle.prototype.area = function () {

return this.height * this.width;

}

SD4x-3.8 585


ES6 – Classes




this.width = width;

}



}

SD4x-3.8 586


ES6 – Classes




this.width = width;

}



}

SD4x-3.8 587


ES6 – Classes


• ES5 Syntax:

• ES6 Syntax:

var Rectangle = function (height, width) {


this.width = width;

}



}

class Rectangle {

constructor (height, width) {


this.width = width;

}

area () {


}

}

SD4x-3.8 588


ES6 – Classes


• ES5 Syntax:

• ES6 Syntax:



this.width = width;

}



}

class Rectangle {



this.width = width;

}

area () {


}

}

SD4x-3.8 589


ES6 – Classes


• ES5 Syntax:

• ES6 Syntax:



this.width = width;

}



}

class Rectangle {



this.width = width;

}

area () {


}

}

SD4x-3.8 590


ES6 – Classes


• ES5 Syntax:

• ES6 Syntax:



this.width = width;

}



}

class Rectangle {



this.width = width;

}

area () {


}

}

SD4x-3.8 591


ES6 – Classes


• ES5 Syntax:

• ES6 Syntax:



this.width = width;

}



}

class Rectangle {



this.width = width;

}

area () {


}

}

SD4x-3.8 592


ES6 – Classes


• ES5 Syntax:

• ES6 Syntax:



this.width = width;

}



}

class Rectangle {



this.width = width;

}

area () {


}

}

SD4x-3.8 593


ES6 Data Structures: Sets

• ES6 introduces a Set class

• Elements are distinct and maintain order

let s = new Set();

s.add("alligator"); // s = {"alligator"}

s.add("dolphin"); // s = {"alligator", "dolphin"}

s.add("fox"); // s = {"alligator", "dolphin", "fox"}

s.add("alligator"); // s = {"alligator", "dolphin", "fox"}

s.has("alligator"); // true

s.delete("alligator"); // s = {"dolphin", "fox"}

for (let v of s.values())

console.log(v); // prints each value in order

SD4x-3.8 594





let s = new Set();









SD4x-3.8 595





let s = new Set();









SD4x-3.8 596





let s = new Set();









SD4x-3.8 597





let s = new Set();









SD4x-3.8 598





let s = new Set();









SD4x-3.8 599





let s = new Set();









SD4x-3.8 600





let s = new Set();









SD4x-3.8 601





let s = new Set();









SD4x-3.8 602





let s = new Set();









SD4x-3.8 603


ES6 Data Structures: Maps

• ES6 also introduces a Map class

• A Set of keys is mapped to corresponding values

let m = new Map();

m.set("dog", "rover"); // {"dog" => "rover"}

m.set("cat", "felix"); // {"dog" => "rover", "cat" => "felix"}

m.get("cat"); // "felix"

m.get("mouse"); // undefined

for (let [key, val] of m.entries())

console.log(key + ": " + val); // prints keys and values

SD4x-3.8 604





let m = new Map();







SD4x-3.8 605





let m = new Map();







SD4x-3.8 606





let m = new Map();







SD4x-3.8 607





let m = new Map();







SD4x-3.8 608





let m = new Map();







SD4x-3.8 609





let m = new Map();







SD4x-3.8 610





let m = new Map();







SD4x-3.8 611


Summary

• ES6 provides simplified syntax and new libraries and functionality

• We will use ES6 notation in the remaining lessons in the course

SD4x-3.8 612

Video 3.9

D3 Intro

Chris Murphy

SD4x-3.9 613


Review

• We can use JavaScript to dynamically modify/create HTML elements in Web pages

• jQuery provides a simpler syntax and other additional features

• React allows us to create reusable, modular components

SD4x-3.9 614


Standard SVG

• We can render basic visual elements in HTML using Scalable Vector Graphics (SVG)

• These are HTML elements that are included in the Web page

• They do not lose quality when the page is resized

• SVG elements are part of the DOM, so their attributes can be modified by CSS and JavaScript

SD4x-3.9 615







<html>

<head>

<style>

circle:hover {

fill:green;

};

</style>

</head>

<body>

<svg width="400" height="400">

<circle cx="50" cy="50" r="40"

stroke="blue" stroke-width="4" fill="yellow" />

<rect x="50" y="20" rx="20" ry="20"

width="150" height="150"

style="fill:red;stroke:black;stroke-width:5;opacity:0.5"

onclick="style.fill='cyan'" />

</svg>

</body>

</html>

SD4x-3.9 621


<html>

<head>

<style>

circle:hover {

fill:green;

};

</style>

</head>

<body>


<circle cx="50" cy="50" r="40"


<rect x="50" y="20" rx="20" ry="20"




</svg>

</body>

</html>

SD4x-3.9 622


<html>

<head>

<style>

circle:hover {

fill:green;

};

</style>

</head>

<body>


<circle cx="50" cy="50" r="40"


<rect x="50" y="20" rx="20" ry="20"




</svg>

</body>

</html>

SD4x-3.9 623


<html>

<head>

<style>

circle:hover {

fill:green;

};

</style>

</head>

<body>


<circle cx="50" cy="50" r="40"


<rect x="50" y="20" rx="20" ry="20"




</svg>

</body>

</html>

SD4x-3.9 624


<html>

<head>

<style>

circle:hover {

fill:green;

};

</style>

</head>

<body>


<circle cx="50" cy="50" r="40"


<rect x="50" y="20" rx="20" ry="20"




</svg>

</body>

</html>

SD4x-3.9 625


50


50

50


50

50


<html>

<head>

<style>

circle:hover {

fill:green;

};

</style>

</head>

<body>


<circle cx="50" cy="50" r="40"


<rect x="50" y="20" rx="20" ry="20"




</svg>

</body>

</html>

SD4x-3.9 629


<html>

<head>

<style>

circle:hover {

fill:green;

};

</style>

</head>

<body>


<circle cx="50" cy="50" r="40"


<rect x="50" y="20" rx="20" ry="20"




</svg>

</body>

</html>

SD4x-3.9 630


<html>

<head>

<style>

circle:hover {

fill:green;

};

</style>

</head>

<body>


<circle cx="50" cy="50" r="40"


<rect x="50" y="20" rx="20" ry="20"




</svg>

</body>

</html>

SD4x-3.9 631


<html>

<head>

<style>

circle:hover {

fill:green;

};

</style>

</head>

<body>


<circle cx="50" cy="50" r="40"


<rect x="50" y="20" rx="20" ry="20"




</svg>

</body>

</html>

SD4x-3.9 632


<html>

<head>

<style>

circle:hover {

fill:green;

};

</style>

</head>

<body>


<circle cx="50" cy="50" r="40"


<rect x="50" y="20" rx="20" ry="20"




</svg>

</body>

</html>

SD4x-3.9 633


<html>

<head>

<style>

circle:hover {

fill:green;

};

</style>

</head>

<body>


<circle cx="50" cy="50" r="40"


<rect x="50" y="20" rx="20" ry="20"




</svg>

</body>

</html>

SD4x-3.9 634


<html>

<head>

<style>

circle:hover {

fill:green;

};

</style>

</head>

<body>


<circle cx="50" cy="50" r="40"


<rect x="50" y="20" rx="20" ry="20"




</svg>

</body>

</html>

SD4x-3.9 635


<html>

<head>

<style>

circle:hover {

fill:green;

};

</style>

</head>

<body>


<circle cx="50" cy="50" r="40"


<rect x="50" y="20" rx="20" ry="20"




</svg>

</body>

</html>

SD4x-3.9 636


Dynamic SVG

• Since SVG elements are part of the DOM, we can use JavaScript to manipulate their attributes

• But we may also want to dynamically generate SVG elements based on user actions, data received from an API, etc.

SD4x-3.9 637


D3: Data-Driven Documents

• D3.js is a JavaScript library for manipulating HTML documents based on data

• Data can be bound to DOM elements (HTML, SVG) and then we can programmatically apply data-driven transformations

• This can be used for generating HTML tables, SVG charts and graphs, etc.

SD4x-3.9 638


<html>

<head>

</head>

<body>


<circle cx="50" cy="50" r="40"


</svg>

</body>

</html>

SD4x-3.9 639


<html>

<head>

</head>

<body>


<circle cx="50" cy="50" r="40"


</svg>

</body>

</html>

SD4x-3.9 640


<html>

<head>

</head>

<body>


<circle cx="50" cy="50" r="40"


</svg>

</body>

</html>

SD4x-3.9 641


<html>

<head>

<script src="http://d3js.org/d3.v4.min.js"></script>

</head>

<body>


<circle />

</svg>

<script>

// next slide -->

</script>

</body>

</html>

SD4x-3.9 642


<html>

<head>


</head>

<body>


<circle />

</svg>

<script>

// next slide -->

</script>

</body>

</html>

SD4x-3.9 643


<html>

<head>


</head>

<body>


<circle />

</svg>

<script>

// next slide -->

</script>

</body>

</html>

SD4x-3.9 644


<html>

<head>


</head>

<body>


<circle />

</svg>

<script>

// next slide -->

</script>

</body>

</html>

SD4x-3.9 645


<html>

<head>


</head>

<body>


<circle />

</svg>

<script>

// next slide -->

</script>

</body>

</html>

SD4x-3.9 646


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};

var svg = d3.select("svg");

svg.select("circle")

.attr("cx", circle.x)

.attr("cy", circle.y)

.attr("r", circle.r)

.style("stroke", circle.stroke)

.style("stroke-width", circle.width);

.style("fill", circle.fill);

</script>

SD4x-3.9 647


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 648


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 649


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 650


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 651


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 652


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 653


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 654


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 655


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 656


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 657


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 658


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 659


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 660


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 661


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 662


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 663


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 664


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 665


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 666


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

};









</script>

SD4x-3.9 667


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4

};









</script>

SD4x-3.9 668


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4

};









</script>

SD4x-3.9 669


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4

};








.style("fill", () => {

if (circle.r < 50) return 'yellow';

else return 'cyan'; })

</script>

SD4x-3.9 670


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4

};











</script>

SD4x-3.9 671


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4

};











</script>

SD4x-3.9 672


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4

};











</script>

SD4x-3.9 673


<script>

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4

};











</script>

SD4x-3.9 674


Summary

• We can render basic visual elements in HTML using Scalable Vector Graphics (SVG)

• We can use D3.js to programmatically generate HTML elements (including SVG) based on data

SD4x-3.9 675

Video 3.10

D3 Charts

Chris Murphy

SD4x-3.10 676


Review

• D3.js allows us to programmatically generate HTML elements (including SVG) based on data

• The most common visual representation of data is in the form of a chart

SD4x-3.10 677




<style>

rect {

fill: darkred;

}

rect:hover {

fill: darkblue;

}

.chart text {

fill: white;

font: 10px sans-serif;

text-anchor: end;

}

</style>

<svg class="chart" height="200">

<g transform="translate(0,160)">

<rect width="39" height="40"></rect><text x="25" y="10">4</text>

</g>



</g>


<rect width="39" height="75"></rect><text x="25" y="10">7.5</text>

</g>



</g>

</svg>

SD4x-3.10 680


<style>

rect {

fill: darkred;

}

rect:hover {

fill: darkblue;

}

.chart text {

fill: white;


text-anchor: end;

}

</style>




</g>



</g>



</g>



</g>

</svg>

SD4x-3.10 681


<style>

rect {

fill: darkred;

}

rect:hover {

fill: darkblue;

}

.chart text {

fill: white;


text-anchor: end;

}

</style>




</g>



</g>



</g>



</g>

</svg>

SD4x-3.10 682


<style>

rect {

fill: darkred;

}

rect:hover {

fill: darkblue;

}

.chart text {

fill: white;


text-anchor: end;

}

</style>




</g>



</g>



</g>



</g>

</svg>

SD4x-3.10 683


<style>

rect {

fill: darkred;

}

rect:hover {

fill: darkblue;

}

.chart text {

fill: white;


text-anchor: end;

}

</style>




</g>



</g>



</g>



</g>

</svg>

SD4x-3.10 684


<style>

rect {

fill: darkred;

}

rect:hover {

fill: darkblue;

}

.chart text {

fill: white;


text-anchor: end;

}

</style>




</g>



</g>



</g>



</g>

</svg>

SD4x-3.10 685


<style>

rect {

fill: darkred;

}

rect:hover {

fill: darkblue;

}

.chart text {

fill: white;


text-anchor: end;

}

</style>




</g>



</g>



</g>



</g>

</svg>

SD4x-3.10 686


<style>

rect {

fill: darkred;

}

rect:hover {

fill: darkblue;

}

.chart text {

fill: white;


text-anchor: end;

}

</style>




</g>



</g>



</g>



</g>

</svg>

SD4x-3.10 687




<style>

rect {

fill: darkred;

}

rect:hover {

fill: darkblue;

}

.chart text {

fill: white;


text-anchor: end;

}

</style>




</g>



</g>



</g>



</g>

</svg>

SD4x-3.10 690


<style>

rect {

fill: darkred;

}

rect:hover {

fill: darkblue;

}

.chart text {

fill: white;


text-anchor: end;

}

</style>




</g>



</g>



</g>



</g>

</svg>

SD4x-3.10 691


<style>

rect {

fill: darkred;

}

rect:hover {

fill: darkblue;

}

.chart text {

fill: white;


text-anchor: end;

}

</style>




</g>



</g>



</g>



</g>

</svg>

SD4x-3.10 692


<style>

rect {

fill: darkred;

}

rect:hover {

fill: darkblue;

}

.chart text {

fill: white;


text-anchor: end;

}

</style>




</g>



</g>



</g>



</g>

</svg>

SD4x-3.10 693


<style>

rect {

fill: darkred;

}

rect:hover {

fill: darkblue;

}

.chart text {

fill: white;


text-anchor: end;

}

</style>




</g>



</g>



</g>



</g>

</svg>

SD4x-3.10 694

160


<style>

rect {

fill: darkred;

}

rect:hover {

fill: darkblue;

}

.chart text {

fill: white;


text-anchor: end;

}

</style>




</g>



</g>



</g>



</g>

</svg>

SD4x-3.10 695

160

40


<style>

rect {

fill: darkred;

}

rect:hover {

fill: darkblue;

}

.chart text {

fill: white;


text-anchor: end;

}

</style>




</g>



</g>



</g>



</g>

</svg>

SD4x-3.10 696

160


<style>

rect {

fill: darkred;

}

rect:hover {

fill: darkblue;

}

.chart text {

fill: white;


text-anchor: end;

}

</style>




</g>



</g>



</g>



</g>

</svg>

SD4x-3.10 697

7040


<style>

rect {

fill: darkred;

}

rect:hover {

fill: darkblue;

}

.chart text {

fill: white;


text-anchor: end;

}

</style>




</g>



</g>



</g>



</g>

</svg>

SD4x-3.10 698

125

80


<style>

rect {

fill: darkred;

}

rect:hover {

fill: darkblue;

}

.chart text {

fill: white;


text-anchor: end;

}

</style>




</g>



</g>



</g>



</g>

</svg>

SD4x-3.10 699


<style>

rect {

fill: darkred;

}

rect:hover {

fill: darkblue;

}

.chart text {

fill: white;


text-anchor: end;

}

</style>




</g>



</g>



</g>



</g>

</svg>

SD4x-3.10 700


Dynamic SVG with D3.js

• D3.js is specifically designed to allow us to manipulate HTML/SVG elements based on data

• We can dynamically render SVG elements by applying functionality to a set of data

SD4x-3.10 701


<style>



</style>


<svg class="chart" height="200"></svg>

<script>

var numbers = [40, 130, 75, 170];


var selection = svg.selectAll("g")

.data(numbers)

.enter().append("g")

.attr("transform", (d,i) => {

return "translate(" + 40*i + "," + (200-d) + ")"; });

selection.append("rect")

.attr("width", 39)

.attr("height", (d,i) => { return d; });

selection.append("text")

.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 702


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 703


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 704


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 705


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 706


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 707


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 708


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 709


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 710


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 711


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 712


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 713


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 714


var numbers = [40, 130, 75, 170];


var numbers = [40, 130, 75, 170];


var numbers = [40, 130, 75, 170];160


var numbers = [40, 130, 75, 170];160

d = 40, i = 0 x = 0, y = 160


var numbers = [40, 130, 75, 170];70

d = 40, i = 0 x = 0, y = 160

d = 130, i = 1 x = 40, y = 70

40


var numbers = [40, 130, 75, 170];125

d = 40, i = 0 x = 0, y = 160

d = 130, i = 1 x = 40, y = 70

d = 75, i = 2 x = 80, y = 125

80


var numbers = [40, 130, 75, 170];

30

d = 40, i = 0 x = 0, y = 160

d = 130, i = 1 x = 40, y = 70

d = 75, i = 2 x = 80, y = 125

d = 170, i = 3 x = 120, y = 30

120


var numbers = [40, 130, 75, 170];

d = 40, i = 0 x = 0, y = 160

d = 130, i = 1 x = 40, y = 70

d = 75, i = 2 x = 80, y = 125

d = 170, i = 3 x = 120, y = 30


var numbers = [40, 130, 75, 170];

d = 40, i = 0 x = 0, y = 160

d = 130, i = 1 x = 40, y = 70

d = 75, i = 2 x = 80, y = 125

d = 170, i = 3 x = 120, y = 30


var numbers = [40, 130, 75, 170];

d = 40, i = 0 x = 0, y = 160

d = 130, i = 1 x = 40, y = 70

d = 75, i = 2 x = 80, y = 125

d = 170, i = 3 x = 120, y = 30


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 725


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 726


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 727


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 728


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 729


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 730


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 731


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 732


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 733


<style>


</style>



<script>

var numbers = [40, 130, 75, 170];



.data(numbers)





.attr("width", 39)



.attr("x", 25)

.attr("y", 25)

.text((d) => { return d/10; });

</script>

SD4x-3.10 734


Dynamic Graphics with D3.js

• In addition to rendering HTML/SVG elements using JavaScript, D3.js also allows us to add elements based on any changes to the data

• This allows us to dynamically modify our chart and other graphics

SD4x-3.10 735









<p>

<input id="inputField"></input>

<button onclick="insert();">Insert</button>

<script>

var numbers = [40, 130, 75, 170];

function insert() {

var value = document.getElementById('inputField').value;

numbers.push(value);

drawChart();

document.getElementById('inputField').value = '';

}

function drawChart() {

// same D3 code as before!

}

drawChart();

</script>

SD4x-3.10 741




<p>



<script>

var numbers = [40, 130, 75, 170];

function insert() {



drawChart();


}



}

drawChart();

</script>

SD4x-3.10 742




<p>



<script>

var numbers = [40, 130, 75, 170];

function insert() {



drawChart();


}



}

drawChart();

</script>

SD4x-3.10 743




<p>



<script>

var numbers = [40, 130, 75, 170];

function insert() {



drawChart();


}



}

drawChart();

</script>

SD4x-3.10 744




<p>



<script>

var numbers = [40, 130, 75, 170];

function insert() {



drawChart();


}



}

drawChart();

</script>

SD4x-3.10 745




<p>



<script>

var numbers = [40, 130, 75, 170];

function insert() {



drawChart();


}



}

drawChart();

</script>

SD4x-3.10 746




<p>



<script>

var numbers = [40, 130, 75, 170];

function insert() {



drawChart();


}



}

drawChart();

</script>

SD4x-3.10 747




<p>



<script>

var numbers = [40, 130, 75, 170];

function insert() {



drawChart();


}



}

drawChart();

</script>

SD4x-3.10 748




<p>



<script>

var numbers = [40, 130, 75, 170];

function insert() {



drawChart();


}



}

drawChart();

</script>

SD4x-3.10 749




<p>



<script>

var numbers = [40, 130, 75, 170];

function insert() {



drawChart();


}



}

drawChart();

</script>

SD4x-3.10 750




<p>



<script>

var numbers = [40, 130, 75, 170];

function insert() {



drawChart();


}



}

drawChart();

</script>

SD4x-3.10 751




<p>



<script>

var numbers = [40, 130, 75, 170];

function insert() {



drawChart();


}



}

drawChart();

</script>

SD4x-3.10 752




<p>



<script>

var numbers = [40, 130, 75, 170];

function insert() {



drawChart();


}



}

drawChart();

</script>

SD4x-3.10 753




<p>



<script>

var numbers = [40, 130, 75, 170];

function insert() {



drawChart();


}



}

drawChart();

</script>

SD4x-3.10 754




<p>



<script>

var numbers = [40, 130, 75, 170];

function insert() {



drawChart();


}



}

drawChart();

</script>

SD4x-3.10 755


Summary

• D3.js is a powerful library for generating HTML and SVG elements based on data

• We can apply functions to data sets to generate graphical elements, e.g. charts

• And use D3.js to modify the elements when new data is added

SD4x-3.10 756

Video 3.11

More D3

Chris Murphy

SD4x-3.11 757


Review

• D3.js allows us to generate HTML and SVG elements based on data


SD4x-3.11 758



D3 and Data

• The data used in D3 can be objects, not just numbers

• We can then use the properties of these objects when deciding how to render the visualization (chart, SVG, etc.)

SD4x-3.11 760


<html>

<head>


</head>

<body>

<svg class="chart" height="900" width="900">

</svg>

<script>

var values = [

{price: 700, sqft: 3000, br: 3, pets: [ 'cats', 'dogs' ] },

{price: 445, sqft: 1700, br: 2, pets: [] },


{price: 411, sqft: 1314, br: 2, pets: [ 'dogs' ] },

{price: 275, sqft: 1200, br: 1, pets: [ 'cats' ]},


];

. . .

SD4x-3.11 761


<html>

<head>


</head>

<body>


</svg>

<script>

var values = [







];

. . .

SD4x-3.11 762


<html>

<head>


</head>

<body>


</svg>

<script>

var values = [







];

. . .

SD4x-3.11 763


<html>

<head>


</head>

<body>


</svg>

<script>

var values = [







];

. . .

SD4x-3.11 764


<html>

<head>


</head>

<body>


</svg>

<script>

var values = [







];

. . .

SD4x-3.11 765


<html>

<head>


</head>

<body>


</svg>

<script>

var values = [







];

. . .

SD4x-3.11 766


<html>

<head>


</head>

<body>


</svg>

<script>

var values = [







];

. . .

SD4x-3.11 767


<html>

<head>


</head>

<body>


</svg>

<script>

var values = [







];

. . .

SD4x-3.11 768


<html>

<head>


</head>

<body>


</svg>

<script>

var values = [







];

. . .

SD4x-3.11 769


<html>

<head>


</head>

<body>


</svg>

<script>

var values = [







];

. . .

SD4x-3.11 770


<html>

<head>


</head>

<body>


</svg>

<script>

var values = [







];

. . .

SD4x-3.11 771





.data(values)

.enter()

.append("g")

.attr("transform", "translate(10,10)");

selection.append("circle")

.attr("cx", (d,i) => { return d.price / 2; })

.attr("cy", (d,i) => { return (4000 - d.sqft)/(4000/400) ; })

.attr("r", (d,i) => { return d.br * 10 ; })

.style("fill", (d,i) => { return color(d.pets); })

.style("opacity", "0.5")

.append("svg:title").text( (d,i) => { return print(d); });

function color(pets) {

var dogs = pets.indexOf('dogs') != -1;

var cats = pets.indexOf('cats') != -1;

if (dogs) return cats ? 'purple' : 'blue' ;

else return cats ? 'red' : 'gray';

}

function print(home) {

return `$${home.price}k, ${home.sqft}sqft, ${home.br} BRs`;

}




.data(values)

.enter()

.append("g")














}



}




.data(values)

.enter()

.append("g")














}



}




.data(values)

.enter()

.append("g")














}



}




.data(values)

.enter()

.append("g")














}



}




.data(values)

.enter()

.append("g")














}



}




.data(values)

.enter()

.append("g")














}



}




.data(values)

.enter()

.append("g")














}



}





.data(values)

.enter()

.append("g")














}



}




.data(values)

.enter()

.append("g")














}



}



{price: 700, sqft: 3000, . . . },

{price: 445, sqft: 1700, . . . },

{price: 421, sqft: 1455, . . . },

{price: 411, sqft: 1314, . . . },

{price: 275, sqft: 1200, . . . },

{price: 500, sqft: 650, . . . },


{price: 700, sqft: 3000, . . . },

{price: 445, sqft: 1700, . . . },

{price: 421, sqft: 1455, . . . },

{price: 411, sqft: 1314, . . . },

{price: 275, sqft: 1200, . . . },

{price: 500, sqft: 650, . . . },


{price: 700, sqft: 3000, . . . },

{price: 445, sqft: 1700, . . . },

{price: 421, sqft: 1455, . . . },

{price: 411, sqft: 1314, . . . },

{price: 275, sqft: 1200, . . . },

{price: 500, sqft: 650, . . . },

350




.data(values)

.enter()

.append("g")














}



}


{price: 700, sqft: 3000, . . . },

{price: 445, sqft: 1700, . . . },

{price: 421, sqft: 1455, . . . },

{price: 411, sqft: 1314, . . . },

{price: 275, sqft: 1200, . . . },

{price: 500, sqft: 650, . . . },


{price: 700, sqft: 3000, . . . },

{price: 445, sqft: 1700, . . . },

{price: 421, sqft: 1455, . . . },

{price: 411, sqft: 1314, . . . },

{price: 275, sqft: 1200, . . . },

{price: 500, sqft: 650, . . . },


{price: 700, sqft: 3000, . . . },

{price: 445, sqft: 1700, . . . },

{price: 421, sqft: 1455, . . . },

{price: 411, sqft: 1314, . . . },

{price: 275, sqft: 1200, . . . },

{price: 500, sqft: 650, . . . },

100


{price: 700, sqft: 3000, . . . },

{price: 445, sqft: 1700, . . . },

{price: 421, sqft: 1455, . . . },

{price: 411, sqft: 1314, . . . },

{price: 275, sqft: 1200, . . . },

{price: 500, sqft: 650, . . . },

230




.data(values)

.enter()

.append("g")














}



}




.data(values)

.enter()

.append("g")














}



}




.data(values)

.enter()

.append("g")














}



}




.data(values)

.enter()

.append("g")














}



}




.data(values)

.enter()

.append("g")














}



}




.data(values)

.enter()

.append("g")














}



}




.data(values)

.enter()

.append("g")














}



}




.data(values)

.enter()

.append("g")














}



}




.data(values)

.enter()

.append("g")














}



}




.data(values)

.enter()

.append("g")














}



}




.data(values)

.enter()

.append("g")














}



}





.data(values)

.enter()

.append("g")














}



}




.data(values)

.enter()

.append("g")














}



}




.data(values)

.enter()

.append("g")














}



}



var width = 400;

var height = 400;

// draw the x-axis

var xScale = d3.scaleLinear()

.domain([0, width*2])

.range([0, width]);

var xAxis = d3.axisBottom(xScale);

svg.append("g")

.attr("transform", "translate(10,410)")

.call(xAxis);

// draw the y-axis

var yScale = d3.scaleLinear()

.range([height,0]);

.domain([0, 4000]);

var yAxis = d3.axisRight(yScale);

svg.append("g").attr("transform", "translate(10, 10)")

.call(yAxis);

SD4x-3.11 809


var width = 400;

var height = 400;

// draw the x-axis



.range([0, width]);


svg.append("g")


.call(xAxis);

// draw the y-axis


.range([height,0]);

.domain([0, 4000]);



.call(yAxis);

SD4x-3.11 810


var width = 400;

var height = 400;

// draw the x-axis



.range([0, width]);


svg.append("g")


.call(xAxis);

// draw the y-axis


.range([height,0]);

.domain([0, 4000]);



.call(yAxis);

SD4x-3.11 811


var width = 400;

var height = 400;

// draw the x-axis



.range([0, width]);


svg.append("g")


.call(xAxis);

// draw the y-axis


.range([height,0]);

.domain([0, 4000]);



.call(yAxis);

SD4x-3.11 812


var width = 400;

var height = 400;

// draw the x-axis



.range([0, width]);


svg.append("g")


.call(xAxis);

// draw the y-axis


.range([height,0]);

.domain([0, 4000]);



.call(yAxis);

SD4x-3.11 813


var width = 400;

var height = 400;

// draw the x-axis



.range([0, width]);


svg.append("g")


.call(xAxis);

// draw the y-axis


.range([height,0]);

.domain([0, 4000]);



.call(yAxis);

SD4x-3.11 814


var width = 400;

var height = 400;

// draw the x-axis



.range([0, width]);


svg.append("g")


.call(xAxis);

// draw the y-axis


.range([height,0]);

.domain([0, 4000]);



.call(yAxis);

SD4x-3.11 815


var width = 400;

var height = 400;

// draw the x-axis



.range([0, width]);


svg.append("g")


.call(xAxis);

// draw the y-axis


.range([height,0]);

.domain([0, 4000]);



.call(yAxis);

SD4x-3.11 816


var width = 400;

var height = 400;

// draw the x-axis



.range([0, width]);


svg.append("g")


.call(xAxis);

// draw the y-axis


.range([height,0]);

.domain([0, 4000]);



.call(yAxis);

SD4x-3.11 817


var width = 400;

var height = 400;

// draw the x-axis



.range([0, width]);


svg.append("g")


.call(xAxis);

// draw the y-axis


.range([height,0]);

.domain([0, 4000]);



.call(yAxis);

SD4x-3.11 818


var width = 400;

var height = 400;

// draw the x-axis



.range([0, width]);


svg.append("g")


.call(xAxis);

// draw the y-axis


.range([height,0]);

.domain([0, 4000]);



.call(yAxis);

SD4x-3.11 819


400


var width = 400;

var height = 400;

// draw the x-axis



.range([0, width]);


svg.append("g")


.call(xAxis);

// draw the y-axis


.range([height,0]);

.domain([0, 4000]);



.call(yAxis);

SD4x-3.11 821


var width = 400;

var height = 400;

// draw the x-axis



.range([0, width]);


svg.append("g")


.call(xAxis);

// draw the y-axis


.range([height,0]);

.domain([0, 4000]);



.call(yAxis);

SD4x-3.11 822


var width = 400;

var height = 400;

// draw the x-axis



.range([0, width]);


svg.append("g")


.call(xAxis);

// draw the y-axis


.range([height,0]);

.domain([0, 4000]);



.call(yAxis);

SD4x-3.11 823



var width = 400;

var height = 400;

// draw the x-axis



.range([0, width]);


svg.append("g")


.call(xAxis);

// draw the y-axis


.range([height,0]);

.domain([0, 4000]);



.call(yAxis);

SD4x-3.11 825


var width = 400;

var height = 400;

// draw the x-axis



.range([0, width]);


svg.append("g")


.call(xAxis);

// draw the y-axis


.range([height,0]);

.domain([0, 4000]);



.call(yAxis);

SD4x-3.11 826


var width = 400;

var height = 400;

// draw the x-axis



.range([0, width]);


svg.append("g")


.call(xAxis);

// draw the y-axis


.range([height,0]);

.domain([0, 4000]);



.call(yAxis);

SD4x-3.11 827


var width = 400;

var height = 400;

// draw the x-axis



.range([0, width]);


svg.append("g")


.call(xAxis);

// draw the y-axis


.range([height,0]);

.domain([0, 4000]);



.call(yAxis);

SD4x-3.11 828


var width = 400;

var height = 400;

// draw the x-axis



.range([0, width]);


svg.append("g")


.call(xAxis);

// draw the y-axis


.range([height,0]);

.domain([0, 4000]);



.call(yAxis);

SD4x-3.11 829



Accessing Data with D3.js

• D3.js can easily access data on the Web that is available through RESTful APIs

SD4x-3.11 831

var values = [];

var URL = . . .

d3.json(URL, (response) => {

// populate the values from the data in

// response that comes back from request

. . .

});

// now use values with D3 functions



.data(values)

. . .




SD4x-3.11 832

var values = [];

var URL = . . .




. . .

});




.data(values)

. . .




SD4x-3.11 833

var values = [];

var URL = . . .




. . .

});




.data(values)

. . .




SD4x-3.11 834

var values = [];

var URL = . . .




. . .

});




.data(values)

. . .




SD4x-3.11 835

var values = [];

var URL = . . .




. . .

});




.data(values)

. . .




SD4x-3.11 836

var values = [];

var URL = . . .




. . .

});




.data(values)

. . .




SD4x-3.11 837

var values = [];

var URL = . . .




. . .

});




.data(values)

. . .




SD4x-3.11 838

var values = [];

var URL = . . .




. . .

});




.data(values)

. . .


Summary

• D3.js allows us to generate HTML and SVG elements based on data


• The data used by D3.js can include objects

• You can easily access data online using D3.js functions

SD4x-3.11 839


Review: Week 3

• React

• library and framework for creating reusable, modular components

• can render themselves based on their state

• can be combined and work together

• D3.js

• library for generating HTML and SVG based on data

• ES6: more recent version of JavaScript

SD4x-3.11 840