react-statless-funcs.md

#A brief intro into Stateless functions#

So stateless functions are new in React 0.14 which are quite interesting. They look a bit like this.

const Test = ({name, amount}) => {
  return <div className="test">{name} has £{amount}</div>;
};

ReactDOM.render(<Test name="ben" amount="-2000" />) //  <div className="test">ben has £-200</div> 

They make simple components even simpler meaning the lazy no longer have to write prop types and render functions etc.. Hooray!

I'm sure many people will start using them for very simple components like buttons etc. but you can also do a a few crazier things like this:

class List extends Component {
  static contextTypes = {
    UserStore: PropTypes.object.isRequired
  };

  static subComponents = {
    list: ({items}) => <ul>{items.map(item => <Balance.subComponents.listItem item={item}/>)}</ul>,
    listItem: ({item}) => <li key={item}>{item}</li>
  };

  render() {
    const {myList} = this.props;
    
    return (
      <div className="some-holder">
        <Balance.subComponents.list items={myList} />        
      </div>
    );
  }
}

That's right! Inlining parts of your component instead of creating functions. Not entirely convinced it looks cleaner though (or if it's even useful), but I'm looking forward to playing around with them as the next project ramps up.