render

main.jsx

var Main = React.createClass({
  render() {
    // nothing above here
    // anonymous function is immediately invoked
    return ((context, props, state) => {
      //quarantine impure code
      //....
      //....
      //event handler code
      //onKeyDownHandler = ...
      //onSearchClick = ...
      
      //pure code
      var displayUserName = R.ifElse(R.eq(null), x => '', R.identity)
      var displayError = R.ifElse(R.eq(null), x => '', x => ' user not found.')
        
      return <div className="container">
        <div className="row">
          <div className="input-field col s12 m8 offset-m2">
            <input placeholder="Github username" id="search-text" type="text" className="validate" onKeyDown={onKeyDownHandler} ref="searchText" />
            <label className="active" for="search-label">Search Github user</label>
          </div>
        </div>
            
        <div className="row center-align">
          {displayUserName(props.data)} {displayError(props.data)}
        </div>
            
        <div className="row center-align">                
          <a className="waves-effect waves-light btn" onClick={onSearchClick}>Search</a>
        </div>
      </div>
    })(this, this.props, this.state)
    //nothing below here
  }
})