gistfile1.js

// if I wanted to make this:
<select>
  <option>(01) January</option>
  <option>(02) February</option>
  ...
</select>

// angular
//
// - $index, ng-each, "month in months", pipe (|) all have
//   to be invented for the template abstraction
// - introduces globals for filters (padMonth) and components.
// - introduces indirection to access data (months)
<select>
  <option ng-each="month in months">
    ({{ $index | padMonth }}) {{month}}
  </option>
</select>

// react
//
// - invented JSX, but is considered an alternative function call
//   syntax, which compiles down to *public API*, so there is no
//   cognitive difference between calling functions with JSX or
//   with normal JS syntax.
// - did not have invent $index, that's just a parameter to map
// - did not have to invent "month in months" DSL, just use JS map
// - did not have to invent the pipe operator for filters, just call a
//   function that's in scope
// - since "filters" are just functions in scope, you don't need to
//   register global helpers into every template, JavaScript has already
//   solved the globals problem with scope modules, so we can just use
//   JavaScript scope and modules
// - no indirection, "months" in JSX is the same months as outside of it,
//   not an indirect reference to an array wired up to your template
//   deep in the bowels of framework code
// - side note, if you've got this script tag:
//   <script src="https://npmcdn.com/react-towel@2/umd/react-towel.js"></script>
//   the following code actually works

const padMonth = (index) => index > 9 ? index+'' : '0'+index

const months = [ 'January', 'February', 'March' ]

render((
  <select>
    {months.map((month, index) => (
      <option>({ padMonth(index) }) {month}</option>
    ))}
  </select>
), document.getElementById('appEl'))