Password Meter with ReactJS

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.6/css/bootstrap.min.css">
<div class="container-fluid" id='main'>
    <div class="row">
        <div class="col-xs-12 col-md-6" id='app'>
            
        </div>
    </div>
</div>

CSS

#main{margin-top: 20px;}

CoffeeScript

R = React.DOM
Rc = React.createElement

PasswordInput = React.createClass
  render: ->
    console.log(@props.password)
    R.input {type: "password", className: "form-control"}
  

Panel = React.createClass
  render: ->
    R.div {className: 'panel panel-default'},
      Object.keys(@props).map (k) => 
        R.div {className: "panel-#{k}", key: k}, @props[k]
        

ProgressBar = React.createClass
  render: ->
    R.div {className: "progress", style: {height: "10px"}},
      R.div {
         className: "progress-bar", 
         style: {width: "60%"}
       }

TextBox = React.createClass
  render: ->
    R.ul {}, ['A', 'B', 'C'].map (x) ->  
      R.li {key: x}, x

FeedbackBox = React.createClass
  getInitialState: -> {password: ""}
  handleChange: (e) -> @setState({password: e.target.value})
  render: ->
    R.div {}, 
      Rc(PasswordInput, {
        onChange: @handleChange, 
        password: @state.password
      })
      R.br()
      Rc(Panel, {body: [Rc(ProgressBar), Rc(TextBox)]})

ReactDOM.render(
  Rc(FeedbackBox),
  document.getElementById("app")
)