jquense

var Globalize = require('globalize')

jquense

The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!

Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is

jquense

var DisabledList = React.createClass({

  // proptypes tell the parent widget what to pass into it
  // the DropdownList will inspect propTypes and _.pick() those keys to pass in
  propTypes: {
    disabledItems: React.PropTypes.array,
    ...List.type.propTypes,
  },

  componentWillMount(){

jquense

class MyComboBox extends React.Component {
  
  constructor(props, context){
    super(props, context)
    this.state = { value: props.value }
  }
  
  componentWillReceiveProps(props){
    this.setState({ value: props.value })

jquense

function chain(fnA, fnB){
  return function(){
    fnA && fnA.apply(this, arguments)
    fnB && fnB.apply(this, arguments)
  }
}

jquense

let FilterInput = React.createClass({
  render: function() {
    return (
      <input className={this.props.className} placeholder=={this.props.placeholder} />
      // or more terse
      // <input {...this.props} />
    );
});

<div className="row header">

jquense

// require() some stuff from npm (like you were using browserify)
// and then hit Run Code to run it on the right
var yup = require('yup')
var assert = require('assert')

var schema = yup.object({
  name: yup.string(),
  id: yup.string()
});

jquense

// there are a few methods that you need to implement/override to create a new type
// The main one is `_coerce`, which passing in the raw value and returns the type back.
// _coerce should not throw errors, and should return the default invalid object for a type if it exists (NaN, etc)


//here is the date `_coerce()` (I need to change it to return an InvalidDate instead of null)
_coerce(value) {
  if(value == null ) return value
  if(isDate(value) ) return new Date(value)

jquense

function mixin(){
  var privatevar = 5;
  
  this.on('componentWillMount', () =>{
    //stuff
  })
  
  this.mixinMethod = () => {
    return privatevar;
  }

jquense

function isAllOf(validators){
  return function(props, propName, componentName) {
    var err;
    
    validators.every( validator => {
      err = validator(props, propName, componentName)
      return !err
    })
    
    return err