3 ms·

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.

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.

btown 11y ago
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.
benibela 11y ago
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

btown 11y ago

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.

benibela 11y ago

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