React DC

Initial Reactions (Meetup #1)

Tonight

• Introductions
• What is React?
• Contest
• Hack
• Prizes
• Beer?

Organizers

• Judy Jow
     @judyjow
     @jjow
   
• Rohit Kalkur
     @rovolutionary
     @rovolution
   
• Ricky Vetter
     @rickyvetter
     @rickyvetter

Members

• Who you are
• What you do
• Why you're here
• What you want out of React DC
• How do you want to contribute to React DC?

What is React?

(Jump in, ask questions)

What is React not?

• An MVC framework (Angular, Ember)
• A two-way binding framework (KO)

It is...

• Modular
• Consistent
• Fast
• Data => Visual Content

Modular

• Modules are "Components"
• props
• Mixins

/** @jsx React.DOM */
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.renderComponent(<HelloMessage name="John" />, mountNode);

Consistent

• State (with itself)
• JSX (with what you're used to)

/** @jsx React.DOM */
var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});

React.renderComponent(<Timer />, mountNode);

return (
  React.DOM.div(
    null,
    "Seconds Elapsed: ",
    this.state.secondsElapsed
  )
);

Fast

• Virtual DOM
  • Internal diffing
• One-way data flow

Data => Visual Content

Resources

• http://facebook.github.io/react/
• http://www.futureinsights.com/home/reactjs-secrets-of-the-virtual-dom.html
• https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
• More resources???

Contest

• Make a React App that handles voting
• Vote for your favorites
• At 10pm the winners will be announced
• The winning group gets
  • to be the official topic voting app of React DC
  • $20 Amazon gift card

YOU DON'T HAVE TO COMPETE. MAKE ANYTHING!

Contest Links

• Instructions: github.com/reactdc/react-dc-voting
• Example: react-dc-voting.herokuapp.com
• Vote: react-dc-voting-meta.herokuapp.com