data-binding.jsx

<h1>Two way binding:</h1>
<div>{{message}}</div>
<label for="new-message">Type: message</label>
<input type="text" [(ngModel)]="message" id="new-message" />

<h1>Lists:</h1>
<ul>
    <li *ngFor="#item of nameList">
        {{item.name}}
    </li>
</ul>

<h1>Directives:</h1>
<custom-directive>Loading...</custom-directive>

<!-- React -->
<ul>
    {
     nameList.map(item => <li>{item.name}</li>)
    }
</ul>

<!--  Ember -->
<ul>
    {{#each nameList as |item|}}
        <li>{{item.name}}</li>
    {{/each}}
</ul>

reactvsangularvsember.js

//ANGULAR COMPONENT
import { Component } from 'angular2/core';

@Component({
    selector: 'component-placeholder',
    templateUrl: 'app/example.template.html',
    styleUrls: [ 'app/example.css' ]
})

export class ExampleComponent {
    public message = 'Hello from component!';
}


//REACT COMPONENT
import React from 'react';
import 'ExampleComponent.css';

export default class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: 'Hello from component!' };
  }

  render() {
    return (
      <div className="container">
        <p>{this.state.message}</p>
      </div>
    );
  }
}

//EMBER COMPONENT
app/components/example-component.js
export default Ember.Component.extend({
});

app/templates/components/example-component.hbs
<div class="container">
  <p>{{message}}</p>
</div>

app/templates/message.hbs
{{example-component message="Hello from component!"}}