Aprende JSX para mejorar tu nivel profesional con Vue (y React)

La rivalidad entre comunidades de Vue y React parece no tener fin. Ambas pelean para demostrar que son las mejores y esto nos ha dividido mucho, hasta ahora. La realidad es que no son tan diferentes. Ambas herramientas son muy útiles para programar los componentes de nuestras aplicaciones y aprovechar todas las ventajas en performance por usar el Virtual DOM.

NO tenemos por qué elegir SOLO una de estas herramientas.

Podemos aprender ambas tecnologías y unir esfuerzos para obtener muchas ventajas. Podemos aprender de las mejores prácticas de otras tecnologías para traducir e implementar funcionalidades especiales de otras aplicaciones a pesar de haber sido programados con herramientas diferentes.

Solo imagina llegar a una entrevista con tu futuro equipo de trabajo y decir: “Hey! No solo entiendo… Yo también puedo programar con React y Vue al mismo tiempo” 😱😏😎.

En este tutorial vamos a aprender todas las formas diferentes de crear componentes y la gran cantidad de beneficios que conseguimos al juntar todas estas buenas prácticas para construir aplicaciones increíbles con React y Vue (o ambas).

La paz mundial tiene tiene nombre y apellido: JSX y Render Functions

Las Render Functions son una forma de escribir componentes de forma ordenada y con control sobre la lógica y las funcionalidades de cada componente. Estas funciones se encargan de transformar nuestros elementos y componentes escritos con JavaScript en el código HTML que le mostramos a los usuarios en las aplicaciones finales.

Algunas herramientas como React utilizan estas funciones con JSX: una sintaxis especial que nos ayuda a escribir nuestras mismas render functions pero de una forma más parecida a HTML o XML. De ahí su nombre: JavaScript XML o JavaScript eXtension.

Veamos la diferencia:

// Render Functions (no JSX)
render(createElement) {
  return createElement(
    // nombre de la etiqueta HTML
    ‘p’,
    // props del elemento o componente
    {
      class: “blue-text”
      id: “PID__someID”
    },
    // props del elemento o componente
    “Texto dentro del párrafo”
  );
}

// JSX (una “syntax sugar” de createElement)
render(createElement) {
  return (
    <pclass=”blue-text”id=”PID__someID”>
      Texto dentro del párrafo
    </p>
  );
}

Podemos usar render functions con las funciones createElement para definir las estructura HTML de nuestros componentes y aprovechar todas las funcionalidades de JavaScript. Pero, si añadimos muchos componentes, se puede volver algo confuso o poco visual. Para eso existe JSX.

Vamos a crear los mismos componentes de todas las formas posibles: React con JSX, Vue con Vue Templates y Vue con JSX.

Proyecto Comparación: JSX con React

JSX no es un requisito para usar React. De hecho, usar React sin JSX es especialmente conveniente cuando no queremos configurar herramientas de compilación como Webpack y Babel en nuestro entorno de desarrollo.

Sin embargo, en la vida real, --casi-- siempre usamos React y JSX justos y con muchas otras herramientas de compilación, automatización y todo lo que se nos ocurra.

Esta es la regla: Todos nuestros componentes deben ser reutilizables. El mensaje dentro de la etiqueta span debe ser personalizable y debemos conseguir el siguiente código HTML:

<pclass=”default-text”>
  Hola! Soy un texto escrito con <spanclass=”red-text”>React y JSX</span></p>

Vamos a escribir nuestro componente sin JSX:

const MyComponent = props => React.createElement(
  “p”,
  { className: “default-text” },
  [
    “Hola! Soy un texto escrito con ”,
    React.createElement(
      “span”,
      { className: “red-text” },
      props.tools
    )
  ]
);

React.render(
  React.createElement(MyComponent, { tools: “React y JSX” }),
  document.getElementById(“root”)
);

Si tienes buen ojo te habrás dado cuenta que usamos el atributo className en vez de sólo class. Esto se debe a que React nos exige que todas nuestras props estén escritas en camelCase. Incluso, nuestras propiedades personalizadas: class => className, charset => charSet, cualquier_OTRO-nombre => cualquierOtroNombre.

Sin embargo, nuestro componente es muy difícil de leer y (como ya sabemos) para eso está JSX:

