Hacker News Reader

Comment by applecore | Hacker News Reader

What do you mean? This:

    var createItem = function(itemText) {
      return (
        <li>{itemText}</li>
      );
    };
    return (
      <ul>{this.props.items.map(createItem)}</ul>
    );

...is clearly so much more logical than:

    <ul><li>{{item}}</li></ul>

Source: https://www.airpair.com/angularjs/posts/angular-vs-react-the...

View on HN

That named helper function isn't necessary, so this might be more appropriate:

  return <ul>
    {this.props.items.map(item => <li>{item}</li>)}
  </ul>;

vs. the Angular version:

  <ul ng-repeat="item in items">
    <li>{{ item }}</li>
  </ul>

The Angular template is more readable at the expense of ngRepeat's complexity. Neither example includes Component/directive boilerplate. The directive boilerplate is generally worse, because it requires a separate template file or an ugly template string, knowledge of the directives API itself which is baroque in the extreme, and $scope-wrestling (whereas JSX' scope is the same as JS').

In my opinion reuse of the React component is more straightforward, you explicitly import/require it while in Angular you specify its providing module as an angular.module dependency, which has implications for config block ordering.

I used to struggle to answer this when talking to Angular folks about React. Then I came across a situation where I needed to recursively build a DOM tree based on complicated calculations on a per-node basis and also calculated values at the top level. If I'd been doing it with ng-repeat, the logic would be split confusingly (and unnecessarily) between the template and the controller, and I'd need to pass down any information from the top-level ancestor manually.

In React, I just create a renderNode method that's called by render at the top level, and renderNode on non-terminal nodes returns <div>{children}</div> where children is a map whose mapping function returns this.renderNode. The entire algorithm is grokkable at a single glance, and there's no need to create Directives to add any fancy features or special cases in the future. No need to read pages of documentation about ng-repeat and its intricacies; it's all just Javascript.

Yes, Angular "just works." But React "just works" the first time you try it.

There is also XQuery. Like React, but you do not need to distinguish properties and map calls, it is all done with the / operator:

    <ul>{props/items/item/<li>{.}</li>}</ul>

But not interactive

This obscures React's main strength, which is making it so that you don't have to worry about edge case states. In complex UI's, this is the #1 source of bugs.

For sure! But you should have empathy for the front-end designer who may not totally understand the advantages of React over "traditional" HTML templates and directives.

Besides incorrectly quoting the example at the cited link and being a deceptive/incomplete comparison, what does this even have to do with the op?

If you like Angular's style you can use react-templates [1], most people just prefer the React way. In theory there shouldn't be any overhead, but since in JavaScript abstractions aren't free you're going to pay some price.

Also the angular equivalent would be

    <ul><li ng-repeat="item in items">{{item}}</li></ul>

And the react-templates equivalent would be

    <ul><li rt-repeat="item in this.state.items">{item}</li></ul>

[1] http://wix.github.io/react-templates/

Yes it is. What is {{item}}? Where did it come from?

It's missing the `ng-repeat="item in items"`.

What is "items" and where did it come from?

It would be some array defined on the angular $scope object, presumably instantiated when an angular directive/controller is instantiated for a component. I'm guessing that's roughly analogous to "this.props" in the react example, though I'm not very familiar with react.

That is a terrible comparison.

Reply on news.ycombinator.com