cmalven · February 6, 2015 19:50 · Feb 6, 2015
diff --git a/notes-7-min-with-react.js b/notes-7-min-with-react.js
@@ -0,0 +1,103 @@
+// 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.