Web Components

Custom Elements

<hello name="knightlab"></hello>

<div>Hello, Knight Lab</div>

Templates

<template id="knightlab" name="knightlab">
  <div class="item">
       <p>Hello {{name}}</p>
    </div>
</template>

<div>
//include template code here//
</div>

Shadow Dom

HTML Imports

<link rel="import" href="myfile.html">

Polymer

Basic

<dom-module id="person-element">

  <template>
    <div>Hello, {{firstName}}</div>
  </template>

  <script>
    Polymer({
      is: "person-element",
      properties: {
        firstName: {
          type: String,
          value: 'Jane'
        }
      }
    });
  </script>
</dom-module>

<person-element></person-element>

person.html

index.html

State

<dom-module id="person-element">

  <template>
    <div>Hello, {{firstName}}</div>
  </template>

  <script>
    Polymer({
      is: "person-element",
      properties: {
        firstName: {
          type: String,
          value: ''
        }
      },
      created: function() {
        this.firstName = 'Jane';
      },
      ready: function() {
      
      }
    });
  </script>
</dom-module>

<person-element></person-element>

person.html

index.html

Repeat Elements

<dom-module id="person-element">

  <template is="dom-repeat" items={{people}} as={{person}}>
    <template item={{person}}>
      <div>Hello, {{person.firstName}}</div>
    </template>
  </template>

  <script>
    Polymer({
      is: "person-element",
      properties: {
        people: {
          type: Array,
          value: [
            {firstName: 'Henry'}, {firstName: 'Paul'}, {firstName: 'Jane'}
          ]
        }
      }
    });
  </script>
</dom-module>

<person-element></person-element>

person.html

index.html

React

Basic

class Person extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

ReactDOM.render(<Person name="Jane" />, document.getElementbyId('root'))

person.jsx

index.html

index.jsx

<html>
  <body>
    <div id="root"></div>
  </body>
</html>

State

class Person extends React.Component {
  constructor(props) {
    super(props);
    this.state({
        age = ''
    })
  }

  componentDidMount() {
    this.setState({
        age = '23'
    })
  }
  
  componentWillUnmount() {
    console.log('unmount')
  }
  render() {
    return <h1>Hello, I am {this.state.age}</h1>;
  }
}

ReactDOM.render(<Person name="Jane" />, document.getElementbyId('root'))

person.jsx

index.html

index.jsx

<html>
  <body>
    <div id="root"></div>
  </body>
</html>