Notes on "7 Minutes with React"

notes-7-min-with-react.js

// React JS Notes
// All of the following uses JSX compiling, without JSX the HTML-style syntax isn't possible.
// See this as a reference: http://jsbin.com/falicahequ/1/edit?html,js,output

// The basic unit of React is a "component", created like so...

var React = require('react');

var Component = React.createClass({
  render: function() {
    return (
      <h1>Hello World!</h1>
    )
  }
});

// Then to render the component, we use React's render() method...

React.render(<Component></Component>, document.body);

// Now we want to get some models involved. First, let's create some models...

var people = [
  {
    name: 'Chris Malven',
    title: 'Interactive Design Lead',
    avatar: 'chris.jpg'
  },
  {
    name: 'David Sieren',
    title: 'Creative Director',
    avatar: 'david.jpg'
  }
]

// And add a getInitialState() method to our component that grabs a model

var Component = React.createClass({
  getInitialState: function() {
    return people[0];
  },

  render: function() {
    return (
      <h1>{ this.state.name }</h1>
      <img src={ this.state.avatar } alt="" />
      // Notice the src attribute above doesn't have surrounding quotes
    )
  }
});

// Awesome! Now we're talking! But what if we want to have multiple components?
// Let's create a new component to hold our existing components

var App = React.createClass({

  render: function() {
    return (
      <div>
        <Component></Component>
        <Component></Component>
      </div>
    )
  }
});

// Okay, great. But this will just render the same Person twice.
// Instead of state in our original component, we need to use props.
// Let's update our original Component...

var Component = React.createClass({

  render: function() {
    return (
      <h1>{ this.props.name }</h1>
      <img src={ this.props.avatar } alt="" />
    )
  }
});

// And move the getInitialState() into our App component

var App = React.createClass({
  getInitialState: function() {
    return {
      people: people
    }
  },

  render: function() {
    return (
      <div>
        { this.state.people.map(function (person) {
          return (
            <Component name={ person.name } avatar={ person.avatar }></Component>
          )
        }) }
      </div>
    )
  }
});

// Okay, so that's actually a pretty ugly-looking way to loop through and output a bunch of models. But it works.