heyjohnmurray

/** @jsx React.DOM */
var React = require('react');

var PersonTable = React.createClass({
  getInitialState: function(){
    return {
      data: [
        {id: 1, fname: 'John', lname: 'Murray'},
        {id: 2, fname: 'Wyatt', lname: 'Murray'},
        {id: 3, fname: 'McKenzie', lname: 'Murray'}

heyjohnmurray

var BaseButton = React.createClass({
  propTypes: {
    buttonText: React.PropTypes.string.isRequired,
    buttonColor: React.PropTypes.string,
    buttonHoverColor: React.PropTypes.string,
    useSpinner: React.PropTypes.bool,
    buttonHoverTextColor: React.PropTypes.string,
    buttonLink: React.PropTypes.string
  },
  

heyjohnmurray

/** @jsx React.DOM */
var React = require('react');

var ReactMixin = {
  componentWillMount: function(){
    console.log('will mount');
  },
}

var App = React.createClass({

heyjohnmurray

var App = React.createClass({
  render: function() {
    // notice that we have the "Button" and "Heart" components
    return <Button>I <Heart /> React</Button>
  }
});

var Button = React.createClass({
  render: function() {
    // notice that this.props.children gave us the value of both the "Button" and the "Heart" component

heyjohnmurray

// learn more about refs: https://facebook.github.io/react/docs/more-about-refs.html

var App = React.createClass({
  getInitialState: function(){
    return {
      red: 0,
      green: 0,
      blue: 0
    }
  },

heyjohnmurray

var App = React.createClass({
  getInitialState: function() {
    return {
      text: 'this is initial state text',
    };
  },

  // update is a custom function we've created
  update: function(e) {
    this.setState({text: e.target.value});

heyjohnmurray

var App = React.createClass({
  getInitialState: function() {
    return {
      text: 'this is initial state text',
    };
  },

  // update is a custom function we've created
  update: function(e) {
    // this.setState is the key to update text in this example

heyjohnmurray

var App = React.createClass({
  // get initial state is the key to passing info.
  getInitialState: function() {
    return {
      text: 'this is initial state text'
    };
  },
  render: function() {
    return (
      // this.state is the key to rendering the info

heyjohnmurray

// You can attach elment attributes to your app and read them in your rendered UI
React.render(<App text="this is a text value. wow!" />, document.body);

// 'text' in this example can now be passed from your app logic to your rendered UI view.


// basic properties instance
var App = React.createClass({
  render: function() {
    var text = this.props.text;

heyjohnmurray

/** @jsx React.DOM */
var React = require('react');

var App = React.createClass({
	render: function() {
		var text = this.props.text;
		return (
			<h1>{text}</h1>
		);
	}