MacKentoch

<div id="container"/>
<script>
  var button = document.createElement('button');
  var textNode = document.createTextNode('Click Me!');
  button.appendChild(textNode);
  button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
  componentHandler.upgradeElement(button);
  document.getElementById('container').appendChild(button);
</script>

MacKentoch

<!-- Simple MDL Progress Bar -->
<div id="p1" class="mdl-progress mdl-js-progress"></div>
<script>
  document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
    this.MaterialProgress.setProgress(44);
  });
</script>

MacKentoch

import {
  Component,
  Input,
  ViewChild,
  AfterViewInit,
  OnChanges,
  SimpleChange
}                 from 'angular2/core';

@Component({

MacKentoch

// angular < 1.5.0 :


////////////////////////////////
// file : demo.directive.js
////////////////////////////////
import {DEMO_CONTROLLER_NAME} from  './demo.controller';

export const DEMO_DIRECTIVE_NAME = 'demoDirective';

MacKentoch

// with angular >= 1.5.x

////////////////////////////////
// file : demo.component.js
////////////////////////////////
export const DEMO_COMPONENT_NAME = 'demoComponent';

// before angular 1.5 component : directive was the way to create component
export const demoComponent = {
	template	: `

MacKentoch

// Angular2

import {Component, Input} from 'angular2/core';
import {$service1} from './service1';
import {$service2} from './service1';

@Component({
  selector    : 'demo-directive',
  providers   : [$service1, $service2],
  template    : `

MacKentoch

function sortByDateDesc(histo) {
  return histo.sort(
    (a, b) => {
      if (a.date < b.date) {
        return 1;
      }
      if (a.date > b.date) {
        return -1;
      }
      return 0;

MacKentoch

import Beacons        from 'react-native-beacons-manager';

class RNbeaconArticle extends Component {
  // ...
  componentWillMount(){
    //
    // ONLY non component state aware here in componentWillMount
    //
    // Request for authorization while the app is open
    Beacons.requestWhenInUseAuthorization();

MacKentoch

 // ...
  componentDidMount() {
    // Ranging: Listen for beacon changes
    this.beaconsDidRange = DeviceEventEmitter.addListener(
      'beaconsDidRange',
      (data) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(data.beacons)
        });
      }

MacKentoch

'use strict';

import React, {
  Component
}                             from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  Text,