marcos mmfilesi

## introduccion.html

    <meta name="description" content="taller: presentación polymer">
    <meta name="author" content="mmfilesi">
    <meta name="Copyright" content="cc-by-sa">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui, shrink-to-fit=no">

## app.js
var checkForm = {

	checkInputs: function(user, pass) {

		var isValid = true;

		if ( !user || !pass || user.indexOf('@') === -1 ) {
			isValid = false;
		}

## module.js
     'use strict';

    /* 1. Closures */

    (function () {
      var privateVar = "foo";
    })();

    console.log(privateVar); // Uncaught ReferenceError: privateVar is not defined


## foo-component.html
<dom-module id="foo-component">
    <template>
        <style>
		</style>

		<button on-tap="addFruit">Añadir fruta</button>

        La primera fruta es: {{getFruit(fruits.*, 0)}}

    </template>

## helpers-polymer
<dom-module id="foo-component">

    <template>
        <h3>Frutas</h3>
        <template id="templateFruits" is="dom-repeat" filter="filterFruits" items="{{fruits}}" sort="orderFruits">
           <template is="dom-if" if="{{item.color}}">
                <p>La fruta {{index}} es {{item.name}}
                y es de color {{item.color}} <br>
                <button on-tap="setFavorite">favorita</button></p>
            </template>

## foo-jquery.js
'use strict';

(function () {

  var foo = function (params) {
    return new DomModule(params);
  };

  var DomModule = function (params) {
    var selector = document.querySelectorAll(params),

## constructor
'use strict';

function Foo(numParam) {
    this.bar = numParam || 0;
}

Foo.prototype.publicMethod = function() {
    let temp = 1 + this.bar;
    return temp;
};

## .babelrc
{
    "presets": ["es2015", "stage-1", "react"]
}

## LifeCycle.jsx
import React from 'react';

/*
Los componentes react con estado(1) tienen tres grandes fases en su ciclo de vida:
    Mounting: montaje
    Mounted: ya está montado
    Unmounting: cuando se desmonta
Cada fase tiene una serie de métodos asociados que nos pueden servir de punto de captura para hacer cosas. Los detallo en el propio componente.

1. Los stateless no tienen ciclo de vida.

## index.html
<!doctype html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>

	<meta name="description" content="taller: presentación polymer">
	<meta name="author" content="mmfilesi">
	<meta name="Copyright" content="cc-by-sa">

	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui, shrink-to-fit=no">
	var checkForm = {

	checkInputs: function(user, pass) {

	var isValid = true;

	if ( !user \|\| !pass \|\| user.indexOf('@') === -1 ) {
	isValid = false;
	}
	'use strict';

	/* 1. Closures */

	(function () {
	var privateVar = "foo";
	})();

	console.log(privateVar); // Uncaught ReferenceError: privateVar is not defined
	<dom-module id="foo-component">
	<template>
	<style>
	</style>

	<button on-tap="addFruit">Añadir fruta</button>

	La primera fruta es: {{getFruit(fruits.*, 0)}}

	</template>
	<dom-module id="foo-component">

	<template>
	<h3>Frutas</h3>
	<template id="templateFruits" is="dom-repeat" filter="filterFruits" items="{{fruits}}" sort="orderFruits">
	<template is="dom-if" if="{{item.color}}">
	<p>La fruta {{index}} es {{item.name}}
	y es de color {{item.color}} <br>
	<button on-tap="setFavorite">favorita</button></p>
	</template>
	'use strict';

	(function () {

	var foo = function (params) {
	return new DomModule(params);
	};

	var DomModule = function (params) {
	var selector = document.querySelectorAll(params),
	'use strict';

	function Foo(numParam) {
	this.bar = numParam \|\| 0;
	}

	Foo.prototype.publicMethod = function() {
	let temp = 1 + this.bar;
	return temp;
	};
	import React from 'react';

	/*
	Los componentes react con estado(1) tienen tres grandes fases en su ciclo de vida:
	Mounting: montaje
	Mounted: ya está montado
	Unmounting: cuando se desmonta
	Cada fase tiene una serie de métodos asociados que nos pueden servir de punto de captura para hacer cosas. Los detallo en el propio componente.

	1. Los stateless no tienen ciclo de vida.
	<!doctype html>
	<html lang="">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>