3 ms·

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 r

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.

rakoo 12y ago
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.
- marknutter 12y ago
  So Facebook created an architecture to solve a problem their new web framework introduced?
  - neftaly 12y ago
    No, they created an architecture and decoupled their web framework from it.
    - findjashua 12y ago
      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.
      - nutate 12y ago
        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/ http://react.rocks/ without diving into a fully architectured SPA.
edvinbesic 12y ago
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.
insin 12y ago
Try going sideways once things get too nested for callbacks not to be arduous: https://github.com/rpflorence/react-training/blob/gh-pages/lessons/04-less-simple-communication.md 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-react-js.html http://davehking.com/2014/11/15/introduction-to-contexts-in-...
findjashua 12y ago
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.
modarts 12y ago
You have a very topical understanding of how to structure an app with react then.

rakoo 12y ago

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.

marknutter 12y ago
So Facebook created an architecture to solve a problem their new web framework introduced?
- neftaly 12y ago
  No, they created an architecture and decoupled their web framework from it.
  - findjashua 12y ago
    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.
    - nutate 12y ago
      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/ http://react.rocks/ without diving into a fully architectured SPA.

edvinbesic 12y ago

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.

insin 12y ago

Try going sideways once things get too nested for callbacks not to be arduous: https://github.com/rpflorence/react-training/blob/gh-pages/lessons/04-less-simple-communication.md 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-react-js.html http://davehking.com/2014/11/15/introduction-to-contexts-in-...

findjashua 12y ago

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.

modarts 12y ago

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