[andreasklinger]

the obvious case:

consider a complex submission form with updating state

eg you want to show uploaded images while editing parts of it etc

the realistic case:

if you have a rails app and do frontend "interactive stuff" you end up w/ some js frontend framework - let's say backbone - or even if it's just jquery send as ejs - you will have some sort of dynamic updates, maybe even frontend duplication of templates, you will add classes to places and interact with parts of the page, other people will add more features, some parts of the feature gets removed, that part of it moved to another site, to keep it working you need a certain setup on the page, etc et

pretty soon this gets complex - this is where react shines

reasoning about the frontend is easy because you think in components and in state. not in ui and the interactivity with it over time.

tl;dr: react can help for either a by design complex part of your frontend or your frontend becomes complex over time

it does not help for fast prototyping or small apps imo

[arstin]

"it does not help for fast prototyping or small apps imo"

I can understand this sentiment---React really is meant for serious apps. There is a decent learning curve. There is small overhead. And though it now only requires just a tiny bit of setup thanks to create-react-app, it might easily require a very significant change to workflow habits. (And the fact that CSS is still held by some as an ideal way of maintaining UIs rather than a temporary requirement given what browsers can consume in 2016 is a testament to how how hard habits can be to change. But I digress!) If you're not already knee-deep in it, React is almost certainly overkill for a marketing page or a mostly static form-y interface for some rails backend.

But just to give an alternative opinion: I think React is great for prototyping. The big reason is that React allows you to easily build and use custom abstractions. When you get down to it, that's sorta the whole point of the library.

If you need to do something---maps, a text editor, a flipping clock---there's a decent chance a catalog like js.coach will already have a React component for it. And at just a single line import away, unlike old jQuery "imports" which typically required more setup which then was more fragile once you wanted to make a change somewhere else (like, you know, renaming an id).

And over the years, like many others I'm sure, I've evolved my own toolkit which happens to be perfect for prototyping. I can vertically align <Rows /> and <Columns /> just by passing "center". I can add a modal simply by typing <Modal isOpen={isProfileVisible}><Profile /></Modal> right next to the button which opens it. I can add data persistence and real-time updating mostly just by typing <FirebaseWrapper /> and tweaking some config for the new app. I could go on and on. And these are just little personal things which make life a little easier. There's also projects like react-flip-move which smoothly animates transitions in a line of code, react-sortable-hoc which gives, in a line of code, a sortable with pretty good touch support and essentially infinite lists......

Obviously in principle you can get these benefits in other frameworks. But React is one place where lots and lots of people are actually contributing to the ecosystem.

[garrincha]

Thanks a lot. This was already very helpful.

I'm still somewhat scarred from the time I invested a ton of time into Angular.

Not sure you would be able to answer this, but is React something that works well with Rails out of the box? For instance, I found that Angular (when I was learning it) required a fair bit of shoehorning to get it to work well with rails.

[ggregoire]

Angular and React are like black and white when we talk about time of learning.

Simply because :

- Angular is a full framework including html templating, directives, components, controllers, services, router, xhr abstractions ($http and $resource), dependency injection, two-way data binding by default, one-way data binding if you want (to fix performance issues) and the list can continue. Plus, you need to set and learn a style guide [1] and some good practices because, if you have 2 developers, none of them will code in Angular in the same way.

=> it took me weeks to learn, and months to master.

- React is just a library to build views. You code 90% of your time in basic JS and 10% in React APIs (basically: states, props, lifecycle methods and that's it).

=> it took me 1 hour to learn, and 1 week to master.

If you want to learn React, you just need to read the official tutorial [2].

---

[1] https://github.com/johnpapa/angular-styleguide

[2] https://facebook.github.io/react/docs/tutorial.html

[verletx64]

This is pretty misleading as a comparison, yes you can learn React itself very shortly, but the ecosystem around it will probably bring you much closer to Angular learning times, and that's also without the AngularJS documentation which is top notch.

I prefer React to AngularJS but I don't think it's fair to tell half the story when comparing them.

[bostonvaulter2]

But the downside to learning react is learning the react ecosystem, redux, other flux frameworks, etc.

[davedx]

I'm working on an app for work that's a Rails API backend with a React front end. This stack is a pleasure to work with, once you get past the initial bits of setup.

With React I use Redux for state and ES7 bits for async and await. Productivity is high.

[kwood]

I was in quite the same situation, Angular 1.x was quite hard to grok at first. But React just "clicked" instantly.

For integration with Rails, I found https://github.com/reactjs/react-rails to be quite useful. It integrates the Babel transformer for JSX into the asset pipeline and brings a couple of helper functions, so no additional setup needed.

You start writing your components, "mount" them via the helpers in standard .erb templates (or even without the template directly from a controller action), done.

[rukuu001]

React in its basic form is pretty simple, you'll grok it in a couple sessions of playing with it. And since it's 100% view, you can fit it over pretty much anything.

This is assuming you're prepared to do rendering in the browser. If you want to do server side rendering I think you'll be doing more shoehornig :)

[zodiac]

Personally I use my backend (rails, flask, etc) just to expose an API and react in the frontend, it's a pretty clean separation