Hacker News new | past | comments | ask | show | jobs | submit login

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




Join us for AI Startup School this June 16-17 in San Francisco!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: