Playing with JSX

by ramnathv

HTML

<script src="//fb.me/react-with-addons-0.14.0.js"></script>
<script src="//fb.me/react-dom-0.14.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="main"></div>

CSS

#main{margin-top: 30px;}

Babel + JSX

var Input = (props) => {
  return (
    <input type="text" 
      className="form-control"
      onChange={props.handleChange}
    />
  )
}
var Page = React.createClass({
  render(){
    return (
      <div className='container-fluid'>
        <div className='row'>
          <div className='col-xs-12 col-md-6'>
            {this.props.children}
          </div>
        </div>
      </div>
    )
  }
})

var App = React.createClass({
  getInitialState(){
    return {title: "Hello"}
  },
  handleChange(e){
    let v = e.target.value === "" ? "Hello" : e.target.value
    this.setState({title: v})
  },
  render(){
    return (
     <Page>
      <div className="col-xs-6">
        <h3>{this.state.title}</h3>
        <Input 
           handleChange={this.handleChange}
         />
      </div>
     </Page>      
    )
  }
})

ReactDOM.render(
  <App />,
  document.getElementById("main")
)