Code Review Stack Exchange is a question and answer site for peer programmer code reviews. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm new to ReactJs and trying to figure out the preferred style. I also have tried it enough to realize that I'm not a fan of jsx and prefer how React looks when written in coffeescript.

This is a very simple control (eventually will be a series of controls). It contains a select element and a button. When a selection is made and the button is clicked it triggers some domain activity which does work in a separate area.

flatten = (selection) -> console.log "Do domain work to the", selection

ActionsDemo = React.createClass: render ->
    FlattenRacer @props

FlattenRacer = React.createClass render: ->
    flattenSelected = =>
        selector = @refs['character']
        if selector.selected()
            flatten selector.selected()
            selector.clear()

    R.div (className: 'action'),
        CharacterSelector (racers: @props.racers, ref: 'character')
        R.button (onClick: flattenSelected), "Flatten"

CharacterSelector = React.createClass
    selected: -> @getDOMNode().value
    clear: -> @getDOMNode().value = null
    render: ->
        R.select null, 
            [R.option null, "-- Select --"].concat _.map @props.racers, (r) ->
                R.option (value: r), r

React.renderComponent (ActionsDemo racers: ['racer1', 'racer2', 'racer3']), 
                      (document.querySelector '#racetrack-actions')

The _ functionality is via lodash

The above works and is similar to the approach in the ReactJs tutorial but I keep hearing that React is about "data-flow" and this doesn't really seem like...that.

I've done a lot of knockoutjs and doing things in this manner seems kind of like a step backwards. For example if I wanted to disable the button unless the selector has a valid selection there's no obvious way to do this. It also seems like the CharacterSelector should be in charge of when it gets cleared. Also the entire refs mechanism feels a bit like a hack. This feels like I should be using functional reactive programming somewhere but not quite sure where.

As a side note, is there a way I can just force my CharacterSelector instance to re-render instead of having to create a clear method?

How can I improve this?

share|improve this question

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.