React Classes

classes.jsx

// containers/Character.jsx
import React, { PropTypes } from 'react'
import GameOver from '../components/GameStates'
import UserActions from '../components/UserActions'

// PropTypes let us require that the correct props are given -
// this is just setting up and is not actually connected yet though
const propTypes = {
  name: PropTypes.string.isRequired,
  hp: PropTypes.number.isRequired,
}

// here's our ES6 class instead of using createClass
class Character extends React.Component {
  // ES6 classes allow an implied constructor; under the covers we have this:
  // constructor(props) {
  //  super(props)
  //  this.state = {
  //    name: props.name,
  //    hp: props.hp,
  //  }
  // }
  
  state = {
    name: this.props.name,
    hp: this.props.hp,
  }

  // ES6 fat arrow notation. This is very helpful. Now you don't need to bind the function to `this`
  // in the constructor (this.dealDamage = this.dealDamage.bind(this), very awkward)
  receiveAttack = (damage) => {
    const newHp = this.state.hp - damage;

    // Here we change the state of the HP in place, way up at the top level container - it will be called from a component
    // further down
    this.setState({ hp: newHp })
  }
  
  isDead = () => {
    return this.state.hp <= 0
  }
  
  renderDeadOrAlive = () => {
    if (this.isDead()) {
      <GameOver name={this.state.name} />
    } else {
      // The function is passed down here, so that we can call it later and not change state in components
      <UserActions receiveAttack={this.receiveAttack} />
    }
  }
  
  render() {
    {this.renderDeadOrAlive()}
  }
}

// Here we connect propTypes so React can check our work
Character.propTypes = propTypes;

// Here we export so we can import in other classes (probably App.jsx in this case, or a rails view when using
// gems that combine react + rails
export default Character;

----
// components/GameStates.jsx
import React, { PropTypes } from 'react'
import css from '../assets/styles.scss'

const propTypes = {
  name: PropTypes.string.isRequired, 
}

// This is a stateless function. We don't need any kind of licecycle methods in this component so this is used
// It is (eventually) going to be made quicker than straight classes, but I think right now that is just a goal
// AFAIK it isn't any slower, and is much less overhead to code
const GameOver = ({ name }) => {
  return (
    <p className={css.game_over_message}>Sorry {name}, you are dead!</p>  
  )
}

// Note that I am using ES6 style to return inline. Could do the same with the function above. Once you need to do something
// more than straight return, you need to use the other style
const NewGame = ({ name }) => (
  <p className={css.new_game_message}>Hello {name}, want to play?</p>  
)

GameOver.propTypes = propTypes;

export { GameOver, NewGame }