Bienvenida e Introducci贸n

1

Bienvenida y Presentaci贸n del proyecto: PlatziRooms

2

Creaci贸n y configuraci贸n inicial del proyecto utilizando VUE CLI 3

3

Boilerplate y Limpieza del proyecto

Render Functions y JSX

4

驴Que son las Render Functions y JSX?

5

Preparando nuestro entorno para un prototipo

6

Creaci贸n de un componente con createElement

7

Utilizando JSX para la creaci贸n de un componente

8

Utilizando Slots con Render Functions y JSX

9

Creando un Modal de Login para PlatziRooms

10

Creando la l贸gica general de nuestros modales con Vuex

11

Creando el contenido de nuestro modal

Componentes controlados y uso de librer铆as externas

12

Componentes Controlados y Variables Personalizadas

13

Construcci贸n del componente de Recordar Contrase帽a

14

Creaci贸n de un componente Slider utilizando la librer铆a tiny-slider

High Order Functions

15

驴Qu茅 son las High Order Functions? - Crea tu primera HOF

16

Vuex

17

Obtener datos usando Vuex

18

Crea un getter din谩mico en Vuex utilizando HOF

19

Creaci贸n de la vista para creaci贸n de publicaciones

20

Agregando datos con Vuex

Base de datos en tiempo real con Firebase

21

Instalaci贸n y Configuracion de Firebase Realtime Database

22

Obteniendo los datos desde Firebase Realtime Database

23

Agregando la consulta de usuarios

24

Almacenando nuevas publicaciones en Firebase Realtime Database

25

Perfeccionando el flujo de navegaci贸n de nuestra App

Autenticaci贸n con Firebase

26

Configuracion Inicial para trabajar con Firebase Authentication

27

Agregando nuevos usuarios en firebase autentication

28

Inicio de sesi贸n de usuario

29

Cierre de sesi贸n de usuario

30

Protegiendo p谩ginas utilizando Navigation Guards

Scoped Slots

31

驴Qu茅 son los Scoped Slots? D贸nde utilizarlos y por qu茅

32

Integraci贸n de Scoped Slots en Platzi Rooms

Deploy

33

Creando y desplegando nuestra app en Heroku

34

Conclusiones y Despedida

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

3D
20H
33M
38S

Utilizando Slots con Render Functions y JSX

8/34
Recursos

Los Slots nos ayudan a crear componentes reutilizables y personalizables al mismo tiempo, nos permiten definir el contenido de nuestros componentes para evitar el trabajo de crear un nuevo archivo por cada cambio en los componentes. Son muy 煤tiles e importantes en el mundo de Vue.js.

Aportes 24

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Recuerden , que $slots.default es muy diferente a children 鈥

https://vuejs.org/v2/guide/render-function.html#slots-vs-children

Solucion
En el componente ModalJsx

render() {
	return (this.show) ? <div class="modal">
		<div class="content">{this.$slots.default}</div>
	</div> : null
}

En el componente App

<modal-jsx :show="show">
	<p>hello World</p>
</modal-jsx>

Mi soluci贸n para agregar el slot al ModalJSX, fue agregar un div en el render del componente ModalJsx.vue, me qued贸 de la siguiente manera:

return (this.show) ? <div class="modal">
      <div class="content">
        {this.$slots.default}
      </div>
      <button onClick={this.clickCancelHandle} >Cancel</button>
      <button onClick={this.clickOkHandle}>Ok</button>
    </div> : null

Y por 煤ltimo, pasarle el contenido del slot desde App.vue

<modal-jsx :show="show">
     <h1>Titulo modalJsx</h1>
     <hr>
     <p> Hello world from AppVue </p>
   </modal-jsx>

Utilizando Slots en JSX!

render() {
    return (this.show) ? <div id="modal">
      <div class="content">{this.$slots.default}</div>
      <button onClick={this.clickCancelHandler}>Cancelar</button>
      <button onClick={this.clickOkHandler}>Ok</button>
    </div> : null
  },

