React JS Best Practices
blog.siftscience.com
React JS Best Practices
1–10 of 92 posts
Re: React JS Best Practices
#2Author here, happy to answer any questions or discuss further!
Re: React JS Best Practices
#3I've been looking at reactive UI design, and it seems weird to me that React.js has this React.createClass and .setState stuff. It seems like it would be better to let the user manage the state and just re-render whenever the state changes. Am I missing something about how this works that makes those necessary?
Re: React JS Best Practices
#4I've been looking at reactive UI design, and it seems weird to me that React.js has this React.createClass and .setState stuff. It seems like it would be better to let the user manage the state and just re-render whenever the state changes. Am I missing something about how this works that makes those necessary?
By making it explicit and a bit clunky, you discourage users from using state.
Without explicit functions to be called, you can't detect state changes and would need polling. This is terrible.
At the end of the day, it's a limitation of JavaScript because unlike with Python, for example, you can't have automagic getter/setter functions. They have to be called as functions.
Re: React JS Best Practices
#5I've been looking at reactive UI design, and it seems weird to me that React.js has this React.createClass and .setState stuff. It seems like it would be better to let the user manage the state and just re-render whenever the state changes. Am I missing something about how this works that makes those necessary?
By making it explicit and a bit clunky, you discourage users from using state. Without explicit functions to be called, you can't detect state changes and would need polling. This is terrible. At the end of the day, it's a limitation of JavaScript because unlike with Python, for example, you can't have automagic getter/setter functions. They have to be called as functions.
Seems like .observe() would fix that polling thing, right?
http://www.html5rocks.com/en/tutorials/es7/observe/
Also you could just re-render whenever any event happens, which is probably when your state changes anyway.
Re: React JS Best Practices
#6Having just started using React for a new project, I absolutely love it.
This new project uses a Rails backend, with React allowing the web to act the same way as any other client (iOS app, Android app etc), and it's so productive to work in.
Pretty much decided I won't be writing a web app any other way for any future work.
These best practices look pretty good, though my advice to any beginners would be to not get too bogged down in worrying whether you're doing things 100% right as React can be pretty forgiving in refactoring later on.
Re: React JS Best Practices
#7Earlier quoted context omitted.
By making it explicit and a bit clunky, you discourage users from using state. Without explicit functions to be called, you can't detect state changes and would need polling. This is terrible. At the end of the day, it's a limitation of JavaScript because unlike with Python, for example, you can't have automagic getter/setter functions. They have to be called as functions.
Seems like .observe() would fix that polling thing, right? http://www.html5rocks.com/en/tutorials/es7/observe/ Also you could just re-render whenever any event happens, which is probably when your state changes anyway.
It would if browsers supported it: http://caniuse.com/#search=observe
So far exists only on Chrome and Android browsers.
Re: React JS Best Practices
#8Earlier quoted context omitted.
By making it explicit and a bit clunky, you discourage users from using state. Without explicit functions to be called, you can't detect state changes and would need polling. This is terrible. At the end of the day, it's a limitation of JavaScript because unlike with Python, for example, you can't have automagic getter/setter functions. They have to be called as functions.
Seems like .observe() would fix that polling thing, right? http://www.html5rocks.com/en/tutorials/es7/observe/ Also you could just re-render whenever any event happens, which is probably when your state changes anyway.
One reason for the explicit method may be that React does an internal optimization where it batches state updates together. Two calls to setState can result in just one render.
https://groups.google.com/forum/#!msg/reactjs/R61kPjs-yXE/ys...
Re: React JS Best Practices
#9Author here, happy to answer any questions or discuss further!
In the article you say you "Reuse through React instead of CSS" and that you have CSS files for the components and no global CSS classes. Do you mean that the CSS files are applied to the elements as inline styles by react, or just that each component has its own CSS so it's not really "global"?
Re: React JS Best Practices
#10Author here, happy to answer any questions or discuss further!
Got a FOUC (especially on the webfonts) the first couple of renders on the page; looks like the overloading of the META tags might be to blame.
Otherwise, really good stuff here as someone rapidly picking up on React.