title: Combination of Angular & React to streamline
body: <p>I'm currently making the change from Angular routing &amp; client-side rendering to React &amp; Flux for isomorphic builds. I've just started learning React so bear with me.</p>
  
  <p>Here's my problem. To render a simple list, it would look like this.</p>
  
  <p>HTML, component &amp; render in React:</p>
  
  <pre><code>&lt;!--html--&gt;
  &lt;div id="mount-point"&gt;&lt;/div&gt;
  
  &lt;script type="text/jsx"&gt;
    //component
    var List = React.createClass({
      getInitialState: function(){
         return {
           items: [
             "Apples",
             "Broccoli",
             "Chicken",
             "Duck",
             "Eggs",
             "Fish",
             "Granola",
             "Hash Browns"
           ]
         }
      },
      render: function(){
        return (
          &lt;ul&gt;
          {
            this.state.items.map(function(item) {
              return &lt;li key={item}&gt;{item}&lt;/li&gt;
            })
           }
          &lt;/ul&gt;
        )  
      }
    });
  
    //render
    React.render(&lt;List/&gt;, document.getElementById('mount-point'));
  &lt;/script&gt;
  </code></pre>
  
  <p>Or in Angular, with a controller and HTML:</p>
  
  <pre><code>&lt;script&gt;
    //controller
    app.controller("MyController", ["$scope", function($scope){ 
      $scope.items = [
         "Apples",
         "Broccoli",
         "Chicken",
         "Duck",
         "Eggs",
         "Fish",
         "Granola",
         "Hash Browns"
       ]
    }]);
  &lt;/script&gt;
  
  &lt;!--html--&gt;
  &lt;ul&gt;
    &lt;li ng-repeat="item in items"&gt;{{item}}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Now to me, the Angular code looks a lot shorter and more readable. The HTML where data is injected is not infiltrated by javascript code. I'm not trying to start a React v Angular debate. Instead, I'm wondering if there is a way to combine the best properties of both? i.e. have the stateful component concept from React but instead of using raw javascript in the <code>JSX</code>, using things like Angular's <code>ng-repeat</code>. If not, is there another way to approach writing the <code>JSX</code> in my example?</p>