2018-03-01React.md

React Day 2

syntactical differences

Modern JavaScript

• let & const - prefer const
• Arrow functions > function

// gross
function greet(greeting) {
  return greeting
}

// ʕ•ᴥ•ʔ
const greet = () => greeting

• spread operator ... technically an "experimental" feature that's analagous to Object.assign. it makes working with objects an absolute treat.

"don't take that tone with me": Declarative vs. Imperative

vanilla JS & jQuery - imperative

var button = document.getElementById('#button');
document.addEventListener('click', function () { console.log('javascript sucks') })
// more spaghetti code I don't feel like writing

React - declarative: no more bossing the DOM around

export default class Foo extends Component {

  constructor (props) {
    super(props)
    this.state = {
      count: 0,
    }
  }

  // this is where the declarative magic happens
  handleClick = () => this.setState({ ...state, count: state.count + 1 })

  render () {

    const { count } = this.state

    return (
      <div>
        <button onClick={this.handleClick}>
          INCREMENT
        </button>
        <span>
          {count}
        </span>
      </div>
    )
  }

}

common first mistake:

// (ノಠ益ಠ)ノ彡┻━┻
this.state.something = 'prop'

// (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
this.setState({
  something: prop
})

Props

• takes some getting used to, but just remember 2 fundamental rules when you're first starting out:

1. set the prop - like an HTML attribute:

import Count from './Count'

export default class Foo extends Component {

  constructor (props) {
    super(props)
    this.state = {
      count: 0,
    }
  }

  handleClick = () => this.setState({ ...state, count: state.count + 1 })

  render () {

    const { count } = this.state

    return (
      <div>
        <button onClick={this.handleClick}>
          INCREMENT
        </button>
        <Count
          count={count}
        />
      </div>
    )
  }

}

2. get the prop ~ like a JavaScript object - cuz that's actually what props are under the hood ( ͡° ͜ʖ ͡°)

// Count.js

const Count = (props) =>
  <span>{props.count}</span>

export default Count

question: why doesn't <Count /> need its own state?

State

• if your Application needs some kind of "memory", you use state
• Use sparingly. Try to have as few stateful components as possible. You'll thank me later.

Events

• seem confusing, but actually pretty straightforward if you remember: event is passed as the first argument to your handler.

e.g.

• if you need the event, grab it as the first argument in your callback

handleDoStuffWithTheEvent = (event) =>
  console.log(event)

render () {
  return (
    <div>
      <button
        onClick={(event) => this.handleDoStuffWithTheEvent(event)}
      />
    </div>
  )
}

• otherwise, just call your handler and let it do its thang

<button
  onClick={() => handleDoStuff()}
/>

If you find yourself trying to affect elements of the UI directly - by imperatively resetting intrinsic attributes of their styles, etc - that should be a red flag that you need to find a more declarative way to change your UI (think "How can this UI change be expressed in terms of State or Props?")

recommended reading

• what's that super() thing? go find out
• what's the deal with .bind? it's a class thing

make your project

cd javascript-workbook
git checkout gh-pages
git checkout -b new-branch
cd 07week
create-react-app react-tictactoe
cd react-tictactoe

# open 07week/ticTacToe/script.js and copy the `render` method into react-tictactoe/App.js

if Atom gives you linter issues

1. create a new .eslintrc.json file in your react-tictactoe directory

touch .eslintrc.json

2. copy the .eslintrc.json I posted in your Rocket.Chat channel
3. paste it into your new .eslintrc.json