Utilizando JSX para la creación de un componente

Clase 7 de 34 • Curso Avanzado de Vue.js 2 y Firebase por Bedu

Resumen

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.

Diego Fernando Ticona Ramos

student•

en mi opinión, no me convence usar JSX en vue... :thinking:

Carlos Eduardo López Pérez

student•

creo que la unica funcionalidad es que te permite armar tus propios componentes con metodos y propiedades de forma mas "sencilla" tampoco me convence a mi.. ni me gusto

Angel Cabrera

student•

La primera vez que lo ví, me chocó un poco y pensé lo mismo, ahora que lo veo por segunda vez pienso que siempre debemos estar abierto a nuevo conocimiento y que es una herramienta muy interesante que nos brinda Vue.

Y a pesar de que algunos no lo veamos util, hay muchas otras personas que utilizan esta funcionalidad día a día en sus proyectos.

Juan Pablo Calao Pérez

student•

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>
    )
  },

Juan Reyes

student•

Trucazo :v

Mateo Santiago Zapata Maldonado

student•

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);

Alejandro González Reyes

student•

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?

Edward Steven Ramos Palacios

teacher•

Los componentes stateless son aquellos que no tienen un estado en si, y por el contrario reciben los datos por propiedades. por ejemplo:

Este archivo MyImage.js (por darle un nombre. Puede ser cualquiera)

export default {
  props: {
    src: {
      required: true,
      type: String
    }
  },
  render(createElement){
    return createElement(
      'img',
      {
        'attrs': {
          'src': this.src
        }
      }
    )
  }
}

y lo usarias igual:

<MyImage
      src="el/path/a/la/imagen.jpg">
</MyImage>

Ervic Perez Mendoza

student•

Se puede usar Bootstrap-Vue con JSx?

Alexander Valencia

student•

es posible

Leniel Luzardo

student•

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???

Jose Daniel Atencio Manzanillo

student•

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

Kevin Morales

student•

No hace falta aprender necesariamente React, puede ir al curso de Vue https://platzi.com/clases/vuejs/

Ricardo Celis

teacher•

así es puedes comenzar con los otros cursos de Vue que te dejarán más que listo para este, saludos!

Alan Saldívar

student•

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.

Juan Castro

teacher•

Haber si entendí :thinking::

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 :sweat_smile:.

Juan Castro

teacher•

JSX In Depth | React Docs

José Manuel Casani Guerra

student•

JSX nacio de XHP , que es una forma de hacer template mediante XML e interpretadores javascript..

JSX no es HTML , alli te equivocas , se parece al HTML para darle una confianza y usabilidad al codigo ..

Esteban Ramos Fernández

student•

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

José Manuel Casani Guerra

student•

No es tan nueva que digamos , esta desde la version 2 de Vue

Javier Diaz Chamorro

teacher•

Como nota: createElement no es un nuevo feature ya que tiene incorporado como menciona el compañero desde la versión 2, principalmente createElement es el eslabón principal ya que funge como un motor de interpretación de elementos en el DOM. Si tienen curiosidad, todo el código de templating que ustedes realicen ya sea en template o jsx, es interpretado a través del paquete vue-template-compiler y transpilado a elementos con createElement. Si tienen la curiosidad, compilen el proyecto como si lo lanzarán a producción y verifiquen el bundle de JavaScript.

npm run build

yarn build

Alexander Nova Arevalo

student•

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

Carlos Eduardo Gomez García

teacher•

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