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

Creación de un componente con createElement

6/34
Recursos

Aportes 12

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Peinen al profe!

¿Quieren crear su propia función createElement con Vainilla JS?

Las render functions me encantan, se ven interesantes, pero definitivamente sigo prefiriendo trabajar con los templates de Vue xD

Es compatible aún la sintaxis de pug al codear con jsx?

La clase está cada vez mas interesante. Mi consulta es:
¿Porqué es necesario usar @click.prevent en vez de @click?
Tengo entendido que eso se aplica para un button del tipo submit dentro de un formulario para evitar que se envíe el formulario en vez de realizar algun method. Pero en este caso no esta dentro de un formulario ni es del tipo submit, entonces ¿por qué usar @click.prevent ?

si tienes windows y npm y no te sale el yarn seve ni instalando todo usa teste comando

npx vue-cli-service serve App.vue

Excelente manera de crear un componente! Aunque es mas sencillo con template.

a alguien mas le pasa que le aparece un error al utilizar console.log

dejo extracto del error :

Unexpected console statement no-console

ya se algo de vue, pero venia buscando como trabajar con firebase, en si eso es lo que necesito, pero creo que estan trabajando material que ya se ha hecho en cursos anteriores, lo que hace que el curso como tal sea algo confuso

una sintaxis valida para render es:

render: function (createElement) {
    return createElement(
      'h1', 'hola mundo'
    )
  }```

Codigo de la clase:

ModalCreateElement.vue

<script>
export default {
  name: "ModalCreateElement",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    message: {
      type: String,
      required: true,
    },
  },
  render(createElement) {
    return this.show
      ? createElement(
          "div",
          {
            class: "modal",
          },
          [
            createElement(
              "p",
              {
                class: "message",
                // Pasamos el elemento prop message
              },
              this.message
            ),
            createElement(
              "button",
              {
                class: "btn",
                //on - indicamos que vamos a escuchar un evento
                on: {
                  click: this.clickCancelHandler,
                },
              },
              "Cancelar"
            ),
            createElement(
              "button",
              {
                class: "btn",
                //on - indicamos que vamos a escuchar un evento
                on: {
                  click: this.clickOkHandler,
                },
              },
              "Ok"
            ),
          ]
        )
      : null;
  },
  methods: {
    clickCancelHandler() {
      console.log("Click on Cancel");
    },
    clickOkHandler() {
      console.log("Click on Ok");
    },
  },
};
</script>

Ejecutar servidor