bad6e

import React from 'react'

class BasicFormRefactored extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      firstName: '',
      age: '',
    }

bad6e

import React from 'react'

class BasicForm extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      firstName: '',
      age: '',
    }

bad6e

onChange = (event) => {
  const { target: { name, value } } = event
  this.setState({ [name]: value, event: event })
}

bad6e

import React from 'react'
import CheckboxButtonGroup, { CheckboxButton } from 'components/utils/CheckboxButtonGroup'

class DemoCheckboxButtonGroup extends React.Component {
  constructor(props) {
    super(props)
    this.state = { checkboxDemo: ['red'], event: {} }
  }

  onChange = (event) => {

bad6e

 handleBorrowerToggle = (event) => {
   const { target: { name, value } } = event
   this.setState({ [name]: value, event })
 }

bad6e

lender = Lender.find :id
team_roles = TeamRole.where(roleable_id: lender.id)

for role in team_roles
   role.update(default: true)
end

bad6e

org = Organization.find :id
active_teams = org.teams.active

for team in active_teams
  team.update(defaults_set: true)
end

bad6e

org = Organization.find(575)
teams = org.teams

teams.each do |team|
  team.update(status_change_notifications: false)
end

bad6e

Use this gist to write down notes and questions as you read through the lesson plan. https://github.com/turingschool/lesson_plans/blob/master/ruby_04-apis_and_scalability/react_in_theory.markdown

What does React do?

It allows users to build small reusable compoents which displays data.

How does React interact with the DOM?

Each component has a render() function that will be called when the component is mounted on the DOM. It will execute all the code in component and render the JS/HTML.

bad6e

function countDown(number){
  if (number >= 0){
    console.log(number);
    number = number - 1;
    countDown(number);
  }  
}

countDown(5);