heyjohnmurray

var readyFunction = function () {
	// begin to put your code here
}

if (document.readyState != 'loading') {
	readyFunction();
}
else {
	document.addEventListener('DOMContentLoaded', readyFunction)
}

heyjohnmurray

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('sass', function() {
  return gulp.src(paths.styles.src + 'partials/*.scss')
    .pipe(sourcemaps.init()) // all your piping needs to fit between the sourcemaps.init() and sourcemaps.write()
    .pipe(concat('main.css'))
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false

heyjohnmurray

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

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

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

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

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({
  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

// 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({
  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

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

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

var App = React.createClass({