Hola! Tengo dudas sobre la necesidad real de incorporar funcionalidades de React a Vue, la verdad鈥reo que vue tiene por si mismo posibilidades de sobra para hacer cualquier cosa, estamos en 2019, pregunta: 驴Alguien sabe si JSX se utiliza en proyectos reales y qu茅 perspectivas de crecimiento tiene actualmente en el ecosistema Vue? no he oido demasiado sobre esto 煤ltimamente鈥

Mi aporte como colocar comentarios en JSX

render () {
        return (this.show) ? <div class="modal">
            {/* <p>{this.message}</p> */}
            {this.$slots.default}
            <button onClick={this.clickCancelHandler}>Cancel</button>
            <button onClick={this.clickOkHandler}>Ok</button>
        </div> : null
    },

``
<modal-jsx :show=鈥渟how鈥 message=鈥淗ola desde Jsx鈥>
<h1>Modal JSX</h1>
<p>Hola desde mi componente slot</p>
</modal-jsx>

Soluci贸n JSX:

  render() {
    return (this.show) ? <div class="modal">
      <div> {this.$slots.default} </div>
      <button onClick={this.clickCancelHandler}>Cancel</button>
      <button onClick={this.clickOkHandler}>Ok</button>
    </div> : null
  },

Como dato interesante, con {{}} no funciona, tarde algo de tiempo en comprender que el equivalente en JSX es {}.

Mi c贸digo en ModalJsx.vue

return (this.show) ? <div class="modal">
                <div class="content">{this.$slots.default}</div>
                <button onClick={this.clickCancelHandler}>Cancel</button>
                <button onClick={this.clickOkHandler}>Ok</button>
            </div> : null

Y mi c贸digo en App.vue

<modal-jsx :show="show">
            <h1>Slots JSX</h1>
            <p>Hello world! con slots y jsx</p>
        </modal-jsx>

Los slots son secciones dentro de un componente, donde podemos cargar o reemplazar con elementos desde un elemento padre.

Definiendo slot en uncomponente:

