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

驴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 鈥淛avaScript 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 9

Preguntas 0

Ordenar por:

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

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?

馃啔 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.