prop types react

by sendil J

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="            https://unpkg.com/[email protected]/prop-types.js                                 "></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="app"></div>

SCSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}
.stage {
  font-weight: 300;
  font-family: Helvetica, Arial, sans-serif;
  position: relative
}

.annoy {
  transition:0.25s ease-out all;
  position: absolute;
  width: 125px;
  height: 50px;
  background: #333;
  display: table;
  font-size: 1.5rem;
  span {
    color: #fff;
    display: table-cell;
    vertical-align: middle;
    text-align: center
  }
}

Babel + JSX

const getRandomPoint = (elementWidth, elementHeight) => {
  let x = (Math.random() * (window.innerWidth - elementWidth)).toFixed()
  let y = (Math.random() * (window.innerHeight - elementHeight)).toFixed()

  return {
    x: x + 'px',
    y: y + 'px'
  }
}
class Annoyance extends React.Component {

  constructor(props) {
    super(props)

    this.jump = this.jump.bind(this)
    
    this.state = {
      style: {
        top: '70px',
        left: '40px'
      }
    }
  }

  jump(event) {
    let point = getRandomPoint(125, 50);
    this.setState({
      style: {
        top: point.y,
        left: point.x
      }
    });
  }

  render() {
    return (
    <div className="annoy" onMouseEnter={ this.jump } style={ this.state.style }> <span>{ this.props.title }</span></div>
    )
    
  }
}

Annoyance.propTypes = {
  title: React.PropTypes.string.isRequired
}
class TodoApp extends React.Component {
 constructor(props) {
    super(props)
  }

  render() {
    return (
      <div className="stage">
      <h2>Catch me if you can</h2>
      <Annoyance title="Here!" />
     </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))