render (createElement) {
    return (this.show) ? createElement('div', {
      class: 'modal',
    }, [
		createElement('div', {
        		class: 'content',
   	 	 }, this.$slots.default)

Cargando o reemplazando desde un elemento padre :

<modal-create-element :show="show">
	<h1>Modal title</h1>
	<p>Hello World</p>
</modal-create-element>

La solucion con JSX: render() {
return (this.show) ? <div class=鈥渕odal鈥>
<div class=鈥渃ontent鈥>
{this.$slots.default}
</div>
<div class=鈥渇orm鈥>
{this.$slots.form}
</div>
<div class=鈥渂tn鈥>
{this.$slots.btn}
</div>
</div> : null
},

Lo hice de esta manera: con el createElement render(h) {
return (this.show) ? h(鈥榙iv鈥, {
class: 鈥榤odal鈥
}, [
h(鈥榙iv鈥, {
class: 鈥榗ontent鈥
}, this.$slots.default),
h(鈥榙iv鈥, {
class: 鈥榖tn鈥
}, this.$slots.btn)
// h(鈥榖utton鈥, {
// class: 鈥榖tn鈥,
// on: {
// click: this.clickCancelar
// }
// }, 鈥楥ancelar鈥),
// h(鈥榖utton鈥 , {
// class: 鈥榖tn鈥,
// on: {
// click: this.clickok
// }
// }, 鈥榦k鈥)
]) : null
},

Dejo mi c贸digo JSX para esta clase:

return (this.show) ? <div class="modal">
            <p>{this.$slots.default}</p>
            <button onClick={this.clickCancelHandler}>Cancelar</button>
            <button onClick={this.clickOkHandler}>Ok</button>
        </div> : null

En App.vue:

<modal-jsx message="Hello Jsx" :show="show">
    <p>Slot JSX</p>
</modal-jsx>

En ModalJsx.vue:

<div class="modal">
    <div class="content">{this.$slots.default}</div>
    <button onClick={this.handleCancelClick}>Cancel</button>
    <button onClick={this.handleOkClick}>Ok</button>
</div>

ModalJsx.vue

		render() {
		return (this.show) ? <div class="modal">
			<div class="content">{this.$slots.default}
				<button onClick={this.clickCancelHandler}>Cancel</button>
				<button onClick={this.clickOkHandler}>Ok</button>
			</div>
		</div> : null
	},

驴Que son los Slots?

Componente ModalJsx.vue

  render () {
    return (this.show) ? <div class="modal">
      <div class="content">
        {this.$slots.default}
      </div>
      <button onClick={this.clickCancelHandler}>Cancel</button>
      <button onClick={this.clickOkHandler}>Ok</button>
    </div> : null
  },

Componente App.vue

    <modal-jsx v-bind:show="show">
      <h1>Modal title</h1>
      <p>Hello World</p>
    </modal-jsx>

Buena explicaci贸n, sencilla y entendible

App.vue

<modal-jsx :show="showModal">
	<h1>Test Slot with JSX</h1>
</modal-jsx>
<div class="modal">
        <div class="content">{this.$slots.default}</div>
        <button onClick={this.cancelHandler}>Cancelar</button>
        <button onClick={this.okHandler}>Ok</button>
</div>

Por si quieres trabajar con las directivas @ o v-on espec铆ficamente, te recomiendo trasladar con un slot desde el JSX hasta el App.vue la informaci贸n de este y definir tus m茅todos en el App( claro, ser铆a 煤til en especial en este caso remoto, pero en un proyecto mucho m谩s grande no lo ser铆a tanto馃):
JSX:

<script>
export default {
    name:"ModalJsX",

    props: {
        show: {
            type: Boolean,
            default: false
        }
    },

    render() {
      return(this.show) ?<div id="modal" v-show="show">
                <div>{ this.$slots.default }</div>
            </div> : null
    }
}
</script>

App.vue:

<template>
    <div id="app">
        <button @click.prevent="toogleModalWatcher">Toogle Modal</button>
        <modal-create-element-vue :show="show">
            <p>Sistem Rooms</p>
            <h1>Derek</h1>
        </modal-create-element-vue>
        <modal-js-x :show="show">
            <h1>This is my room</h1>
            <p>Tiene 84 elementos dentro</p>
            <button @click='ChooseYourCancel'>Cancel</button>
            <button @click='ChooseYourOk'>Ok</button>
        </modal-js-x>
    </div>
</template>

<script>
import ModalJsX from "./ModalJsX";
export default {
    name:"app",
    data() {
        return {
            show: false
        }
    },
    components: {
        ModalJsX
    },
    methods: {
        toogleModalWatcher() {
            this.show = !this.show;
        },
        ChooseYourCancel() {
            console.log(`You Choosed cancel`)
        },
        ChooseYourOk() {
            console.log(`You Choosed OK`)
        },
    }
}
</script>

<style>
    body {
        background-color: rgb(255, 243, 218);
    }
</style>

Modaljsx.vue

render() {
    return this.show ? (
      <div class="modal">
        <p>{this.$slots.default}</p>
        <button onclick={this.clickCancelHandler}>Cancel</button>
        <button onclick={this.clickOkHandler}>Ok</button>
      </div>
    ) : null;
  }

App.vue:

<modal-jsx :show="show">
      <h1>Hello from ModalCreateElement</h1>
      <p>This is a modal</p>
    </modal-jsx>

APP.vue

<ModalJSX :show="show" message="Hello JSX">
      <p>Hello JSX!</p>
    </ModalJSX>

ModalJSX.vue

<p>{this.$slots.default}</p>
render() {
  return this.show ? <div class="modal">
    <div class="content">{this.$slots.default}</div>
    <button onClick={this.clickCancelHandler}>Cancel</button>
    <button onClick={this.clickOkHandler}>Ok</button>
  </div> : null
}

`
App.vue
<modal-jsx :show=鈥渟how鈥>
<p>Hola Mundillito</p>
</modal-jsx>

ModalJsx.vue
return (this.show) ? <div class=鈥渕odal鈥>
<div class=鈥渃ontent鈥>{this.$slots.default}</div>
<button onClick={this.clickCancelHandler}>Cancel</button>
<button onClick={this.clickOkHandler}>Ok</button>
</div> : null
`