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

Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

¿Que son las Render Functions y JSX?

4/34
Recursos

Las render functions son funciones que se encargan de renderizar contenido, interpretar nuestros elementos escritos en JavaScript y transformarlos a código plantilla. Estas funciones proveen mayor control de la lógica de negocio y permiten una transición o curva de aprendizaje más ligera.

Frameworks como React utilizan estas funciones gracias a JSX (una “JavaScript eXtension”) porque nos permite escribir código JavaScript similar a HTML y XML. Nosotros vamos a utilizar un plugin para implementar estas características con Vue.

Desventajas:

  • En ocasiones suele volverse complicado
  • Perdemos algunas características y directivas del framework (v-bind, v-if, v-for)
  • Generalmente, hay muy poca documentación

Aportes 10

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Como profesional de Vuejs , JSX en Vuejs es recomendable mayormente cuando vas a usar:

  • Componentes funcionales (stateless)
  • HOC (High Order Components)

Para todo lo demas, facilmente puedes hacerlo con SFC (Single File Components)

Vuejs, es como el premio nobel de la paz entre los programadores, ya que no discrimina ningun conocimiento que tengas, todo te sirve en Vuejs , ya sea que vengas de Angular o React o algun otro framework JS …

<h3>Resumen de la clase:</h3>

voy a extrañar demasiado v-if :c

Realmente depende del gusto de cada quien trabajar con templates o con render functions, Vue siempre ha sido muy flexible en todo esto, y por supuesto, a cualquiera que venga de React se le van a hacer más fácil las render functions, pero recordemos que esto NO es React, de hecho, Vue recomienda mucho más usar los templates, precisamente porque pierdes mucha funcionalidad de Vue

Render functions ha ganado bastante terreno dada la popularidad de react, una de las grandes cosas que tiene vue es que adopta técnicas modernas de desarrollo y las incorpora, esto no solo sirve para poder aprender la variedad de técnicas, también nos ahorra bastante tiempo al momento de querer aprender de otros frameworks como react, en lo personal me interesó bastante estas nuevas disciplinas

Yo vengo de usar react y estaba mas acostumbrado a usar JSX y me parece muy chevere que tambien se pueda usar en VUE.
Asi mi curva de aprendizaje sera menos dolorosa jejeje 😃

🤔🔥 ¿Llegara a existir JSX 2.0?

Render ? Me quedo en React… 🙄

Le quitas toda la esencia de Vue

🆚 Algunas características o diferencias de JSX (JavaScript) con HTML (XML):

  • Siempre usamos camelCase: charset es charSet, tabindex es tabIndex, font-size es fontSize, first_name es firstName, etc 🐫
  • Class es className (no con el plugin de Vue) 🔪
  • Podemos usar condicionales, variables o -casi- cualquier otra expresión:
<h1>Hello, {user && formatName(user)}!</h1>
  • Lo mismo para declarar atributos:
<h1 className={condition ? "green" : "red"}>Hello, JuanDC!</h1>

Disculpen creo no entendi mucho esta clase, borre todos los archivos, luego me dice que descargue los archivos de otro project.