geetotes

class NeatoComponent extends React.Component {
 constructor() {
   super();
   this.state = {
     foo: this.props.foo,
     bar: this.props.bar
   }
 }
  
  render() {

geetotes

class NeatoComponent extends React.Component {
 constructor() {
   super();
   this.state = {
     foo: this.props.foo,
     bar: this.props.bar
   };
 }
  
 componentWillReceiveProps(nextProps) {

geetotes

function filterMyArray(filterProperty) {
  let _ = this.myArray.concat(); // safely copy myArray (which is an array of objects)
  let filtered = _.filter((i) => {
    return i.propery === filterPropery
  });
  
  return filtered;
}

geetotes

class GenericControlledForm extends React.Component {
 constructor() {
   super();
   this.state {
     name: '',
     occupation: ''
   };
   this._onChange = this._onChange.bind(this);
 }
  

geetotes

let PrettyLoader = (props) => {
  let style={ 'hidden' : props.loading === true ? true : false }; // Or whatever way you want to toggle the content
  return <PrettyLoader style={style}>{props.children}</PrettyLoader>;
};

geetotes

import React from 'react';
import { connect } from 'react-redux';

class PrettyLoader extends React.Component {
  _show() {
    // Don't forget that loading can be any data type you want!
    if (this.props.loading === true) {
      return (
        <div className="loading">
          <img src="crazyLoading.gif" />

geetotes

class Step1 extends React.Component {
  constructor(props) {
    super(props);
    // Bindings for form fields would go here,
    // and state would keep track of field input
  }
  _validate() {
    // a sanitized version of state can be passed instead
    this.props.afterValid(this.state)
  }

geetotes

class BasicWizard extends React.Component {
  constructor() {
    this.state = {
      steps: []
      currentStep: location.hash //obvs this is an unsafe way to do this -- this example is for conceptual purposes only
    };
  }
  
  // This keeps the hash updated when the user moves to the next step in the wizard
  componentDidUpdate() {

geetotes

class BasicWizard extends React.Component {
 constructor() {
   this.state = {
     currentStep: 1
   };
   
   this._next = this._next.bind(this);
   this._prev = this._prev.bind(this);
 }
 

geetotes

class Step1 extends React.Component {
 render() {
   if (this.props.currentStep !== 1) {
     return null;
   } 
   return(
     <p>This is step 1</p>
  );
}