en mi opinión, no me convence usar JSX en vue… 🤔
Bienvenida e Introducción
Bienvenida y Presentación del proyecto: PlatziRooms
Creación y configuración inicial del proyecto utilizando VUE CLI 3
Boilerplate y Limpieza del proyecto
Render Functions y JSX
¿Que son las Render Functions y JSX?
Preparando nuestro entorno para un prototipo
Creación de un componente con createElement
Utilizando JSX para la creación de un componente
Utilizando Slots con Render Functions y JSX
Creando un Modal de Login para PlatziRooms
Creando la lógica general de nuestros modales con Vuex
Creando el contenido de nuestro modal
Componentes controlados y uso de librerías externas
Componentes Controlados y Variables Personalizadas
Construcción del componente de Recordar Contraseña
Creación de un componente Slider utilizando la librería tiny-slider
High Order Functions
¿Qué son las High Order Functions? - Crea tu primera HOF
Vuex
Obtener datos usando Vuex
Crea un getter dinámico en Vuex utilizando HOF
Creación de la vista para creación de publicaciones
Agregando datos con Vuex
Base de datos en tiempo real con Firebase
Instalación y Configuracion de Firebase Realtime Database
Obteniendo los datos desde Firebase Realtime Database
Agregando la consulta de usuarios
Almacenando nuevas publicaciones en Firebase Realtime Database
Perfeccionando el flujo de navegación de nuestra App
Autenticación con Firebase
Configuracion Inicial para trabajar con Firebase Authentication
Agregando nuevos usuarios en firebase autentication
Inicio de sesión de usuario
Cierre de sesión de usuario
Protegiendo páginas utilizando Navigation Guards
Scoped Slots
¿Qué son los Scoped Slots? Dónde utilizarlos y por qué
Integración de Scoped Slots en Platzi Rooms
Deploy
Creando y desplegando nuestra app en Heroku
Conclusiones y Despedida
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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
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 “moderna” (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 “compila” 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 “limpia” de crear los elementos, ya que con createElement el código era muy enredado, es raro, pero existe jaja
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?