Video 3.1 React.js: Introduction Chris Murphy · Property of Penn Engineering, Chris Murphy Normal...

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

SD4x-3.1 9

Change has been made to any given

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>

</head>

<body>

</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 – 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

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>

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>,

document.getElementById('container'));

SD4x-3.3 129

ReactDOM.render(

</div>,

SD4x-3.3 130

ReactDOM.render(

</div>,

SD4x-3.3 131

ReactDOM.render(

</div>,

SD4x-3.3 132

ReactDOM.render(

</div>,

SD4x-3.3 133

ReactDOM.render(

</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 (

{name} </span>

{'\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' } );

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

SD4x-3.3 172

super(props);

handleMouseOver() {

handleMouseOut() {

handleClick() {

SD4x-3.3 173

super(props);

handleMouseOver() {

handleMouseOut() {

handleClick() {

SD4x-3.3 174

super(props);

handleMouseOver() {

handleMouseOut() {

handleClick() {

SD4x-3.3 175

super(props);

handleMouseOver() {

handleMouseOut() {

handleClick() {

SD4x-3.3 176

super(props);

handleMouseOver() {

handleMouseOut() {

handleClick() {

SD4x-3.3 177

super(props);

handleMouseOver() {

handleMouseOut() {

handleClick() {

SD4x-3.3 178

super(props);

handleMouseOver() {

handleMouseOut() {

handleClick() {

SD4x-3.3 179

super(props);

handleMouseOver() {

handleMouseOut() {

handleClick() {

SD4x-3.3 180

super(props);

handleMouseOver() {

handleMouseOut() {

handleClick() {

SD4x-3.3 181

super(props);

handleMouseOver() {

handleMouseOut() {

handleClick() {

SD4x-3.3 182

super(props);

handleMouseOver() {

handleMouseOut() {

handleClick() {

SD4x-3.3 183

super(props);

handleMouseOver() {

handleMouseOut() {

handleClick() {

SD4x-3.3 184

super(props);

handleMouseOver() {

handleMouseOut() {

handleClick() {

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)}/>

</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 (

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

value={this.state.text} />

</form>

</div>

SD4x-3.4 266

render() {

return (

</form>

</div>

SD4x-3.4 267

render() {

return (

</form>

</div>

SD4x-3.4 268

render() {

return (

</form>

</div>

SD4x-3.4 269

render() {

return (

</form>

</div>

SD4x-3.4 270

render() {

return (

</form>

</div>

SD4x-3.4 271

render() {

return (

</form>

</div>

SD4x-3.4 272

render() {

return (

</form>

</div>

SD4x-3.4 273

render() {

return (

</form>

</div>

SD4x-3.4 274

render() {

return (

</form>

</div>

SD4x-3.4 275

class TodoList extends React.Component {

render() {

return (

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

return

render() {

return (

SD4x-3.4 276

render() {

return (

return

render() {

return (

SD4x-3.4 277

render() {

return (

return

render() {

return (

SD4x-3.4 278

render() {

return (

return

render() {

return (

SD4x-3.4 279

render() {

return (

return

render() {

return (

SD4x-3.4 280

render() {

return (

return

render() {

return (

SD4x-3.4 281

render() {

return (

return

render() {

return (

SD4x-3.4 282

render() {

return (

return

render() {

return (

SD4x-3.4 283

render() {

return (

return

render() {

return (

SD4x-3.4 284

render() {

return (

return

render() {

return (

SD4x-3.4 285

render() {

return (

return

render() {

return (

SD4x-3.4 286

render() {

return (

return

render() {

return (

SD4x-3.4 287

render() {

return (

return

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>

SD4x-3.5 334

render() {

return (

</div>

SD4x-3.5 335

render() {

return (

</div>

SD4x-3.5 336

render() {

return (

</div>

SD4x-3.5 337

render() {

return (

</div>

SD4x-3.5 338

render() {

return (

</div>

SD4x-3.5 339

render() {

return (

</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(

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

• 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 (

<img className='article-image'

title={article.title}

src={imgURL} />

</div>

SD4x-3.6 419

Displaying Data

return (

src={imgURL} />

</div>

SD4x-3.6 420

Displaying Data

return (

src={imgURL} />

</div>

SD4x-3.6 421

Displaying Data

return (

src={imgURL} />

</div>

SD4x-3.6 422

Displaying Data

return (

src={imgURL} />

</div>

SD4x-3.6 423

Displaying Data

return (

src={imgURL} />

</div>

SD4x-3.6 424

Displaying Data

return (

src={imgURL} />

</div>

SD4x-3.6 425

Displaying Data

return (

src={imgURL} />

</div>

SD4x-3.6 426

Displaying Data

return (

src={imgURL} />

</div>

SD4x-3.6 427

Displaying Data

return (

src={imgURL} />

</div>

SD4x-3.6 428

Displaying Data

return (

src={imgURL} />

</div>

SD4x-3.6 429

Displaying Data

return (

src={imgURL} />

</div>

SD4x-3.6 430

Displaying Data

return (

src={imgURL} />

</div>

SD4x-3.6 431

Displaying Data

return (

src={imgURL} />

</div>

SD4x-3.6 432

Displaying Data

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

render () {

return this.state.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>

SD4x-3.7 465

render() {

return (

</div>

SD4x-3.7 466

render() {

return (

</div>

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)} />

<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

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>

<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

<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>

</head>

<body>

</svg>

// next slide -->

</script>

</body>

</html>

SD4x-3.9 642

<html>

<head>

</head>

<body>

</svg>

// next slide -->

</script>

</body>

</html>

SD4x-3.9 643

<html>

<head>

</head>

<body>

</svg>

// next slide -->

</script>

</body>

</html>

SD4x-3.9 644

<html>

<head>

</head>

<body>

</svg>

// next slide -->

</script>

</body>

</html>

SD4x-3.9 645

<html>

<head>

</head>

<body>

</svg>

// next slide -->

</script>

</body>

</html>

SD4x-3.9 646

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

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 648

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 649

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 650

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 651

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 652

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 653

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 654

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 655

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 656

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 657

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 658

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 659

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 660

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 661

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 662

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 663

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 664

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 665

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 666

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4,

fill: 'yellow'

</script>

SD4x-3.9 667

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4

</script>

SD4x-3.9 668

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4

</script>

SD4x-3.9 669

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

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4

</script>

SD4x-3.9 671

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4

</script>

SD4x-3.9 672

var circle = {

x: 50,

y: 50,

r: 40,

stroke: 'blue',

width: 4

</script>

SD4x-3.9 673

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>

SD4x-3.10 680

<style>

rect {

fill: darkred;

rect:hover {

fill: darkblue;

.chart text {

fill: white;

text-anchor: end;

</style>

</svg>

SD4x-3.10 681

<style>

rect {

fill: darkred;

rect:hover {

fill: darkblue;

.chart text {

fill: white;

text-anchor: end;

</style>

</svg>

SD4x-3.10 682

<style>

rect {

fill: darkred;

rect:hover {

fill: darkblue;

.chart text {

fill: white;

text-anchor: end;

</style>

</svg>

SD4x-3.10 683

<style>

rect {

fill: darkred;

rect:hover {

fill: darkblue;

.chart text {

fill: white;

text-anchor: end;

</style>

</svg>

SD4x-3.10 684

<style>

rect {

fill: darkred;

rect:hover {

fill: darkblue;

.chart text {

fill: white;

text-anchor: end;

</style>

</svg>

SD4x-3.10 685

<style>

rect {

fill: darkred;

rect:hover {

fill: darkblue;

.chart text {

fill: white;

text-anchor: end;

</style>

</svg>

SD4x-3.10 686

<style>

rect {

fill: darkred;

rect:hover {

fill: darkblue;

.chart text {

fill: white;

text-anchor: end;

</style>

</svg>

SD4x-3.10 687

<style>

rect {

fill: darkred;

rect:hover {

fill: darkblue;

.chart text {

fill: white;

text-anchor: end;

</style>

</svg>

SD4x-3.10 690

<style>

rect {

fill: darkred;

rect:hover {

fill: darkblue;

.chart text {

fill: white;

text-anchor: end;

</style>

</svg>

SD4x-3.10 691

<style>

rect {

fill: darkred;

rect:hover {

fill: darkblue;

.chart text {

fill: white;

text-anchor: end;

</style>

</svg>

SD4x-3.10 692

<style>

rect {

fill: darkred;

rect:hover {

fill: darkblue;

.chart text {

fill: white;

text-anchor: end;

</style>

</svg>

SD4x-3.10 693

<style>

rect {

fill: darkred;

rect:hover {

fill: darkblue;

.chart text {

fill: white;

text-anchor: end;

</style>

</svg>

SD4x-3.10 694

<style>

rect {

fill: darkred;

rect:hover {

fill: darkblue;

.chart text {

fill: white;

text-anchor: end;

</style>

</svg>

SD4x-3.10 695

<style>

rect {

fill: darkred;

rect:hover {

fill: darkblue;

.chart text {

fill: white;

text-anchor: end;

</style>

</svg>

SD4x-3.10 696

<style>

rect {

fill: darkred;

rect:hover {

fill: darkblue;

.chart text {

fill: white;

text-anchor: end;

</style>

</svg>

SD4x-3.10 697

<style>

rect {

fill: darkred;

rect:hover {

fill: darkblue;

.chart text {

fill: white;

text-anchor: end;

</style>

</svg>

SD4x-3.10 698

<style>

rect {

fill: darkred;

rect:hover {

fill: darkblue;

.chart text {

fill: white;

text-anchor: end;

</style>

</svg>

SD4x-3.10 699

<style>

rect {

fill: darkred;

rect:hover {

fill: darkblue;

.chart text {

fill: white;

text-anchor: end;

</style>

</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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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];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

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

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

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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

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

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

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

function insert() {

drawChart();

</script>

SD4x-3.10 742

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

function insert() {

drawChart();

</script>

SD4x-3.10 743

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

function insert() {

drawChart();

</script>

SD4x-3.10 744

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

function insert() {

drawChart();

</script>

SD4x-3.10 745

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

function insert() {

drawChart();

</script>

SD4x-3.10 746

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

function insert() {

drawChart();

</script>

SD4x-3.10 747

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

function insert() {

drawChart();

</script>

SD4x-3.10 748

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

function insert() {

drawChart();

</script>

SD4x-3.10 749

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

function insert() {

drawChart();

</script>

SD4x-3.10 750

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

function insert() {

drawChart();

</script>

SD4x-3.10 751

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

function insert() {

drawChart();

</script>

SD4x-3.10 752

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

function insert() {

drawChart();

</script>

SD4x-3.10 753

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

function insert() {

drawChart();

</script>

SD4x-3.10 754

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

function insert() {

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>

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>

var values = [

SD4x-3.11 762

<html>

<head>

</head>

<body>

</svg>

var values = [

SD4x-3.11 763

<html>

<head>

</head>

<body>

</svg>

var values = [

SD4x-3.11 764

<html>

<head>

</head>

<body>

</svg>

var values = [

SD4x-3.11 765

<html>

<head>

</head>

<body>

</svg>

var values = [

SD4x-3.11 766

<html>

<head>

</head>

<body>

</svg>

var values = [

SD4x-3.11 767

<html>

<head>

</head>

<body>

</svg>

var values = [

SD4x-3.11 768

<html>

<head>

</head>

<body>

</svg>

var values = [

SD4x-3.11 769

<html>

<head>

</head>

<body>

</svg>

var values = [

SD4x-3.11 770

<html>

<head>

</head>

<body>

</svg>

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, . . . },

.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, . . . },

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

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

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

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

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

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

.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

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

Video 3.1 React.js: Introduction Chris Murphy · Property of Penn Engineering, Chris Murphy Normal...

Documents

p1 · — Pure NodeJS+EJS vs NodeJS+React.js Basic Command lines in React.js CLI - New React.js Project Review Project Structure - ES2016 (Javascript for React.js) — JSX and Virtual—DOM

React.js for Rails Developers

React.JS Conf & F8

Broken Bodies, Broken System - Chris Murphy

Mobprogramming on React.js

An introduction to React.js

Chris Murphy, Moses Vaughan, Waseem Ilahi, Gail Kaiser Columbia University

Chris Murphy building services consultancy

Continental Airlines Customer Analysis Chris Dwyer, Meghan Murphy, Kassonga Mwamba

React.js By example

Thursday 25 th July 5.30pm Dr Murphy GP Mr Chris Watson Practice Manager

How to use React.js

Michael Clark, Charlie Murphy, Tony Jameson-Allen, Chris ...eprints.lse.ac.uk/69000/1/Clark_Sporting memories, dementia care.pdfMichael Clark, Charlie Murphy, Tony Jameson-Allen, Chris

Intro to React.js

React.js Basics - ConvergeSE 2015

Chris murphy aviva presentation

The Case for React.js and ClojureScript

Building websites using React.js and WordPress API€¦ · Bespoke everywhere! THE BEGINNING • Few tutorials about React.js and Redux • WordPress API. THE APPROACH • React.js

Ý w React · Learn why React.js is special Core concepts Implement features in React.js codewinds.com w What makes React.js special? Simple to learn Composable Components Declarative

Developing SLDS Apps with React.js