On: Am I wrong in hating React JS?

[ggregoire]

To reply to your complaints:

> I hate html in javascript. I hate JSX.

At least it's just HTML and JavaScript.

In my opinion it's better than learning a new messy templating DSL, i.e.

    <ul ng-if="::vm.items.length">
        <li ng-class="::{ 'active': item.active }" ng-repeat="item in ::vm.items | orderBy: 'id' as ordered track by item.id" ng-click="item.active = !item.active">
            {{::item.name}}
        </li>
    </ul>

    <select ng-options="item.subItem as item.label for item in ::vm.items2 track by item.id" ng-model="selected"></select>
    <div ng-include="selected.template.url" />

> I hate the lack of CLI. I hate the ridiculous amount of shit I have to do to simply get a project started.

You can use the official Create React App CLI [1].

> I hate the sheer amount of boilerplate code and the verbosity.

How do you recreate the following component in Ember/Angular/Backbone/jQuery/FoobarJs with less boilerplate and verbosity?

    Header.js:

    import React from 'react';
    import Icon from './Icon';

    export default ({ icon, title, subTitle }) => (
      <header>
        <h1><Icon name={icon} /> {title}</h1>
        <p>{subTitle}</p>
      </header>
    );

> I hate the lack of conventions — every project I look at looks different, every blog post looks different.

React is just a library to build views, so there is not a single way to build your app in the React world. You can use Redux, MobX, Flux or whatever you want to manage your data. You can even do it in 100% raw vanilla JS. I think it's great.

---

[1] https://github.com/facebookincubator/create-react-app

[botskonet → ggregoire]

JSX can also be a hard sell for seasoned developers because they've been taught to avoid combining HTML and JS for so long. I initially disliked the Angular templating system because it felt like I was regressing to `on-click="javascript()` code.

While I prefer JSX now, mainly because it is just html/javascript, I sometimes feel that inline conditions/loops like `ng-if` are cleaner - I don't need yet another several lines of a `var` definition, condition, and assignment.

My biggest struggle with React was due to the fact it's a view-only library. Coming from Angular or similar projects you're suddenly in the dark on how best to manage ajax, forms, etc - yet when you power through, you realize it's actually freedom to do whatever you want. Done correctly, that's way more powerful.

[acconrad → ggregoire]

You definitely have to learn a DSL - in JSX you have to use className instead of class for the HTML tag property. There are a few other examples of this, but the point is the argument doesn't hold water against Angular's templating language.

[botskonet → acconrad]

Learning a few differences for attributes names isn't nearly as involved as learning angular's entire custom attribute and syntax support though.

I would also add that for any web app truly utilizing these libraries, you're going to have to know how they get compiled and where your data is coming from. With Angular you have to learn about scopes, digesting, linking/compiling, etc.

Two-way binding was amazing to me when I first took up Angular, it made common tasks so easy but on an enterprise-level application it's a nightmare because you're quickly dealing with digest/event cycle issues, especially during automated testing. The control over data flow that React prefers makes the easy, common tasks more time consuming, but overall saves a massive amount of complexity.

[kentor → acconrad]

The reason why it uses `className` is because we're in javascript land (https://developer.mozilla.org/en-US/docs/Web/API/Element/cla...) So it's not a DSL when you really think about it. It's javascript.

[t3soro → acconrad]

className has always been the convention for accessing the class attribute in Javascript.

https://developer.mozilla.org/en-US/docs/Web/API/Element/cla...

[cri5ti → t3soro]

And that's of course because pre ES5 you couldn't use keywords (class) as property names.