4 ms·

ReactJS Style Guide

45 points by zackify 12y ago

v_ignatyev 12y ago
Probably attributes indentation for HTML tags would be better if the final '/>' will be at the separate line. The purpose is to be able to remove attributes simply deleting the whole line. It's much more useable in any IDE. If you delete last line when '/>' isn't on separate line you will need to add '/>' or tell IDE to somehow end tag (it's not a problem, but redundant movement). <input type="text" value={this.state.newDinosaurName} onChange={this.inputHandler.bind(this, 'newDinosaurName')} />
- zackify 12y ago
  I think this is good practice also
insin 12y ago
The form example can be written this way to avoid having to register onChange on every field (within the same form): <form onChange={this.inputHandler}> ... <input type="text" name="blah" value={this.state.blah}/> ... </form> inputHandler: function(event) { actions.propagateValue({ field: event.target.name, value: event.target.value }); }
- davidchang 12y ago
  really solid point
  - deleted 12y ago
    [deleted]
  - davidchang 12y ago
    updated article with form onChange snippet with credit given. thanks @insin
daveidol 12y ago
"I'm starting to think that it is easier not to track changes/state for forms anywhere if it can be avoided, and to basically extract all of the values out of the form manually via the DOM whenever they are needed" Can you expand on this some? Is there a particular line of reasoning which lead you to this conclusion?
- davidchang 12y ago
  i think i should remove that statement from the article. i think i was overreacting (pun intended) and it was a mostly unqualified opinion. my feelings were more so of inconvenience and thinking that there was little benefit to actually having form values on the state (possibly specific to my use case, which didn't require any additional logic for form values). using the pattern mentioned in https://news.ycombinator.com/item?id=8811617 https://news.ycombinator.com/item?id=8811617 would remove a lot of work that I initially thought was necessary, or using the LinkedStateMixin from addons everywhere. will fix. apologies for misleading [edit]: article updated.

45 points by zackify 12y ago

Probably attributes indentation for HTML tags would be better if the final '/>' will be at the separate line. The purpose is to be able to remove attributes simply deleting the whole line. It's much more useable in any IDE. If you delete last line when '/>' isn't on separate line you will need to add '/>' or tell IDE to somehow end tag (it's not a problem, but redundant movement). <input type="text" value={this.state.newDinosaurName} onChange={this.inputHandler.bind(this, 'newDinosaurName')} />

zackify 12y ago
I think this is good practice also

insin 12y ago

The form example can be written this way to avoid having to register onChange on every field (within the same form): <form onChange={this.inputHandler}> ... <input type="text" name="blah" value={this.state.blah}/> ... </form> inputHandler: function(event) { actions.propagateValue({ field: event.target.name, value: event.target.value }); }

davidchang 12y ago
really solid point
- deleted 12y ago
  [deleted]
- davidchang 12y ago
  updated article with form onChange snippet with credit given. thanks @insin

daveidol 12y ago

"I'm starting to think that it is easier not to track changes/state for forms anywhere if it can be avoided, and to basically extract all of the values out of the form manually via the DOM whenever they are needed" Can you expand on this some? Is there a particular line of reasoning which lead you to this conclusion?

davidchang 12y ago
i think i should remove that statement from the article. i think i was overreacting (pun intended) and it was a mostly unqualified opinion. my feelings were more so of inconvenience and thinking that there was little benefit to actually having form values on the state (possibly specific to my use case, which didn't require any additional logic for form values). using the pattern mentioned in https://news.ycombinator.com/item?id=8811617 https://news.ycombinator.com/item?id=8811617 would remove a lot of work that I initially thought was necessary, or using the LinkedStateMixin from addons everywhere. will fix. apologies for misleading [edit]: article updated.