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?