Hacker News Reader

Comment by Sawbones | Hacker News Reader

I really need someone to explain to me what they love so much about React.js. I tried it out and I absolutely hated the way components didn't understand their relation with other components. I had to chain a callback all the way down to my ListItem Component just so it could set which item was selected in the component and let other components know that. If you ever end up adding another parent component you have to rewrite all those top level components to pass that information down.

View on HN

That's because you used React alone, which works as a top-down view engine. If you want to modify something in the view, you have to go back to the top and modify the model. Instead of doing it manually, Facebook has created the Flux architecture to help you scale this process efficiently.

So Facebook created an architecture to solve a problem their new web framework introduced?

No, they created an architecture and decoupled their web framework from it.

Which was a poor decision, imho. Using React only makes sense with Flux, why separate them? Furthermore, the examples on React's docs use the pass-down-the-event-handlers madness, instead of using Flux. React+Flux is a good solution, but the documentation leaves a lot to be desired.

React components can be brought into any architecture. Using them with flux certainly simplifies many things, but by the same token, flux apps can be written using other libraries (react based like om, or even full frameworks like angular). The decoupling is good. It lets you try out a component from http://react.rocks/ without diving into a fully architectured SPA.

I think if you need to pass callbacks several levels down you should consider some form of event system so that you may decouple your components from the hierarchy.

Try going sideways once things get too nested for callbacks not to be arduous: https://github.com/rpflorence/react-training/blob/gh-pages/l...

Another option (albeit currently an undocumented one) is to use contexts to obviate the need to pass things down manually: http://davehking.com/2014/11/15/introduction-to-contexts-in-...

You have a very topical understanding of how to structure an app with react then.

That's because React only makes sense if used with Flux. Otherwise just use Ractive.js - components can communicate with each other via events, so you don't have to pass event handlers down the hierarchy.

Reply on news.ycombinator.com