Chryus

// prints '5' 5 times
// yikes that's not what we want
// the code runs so fast and creates only one binding of i equal to its last value, 5
for (var i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000);  
}

// solution 1: pass setTimeout a callback with arguments

Chryus

animate() {
  let delaySoFar = 0;
  
  for (let sequence of this.dataSet) {
    let delay = sequence[0] + delaySoFar;
    let objects = sequence.filter(this.isObject);
    let styles = this.formatStyles(objects);  

    setTimeout(() => {
      this.element.style = styles;

Chryus

input: [
  [100, { width: "10%" }],
  [200, { width: "20%" }],
  [200, { width: "50%" }],
  [200, { width: "80%" }],
  [300, { width: "90%" }],
  [100, { width: "100%" }]
]

Chryus

function Prompt(props) {
  return (
    <h1>{this.props.route.header}</h1>
    <div className="col-sm-12">
      <form onSubmit={this.onSubmitUser}>
        <div className="form-group">
          <input 
            className="form-control" 
            placeholder="Github Username"
            type="text"

Chryus

import React from 'react'
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
import App from '../components/App'
import Home from '../components/Home'
import PromptContainer from '../containers/PromptContainer'

module.exports = (
   <Router history={hashHistory}>
      <Route path='/' component={App}>
        <IndexRoute component={Home}></IndexRoute>

Chryus

import React from 'react'
import Prompt from '../components/Prompt'

class PromptContainer extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
    this.handleUpdateUser = this.handleUpdateUser.bind(this);
    this.handleSubmitUser = this.handleSubmitUser.bind(this);
  }

Chryus

ReactDOM.render(
  <Avatar user={user_data} />,
  document.getElementById('avatar')
)

Chryus

function ProfilePic(props) {
  return (
    <img src={props.imageUrl} style={{width:100, height:100}}/>
  );
}

function ProfileName(props) {
  return (
    <div>{props.name}</div>
  );

Chryus

function Avatar(props) {
  return (
    <div>
      <ProfilePic imageUrl={props.user.image} />
      <ProfileName name={props.user.name} />
      <ProfileLink username={props.user.username} />
    </div>
  );
}

Chryus

const user_data = {
  name: 'Chris Haaaaaaaack',
  username: 'chryus',
  image: 'https://avatars0.githubusercontent.com/u/5354390?v=3&s=460'
}

ReactDOM.render(
  <Avatar user={user_data} />,
  document.getElementById('avatar')
)