StevenJL

var CommentBox = React.createClass({

  // getInitialState is called right when the component is initialized
  // its return value is set as the component's state
  getInitialState: function() {
    return {data: []};
  },

  // componentDidMount is called right when the DOM element is first mounted
  // it is not called again every time the component re-renders

StevenJL

var CommentForm = React.createClass({
  getInitialState: function() {
    return {author: '', text: ''};
  },

  handleAuthorChange: function(e) {
    this.setState({author: e.target.value});
  },

  handleTextChange: function(e) {

StevenJL

var CommentBox = React.createClass({
  loadCommentsFromServer: function() {
    ...
  },
  handleCommentSubmit: function(comment) {
    // this callback POSTs the comment to the server
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',

StevenJL

var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// pretty cool, eh?

StevenJL

var smallArray = [2,3,4]
var bigArray = [1, ...smallArray, 5, 6, 7] // [1, 2, 3, 4, 5, 6, 7]

// You can use it in function arguments
var foo = function(a,b,c){ return a+b+c; }
var args = [1,2,3]
foo(...args)
// like Ruby's splat, no?

StevenJL

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} baz={z}/>;

StevenJL

{
  type: "ADD_TODO",
  text: "Write an article comparing 'Sexy and the City' with 'War and Peace'"
}

{
  type: "COMPLETE_TODO",
  index: 5 // refers to the index in the array which this todo presumably lives in
}

StevenJL

export function addTodo(text){
  return {
    type: "ADD_TODO",
    text: text
  }
}

export function completeTodo(index){
  return {type: "COMPLETE_TODO", index}
}

StevenJL

// example of a store for a todo app
{
  visibilityFilter: "SHOW_ALL",
  todos: [
    {text: "Give the monkey a haircut", completed: false},
    {text: "Buy tuxedo for pet snake", completed: true},
    {text: "Listen to Captain Beefheart's 'Troutmask Replica'", completed: false}
  ]
}

StevenJL

// an initial state
// `const` means the variable cannot be reassigned, it does not
// `const` DOES NOT mean the value it points to is immutable
const initialState = {
  visbilityFilter: "SHOW ALL",
  todos: []
}

// The naming convention is we call the reducer the same name as whatever it is updating.
// In this case, it is a reducer that updates the todo-app, so we just call it `todoApp`.