
React Components - tipex
http://react-components.com/
======
skrebbel
_(Marginally related rant)_

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.

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.

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 _UI widgets_ , not for configuration.

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 _can_ put it in a component,
doesn't mean that you _should_.

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.

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.

(Sidenote, if there's one development we _do_ 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.)

[1] Random example: [https://github.com/rackt/react-router#whats-it-look-
like](https://github.com/rackt/react-router#whats-it-look-like) \- seriously,
what were they thinking?

~~~
larrymyers
Maybe take a look at the source code for the router component you're so
offended by.

[https://github.com/rackt/react-
router/blob/master/modules/co...](https://github.com/rackt/react-
router/blob/master/modules/components/Routes.js)

It doesn't generate any markup itself, but instead renders the component bound
to the route. This is a perfectly valid way to communicate how routes are
related to components.

I'm assuming the React core team liked the approach as well, considering they
featured it in one of their community round-up blog posts:

[http://facebook.github.io/react/blog/2014/08/03/community-
ro...](http://facebook.github.io/react/blog/2014/08/03/community-
roundup-21.html)

~~~
skrebbel
We can agree to disagree right? I think using JSX and React components for
configuration is a bad match, and plain JS is a much better and more flexible
fit. I also suspect that it is a result of eagerness to use the newly-learned
hammer for every nail out there, which is a rather common phenomenon when new
technologies quickly rise in popularity.

You, on the other hand, think it's neat. That's fine.

I don't see how the router's source code is related to this discussion,
though. I implied nowhere that that particular router did something bad with
rendering markup or something, I'm not sure where you got that from. I'm
talking about the API.

~~~
meowface
Just want to say I fully agree with you. react-router seems like a useful
library, but I see utterly no reason why you should write your routes in JSX
instead of as a simple JS object. Using JSX for anything other than DOM
insertion or modification creates an impedance mismatch. The public API makes
no real sense to me.

The point of JSX is to more easily build dynamic HTML (and perhaps other
markup).

~~~
ryanflorence
If you read the overview you may understand our opinion that "application
state" is precisely which views to render.

[https://github.com/rackt/react-
router/blob/master/docs/guide...](https://github.com/rackt/react-
router/blob/master/docs/guides/overview.md)

We're almost done with serializing the application data as well. Both pieces
are important.

------
blablabla123
Interesting... Actually last week I stumbled upon react-bootstrap. After all I
wasn't enthusiastic to use it yet, because I wonder whether it interfers with
the regular bootstrap. (Right now the app I work on is only partially
implemented in React.)

~~~
therealmarv
Does somebody has a link to a working react-bootstrap code example? I tried to
get react-bootstrap working last week but somehow it did not recognized its
own tags like for the navbar :(

~~~
BinaryBullet
This looks pretty cool:

[http://gcanti.github.io/resources/tcomb-react-
bootstrap/play...](http://gcanti.github.io/resources/tcomb-react-
bootstrap/playground/playground.html)

~~~
gcanti
Thank you! author here :)

in the next few days I hope to add more constraints. My main concern about
react-bootstrap is the massive use of `transferPropsTo`, from what I
understand is a deprecated method

------
taude
Maybe I'm missing something, but the few components I clicked on didn't have
immediately obvious demos available.

This would be pretty useful, especially if it isn't a wrapped version of a
well-known existing library.

~~~
rexxars
This is a slightly difficult problem to solve, but we are working on a
proposal for how this could work. See [https://github.com/vaffel/react-
components/issues/7](https://github.com/vaffel/react-components/issues/7)

------
dve
I also maintain a component list [http://dvemac.github.io/react-component-
list/](http://dvemac.github.io/react-component-list/) Maybe you could use the
source data in some way, as the UI I quickly knocked up is poor at best! Its
on github here [https://github.com/DveMac/react-component-
list/blob/master/l...](https://github.com/DveMac/react-component-
list/blob/master/list.yaml)

------
rubiquity
Does React really need something like this? This seems to just be following
the "plugin" tradition set forth by jQuery. I've written a lot of React and
haven't found myself needing things like this. It's just JavaScript and markup
people, you should be able to do it yourself rather easily.

~~~
hcarvalhoalves
It's really easy to make reusable React components though, the boundaries are
well defined (props) and the state is confined to the child. Pretty much what
Web Components aspires to be, but it already works and you can leverage today.

I have a couple components I can extract from a running project and publish
there without any changes (Google Maps, Google Autocomplete, Tagging input,
...) and it will just work.

~~~
kylemathews
Please do publish them! A great react-google-maps I'd definitely use.

~~~
hcarvalhoalves
I'll publish soon. You might want to follow on Github:
[http://github.com/hcarvalhoalves](http://github.com/hcarvalhoalves)

------
xfalcox
Guys, can someone enlight me on how to create a react component that
encapsulates an Odometer[1] the React Way? Since it does a lot of direct DOM
manipulation, I'm not sure of how to do it.

[1] [https://github.com/HubSpot/odometer](https://github.com/HubSpot/odometer)

~~~
mambodog
Typically you would render a single root element and then use the 'after'
lifecycle methods (componentDidMount, componentDidUpdate) to grab the root
element (with getDOMNode) and make your changes (eg. call a jQuery plugin
method on the dom node)

Here's a jsfiddle for the specific lib you're talking about (Odometer):
[http://jsfiddle.net/p1h7rn3q/](http://jsfiddle.net/p1h7rn3q/)

------
jkleiser
Very nice! I think it would be great if the clickable component names on the
right could have some kind of tooltip that contained a brief description of
the component. E.g.: For the react-messages it could be "React component for
showing error, warning, info messages."

~~~
rexxars
Good suggestion - will see if we can integrate something similar for desktop
clients soon

~~~
progx
Like [https://nodejsmodules.org/](https://nodejsmodules.org/)

a short description under a package is easier to read.

A structured Category-List will also be helpfull, sometimes i don't know
exactly what i search for and then i browse the category (tags).

------
securingsincity
I started work on similar component last week where you pass in a Backbone
Collection or Backbone Paginator collection and it would generate components
like a pager, a table, a paginated table with search and sorting [1].

I think for people building complex applications that have a ton of reusable
ui elements react components start to be really enticing because you know you
pass this piece of information in and the ui will be consistent throughout
assuming there are tests written.

[1] [https://github.com/securingsincity/backbone-react-
ui](https://github.com/securingsincity/backbone-react-ui) \- still very much a
work in progress

------
colinramsay
I was thinking how useful something like this would be recently. My concern
was that we'd end up with yet another package management system to deliver it,
so I'm glad NPM is being used. Great stuff!

~~~
sehr
React community seems to be pretty intent on using NPM, I don't think I've
ever seen a package for it delivered any other way

------
yelnatz
It'd be nice if it shows which ones are popular, which ones are the most
useful to me, etc.

~~~
rexxars
Most popular should be easy to make (based on downloads/github stars) - most
useful is a bit trickier. How would that work?

------
eric_bullington
I was _just_ about to set up something very much like this for React, and even
use NPM.

Nice job, looks good!

~~~
shaohua
I did something similar ... No integration with NPM though...
[http://www.reactjsx.com/](http://www.reactjsx.com/)

------
polskibus
Great page! How do I show all components?

~~~
colinramsay
You can go straight to npm and browse the keyword which is used to generate
this site.

[https://www.npmjs.org/browse/keyword/react-
component](https://www.npmjs.org/browse/keyword/react-component)

