grantsheppard

<button onClick={this.openModal}>open modal</button>

<Modal>
  <button onClick={this.closeModal}>Close</button>
</Modal>

grantsheppard

const imperativeDouble = numbers => {
  const doubled = []
  for (i = 0; i < numbers.length; i++) {
    doubled.push(numbers[i] * 2)
  }
  return doubled;
}

const declarativeDouble = numbers => numbers.map(n => n * 2)

grantsheppard

class Tabs extends React.Component {
  static propTypes = {
    data: React.PropTypes.array.isRequired
  }

  state = {
    activeTabIndex: 0
  }

  handleTabClick(activeTabIndex) {

grantsheppard

const DATA = [
 { id: 1, name: 'USA', description: 'Land of the Free, Home of the brave' },
 { id: 2, name: 'Brazil', description: 'Sunshine, beaches, and Carnival' },
 { id: 3, name: 'Russia', description: 'World Cup 2018!' }
].reverse()

grantsheppard

////////////////////////////////////////////////////////////////////////////////
// Exercise:
//
// - change the contents of the render function and save the file
// - see the updates automatically in your browser without refreshing!
////////////////////////////////////////////////////////////////////////////////
import React from 'react'
import ReactDOM from 'react-dom'

function App() {