React Components
<i>(Marginally related rant)</i><p>I love React, but so far I've been a bit underwhelmed by the ecosystem of components that has sprung up. I hope that this site will help.<p>A lot of the components are stuff that aren't really UI elements, but rather add magic to other UI elements or even do something completely unrelated to the UI.<p>I mean, I've seen routers written as React components![1] Wtf? Why is it an advantage to express a route as XML-like JSX? Why put it in a virtual DOM? That's just waiting for unexpected side-effects to happen. I can imagine that a lean, to-the-point router is a good combination with React but components are for <i>UI widgets</i>, not for configuration.<p>I feel like this is the same mistake as the everything-in-XML hype of the early 21st century (Spring, anyone?), or the everything-as-a-DSL hype in early Scala (with clear, descriptive operators such as ~~=, $%% and of course &^), or the current hype in C#-o-world to package web assets into NuGet packages (jquery.dll - seriously?). Just because you <i>can</i> put it in a component, doesn't mean that you <i>should</i>.<p>Behavioral features for components (e.g. infinite-scrolling or tooltip triggers) are well distributed as a mixin. Stuff not directly related to UI widgets should just be vanilla JavaScript. Asset libraries should be asset libraries.<p>What I expect from open source components is UI elements. Color pickers, fancy dropdown selects, login widgets, form elements with pluggable validation maybe (but the validation logic shouldn't be components). Notably, I'd love an ecosystem of UI frameworks ala Bootstrap or Foundation to spring up around React, and it appears that this is happening.<p>(Sidenote, if there's one development we <i>do</i> need, then it's a clear React-authors-condoned way to couple (parameterized) CSS with React components, so that we can really distribute self-contained components including style. A development like that would also help focus the React component ecosystem on what it should be about: UI widgets.)<p>[1] Random example: <a href="https://github.com/rackt/react-router#whats-it-look-like" rel="nofollow">https://github.com/rackt/react-router#whats-it-look-like</a> - seriously, what were they thinking?