const MyComponent = props => (
  <pclassName=”defaultText”>
    Hola! Soy un texto escrito con
    {“ ”}
    <spanclassName=”red-text”>{props.tools}</span></p>
);

React.render(
  <MyComponenttools=”ReactyJSX” />,
  document.getElementById(“root”)
);

Proyecto Comparación: Vue Templates

Ahora, vamos a construir este mismo componente pero con Vue Templates, la forma recomendada de escribir componentes en Vue.

Para no complicarnos mucho vamos a usar los Single File Components: archivos con la extensión .vue que nos ayudan a separar nuestra estructura en HTML (Vue Templates) de la lógica en JavaScript y los estilos en CSS.

// MyComponent.vue
<template><pclass="default-text">
    Hola! Soy un texto escrito con
    <spanclass="red-text">{{ tools }}</span></p></template>

&lt;script&gt;
export default {
  name: "MyComponent",
  props: ["tools"]
}
&lt;script&gt;

// App.vue
<template><MyComponenttools=”VueTemplates” /></template>

&lt;script&gt;
import MyComponent from “./MyComponent.vue”

export default {
  components: { MyComponent }
}
&lt;script&gt;

Proyecto Comparación: Render Functions y JSX con Vue 🔥

Viene lo más divertido. Las render functions son funciones con el nombre “render” que nos permiten combinar lo mejor de los dos mundos (React y Vue) para escribir componentes usando JSX sin perder la compatibilidad con otras formas de programar en Vue con Vue Templates. Son perfectamente integrables.

Solo debemos hacer algunos cambios: Primero, ya no usamos la etiqueta <template> para definir la estructura en HTML. Con las render functions debemos escribir el “HTML” en la función renderde la etiqueta <script>.

Además, a Vue no le gusta mucho que debamos escribir los atributos y propiedades de nuestros componentes en camelCase. Todo vuelve a la normalidad: class sigue siendo class en vez de className.

Primero veamos el ejemplo sin JSX: Render Functions “Vainilla”:

// MyComponent.vue
<script>
export default {
  name: "MyComponent",
  props: ["tools"],
  render: function(createElement){
    return createElement(
      "p",
      { class: "default-text" },
      [
        "Hola! Soyuntextoescritocon “,
        createElement(
          "span",
          { class: "red-text" },
          this.tools
      )
    ])
  }
}
<script>

// App.vue
<template>
  <MyComponenttools=”RenderFunctions” />
</template>

&lt;script&gt;
importMyComponentfrom “./MyComponent.vue”

exportdefault{
  components: { MyComponent }
}
&lt;script&gt;

Tenemos el mismo problema que en React. Es muy difícil entender la estructura en HTML de nuestros componentes. No puedo más. Vamos con JSX:

// MyComponent.vue
<script>
export default {
  name: "MyComponent",
  props: ["tools"],
  render: function(createElement) {
    return (
      <pclass=”default-text”>
        Hola! Soy un texto escrito con
        {“ ”}
        <spanclass=”red-text”>{this.tools}</span></p>
    );
  }
}
&lt;script&gt;

// App.vue
<template><MyComponenttools=”JSX” /></template>

&lt;script&gt;
import MyComponent from “./MyComponent.vue”

export default {
  components: { MyComponent }
}
&lt;script&gt;

Ahora si. El código es mucho más limpio y estamos aprovechando las sintaxis de ambas tecnologías para construir un componente en Vue con JSX. Puedes ver el proyecto completo en este SandBox: Vue Render Functions and JSX - Code Sandbox.

Conclusiones

¿Lo ves? ¡No tenemos que pelear! Podemos unirnos y crear componentes asombrosos para todos. Te invito a tomar el Curso Avanzado de Vue y Firebase por Bedu donde vamos aprender más a fondo cómo funcionan estas y otras características de Vue y Firebase: Slots y Scoped Slots, Vue Router y Navigation Guards, Vuex, Autenticación con Firebase y muchas otras cosas.

En algún momento tenía que hacer este chiste. Es inevitable. Solo es un resumen de todo lo que aprendimos en este tutorial. NO es con mala intención así que solo relajate y disfruta mientras hago el mundo arder:

Vue, hermano. ¡Ya eres como React!