react-background.js

// function expression
function myFunction () {
  console.log('hello world')
}

// function declaration 
const myFunction = function () {
  console.log('hello world')
}

// function declaration using ES6 arrow function
const myFunction = () => {
  console.log('hello world')
}

/*
Constructor function takes in data as arguments and returns an object. IE,
it constructs and object using input data in some kind of fixed format.
*/

const classRoom = []

const mike = {
  firstName: "Mike",
  lastName: "Walker",
  averageScore: 79,
  missing: {
    homework: 2,
    classwork: 0
  },
  calculateGrade = function () {
    return this.averageScore
  }
}

const sarah = {
  firstName: "Sarah",
  lastName: "Parker",
  averageScore: 90,
  missing: {
    homework: 0,
    classwork: 0
  },
  calculateGrade = function () {
    return this.averageScore
  }
}

classRoon.push(mike)
classRoom.push(sarah)


// CONSTRUCTOR FUNCTION RULES
// first letter of function name is always capitalized
// you use `this` inside function to defined object that will be constructed
function Student (firstName, lastName, averageScore, missingHomework, missingClasswork) {
  this.firstName = firstName
  this.lastName = lastName
  this.averageScore = averageScore
  this.classwork = {
    missingClasswork,
    missingHomework
  }
}

Student.prototype.calculateGrade = function() {
  return this.averageScore
}


// when you create an instance of an object using a constructor function,
// you use the `new` keyword in front
const pat = new Student('Pat', 'Stewart', 100, 0, 0)
const charles = new Student('Charles', 'Slim', 80, 1, 0)

pat.calculateGrade()

// const message = 'hello world'
// const message = new String('hello world')



class Student {
  constructor (firstName, lastName, averageScore, missingHomework, missingClasswork) {
    this.firstName = firstName
    this.lastName = lastName
    this.averageScore = averageScore
    this.classwork = {
      missingClasswork,
      missingHomework
    }
  }

  calculateGrade() {
    return this.averageScore
  }

}

// stateless components
// using class syntax
class SideBar {
  render () {
    return (
      <div>
        hello world!
      </div>
    )
  }
}

// using a function
const SideBar = () => {
  return (
    <div>
      hello world!
    </div>
  )
}

// stateful components
// must use class syntax
class SideBar extends React.Component {
  
  constructor(props) {
    super(props)
    this.state = {
      message: 'hello world'
    }
  }

  handleClick () {
    this.setState({ message: this.state.message.reverse() })
  }

  render () {
    return (
      <div>
        <button onClick={ this.handleClick }>click me?!</button>
        <Widget thing={ this.state.message }
                otherThing="this thing"/>
      </div>
    )
  }
}

const Widget = props => {
  return (
     <div>{ props.thing }</div>
  )
}

const Widget = props => <div>{ props.thing }</div>