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

Utilizando JSX para la creaci贸n de un componente

7/34
Recursos

JSX nos permite definir la estructura de nuestros componentes con una sintaxis similar a HTML con todos los beneficios de JavaScript. Recuerda que JSX es una syntax sugar para escribir componentes con createElement y resulta muy 煤til o familiar si estamos familiarizados con React.

Aportes 12

Preguntas 2

Ordenar por:

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

en mi opini贸n, no me convence usar JSX en vue鈥 馃

Como aporte, en JSX se puede omitir el operador ternario utilizando el &&:

render () {
    return (
      this.show && 
      <div class="modal">
        <p>{this.message}</p>
        <button onClick={this.handleCancelClick}>Cancel</button>
        <button onClick={this.handleOkClick}>Ok</button>
      </div>
    )
  },

Todo Document Model de los Nodos del Arbol HTML tienen propiedades (redundante), a que voy CreateElement es una Forma 鈥渕oderna鈥 (tonta) de crear Nodos del DOM de forma muy VIU, a ver si me explico:

Version Vanilla:

const img = document.createElement('img');
img.src = 'https://media.giphy.com/media/cuPm4p4pClZVC/giphy.gif'
img.onClick = () => alert('Hola')

Version super moderna, goku, kamekameha, zen o sama VIU:

createElement('img', {
    attrs: {
        src: 'https://media.giphy.com/media/cuPm4p4pClZVC/giphy.gif',
    },
    on: {
        click: function() {
            alert('Hola');
        }
    }

Ahora, se han dado cuenta algo en JSX? Cuando escribimos un onClick directamente escribimos es onClick en vez de onclick en minuscula como lo hacemos naturalmente?

Explico porque, JSX crea nodos de forma dinamica en vanilla pero sin necesidad de instanciar las cosas, por ejemplo:

Version JSX:

return (
<CampoUsuario>
	<input placeHolder="Escribe aqui algo" />
<CampoUsuario/>
)

JSX Traduce a Vanilla o a createElement de React o Vue Algo asi:

const CampoUsuario = document.createElement('div');
CampoUsuario.id = '_CampoUsuario_';
const input = document.createElement('input');
input.placeHolder = 'Escribe aqui algo';
input.appendChild(input);

Me gusta mas JSX.
Pero me encantar铆a puedan dar m谩s contexto d贸nde es necesario usar render functions en VueJS.
Algunos comentan en componentes statesless, pero que es eso?

Se puede usar Bootstrap-Vue con JSx?

A mi me gustaria saber es, qu茅 utilidad le puedo dar a cada una de las formas de crear los componentes??? o es cuestion de gustos???.
Es decir, por un lado tenemos las SFC, por otro tenemos la creacion de componentes por medio de renderFunction(), y otra forma a traves de la sintaxis de JSX. La verdad todas me parecen espectaculares, pero, en que momento usar cual???

bueno entonces noto la complejidad porque yo no vengo de react seria entonces mejor aprender react ? y luego esta version extensa de vue ?

La primera vez que tom茅 el curso no me quedaban los conceptos muy claros, pero ahora que React es mi pan diario desde hace unos meses es muy pero muy parecido.

Haber si entend铆 馃:

Si createElement es una funci贸n super chevere para crear elementos de HTML. Y, JSX es una sintaxis super chevere de escribir createElement porque se parece a HTML鈥 Entonces, JSX es una sintaxis muy parecida a HTML que 鈥渃ompila鈥 a elementos de HTML con createElement que, por supuesto, compila a HTML ahora si de verdad 馃槄.

createElement es una nueva feature de vue para el desarrollo de componentes al estilo react y que facilita o m谩s bien hace posible el entendimiento de dicha pr谩ctica para una posible migraci贸n o facilidad de uso entre react y vue escrita en sintaxis similar a html llamada jsx

Me gusta mas vue natural, pero pues es interesante como JSX se puede meter dentro de vue, pense que era solo para REACT

JSX es una manera m谩s 鈥渓impia鈥 de crear los elementos, ya que con createElement el c贸digo era muy enredado, es raro, pero existe jaja