gistfile1.txt

//ES6 React Component imports, standard
import React, { Component } from 'react'
//import our redux connectors
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
//import our action file so that we can quickly dispatch whatever we need.
import * as ImportedActions from '../actions/actionFile';

//kick off the main component
export default class componentName extends Component {
//preload any data we may need 
  componentDidMount(){
    console.log('componentDidMount()')
  }
  //event for the input box
  //NOTE we auto bind the action with this.formAction.bind(this)
  formAction(){
    console.log('lookUpChampion()');
  }
  render(){
    return(
      <div>
      <form action='#' onSubmit={this.formAction.bind(this)}>
          <div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
           <input className="mdl-textfield__input" type="text" id="summonerName" />
             <label className="mdl-textfield__label" for="summonerName">Summoners Name</label>
          </div>
        </form>
      </div>
    );
  }
}

//we map all our props here.  If you pre-load a prop in componentDidMount you will see this console.log run twice, the second time it will update with your preloaded data in the store.
function mapStateToProps(state){
  console.log('Available Props', state);
  return{
    placeholder: 'placeholder'
  };
}

//This allows us to import in a list of functions that we can pass to dumb components or use. Use console.log so that you can always see what functions are available while developing.
function mapDispatchToProps(dispatch){
  console.log('Available Dispatches:', importedActions
}

//connect the component and props to the store
export default connect(mapStateToProps, mapDispatchToProps)(componentName);