JSX de React vs plantillas de Vue: un enfrentamiento en el front-end

React.js y Vue.js son dos de las bibliotecas de JavaScript más populares del planeta. Ambos son potentes y relativamente fáciles de recoger y usar.

Tanto React como Vue:

  • usar un DOM virtual
  • proporcionar componentes de vista reactiva
  • mantener un enfoque en un aspecto del desarrollo. En este caso, el archivo view.

Con tantas similitudes, podría suponer que ambas son versiones diferentes de lo mismo.

Bueno, hay una gran diferencia entre estas dos bibliotecas: cómo le permiten al desarrollador crear sus componentes de vista y, a su vez, su aplicación.

React usa JSX, un término acuñado por el equipo de React, para representar contenido en el DOM. Entonces, ¿qué es JSX? Básicamente, JSX es una función de representación de JavaScript que le ayuda a insertar su HTML directamente en su código JavaScript.

Vue adopta un enfoque diferente y utiliza plantillas similares a HTML. Usar plantillas de Vue es como usar JSX, ya que ambas se crean con JavaScript. La principal diferencia es que las funciones JSX nunca se utilizan en el archivo HTML real, mientras que las plantillas de Vue sí.

Reaccionar JSX

Echemos un vistazo más profundo a cómo funciona JSX. Suponga que tiene una lista de nombres que desea mostrar en el DOM. Una lista de las nuevas contrataciones que su empresa realizó recientemente.

Si estuviera usando HTML simple, primero necesitaría crear un archivo index.html. Luego, agregaría las siguientes líneas de código.


   
  • John
  • Sarah
  • Kevin
  • Alice

    Nada espectacular aquí, solo código HTML simple.

    Entonces, ¿cómo harías lo mismo usando JSX? El primer paso sería crear otro archivo index.html. Pero en lugar de agregar el HTML completo como lo hizo antes, solo agregará un divelemento simple . Este divserá el elemento contenedor donde se renderizará todo su código de React.

    El divtendrá que tener un identificador único por lo que reaccionan sabe dónde encontrarlo. Facebook tiende a favorecer la palabra clave raíz, así que sigamos con eso.

    Ahora, al paso más importante. Creando el archivo JavaScript que contendrá todo el código de React. Llame a este app.js.

    Así que ahora que tienes todo eso fuera del camino, en el evento principal. Visualización de todas las nuevas contrataciones al Dom usando JSX

    Primero necesitaría crear una matriz con los nombres de las nuevas contrataciones.

    const names = [‘John’, ‘Sarah’, ‘Kevin’, ‘Alice’];

    A partir de ahí, necesitaría crear un elemento React que representará dinámicamente la lista completa de nombres. Esto sin que tenga que mostrar manualmente cada uno.

    const displayNewHires = ( 
        
      {names.map(name =>
    • {name}
    • )}
    );

    La clave a tener en cuenta aquí es que no tiene que crear <elementos li> individuales . Solo necesita describir cómo quiere que se vean una vez y React se encargará del resto. Eso es algo bastante poderoso. Si bien solo tiene algunos nombres, ¡imagínese tener una lista de cientos de miles! Puede ver cómo este sería un enfoque mucho mejor. Especialmente yo f the

  • Los elementos son más complejos que los que se utilizan aquí.

    El último fragmento de código que se necesita para representar el contenido en la pantalla es la función principal de procesamiento de ReactDom.

    ReactDOM.render( displayNewHires, document.getElementById(‘root’) );

    Aquí le está diciendo a React que renderice el contenido del displayNewHiresinterior divcon un elemento de root.

    Así es como debería verse su código de React final:

    const names = [‘John’, ‘Sarah’, ‘Kevin’, ‘Alice’]; const displayNewHires = ( 
         
      {names.map(name =>
    • {name}
    • )}
    ); ReactDOM.render( displayNewHires, document.getElementById(‘root’) );

    Una cosa clave a tener en cuenta aquí es que todo esto es código React. Esto significa que todo se compilará en JavaScript antiguo. Así es como se vería finalmente:

    ‘use strict’; var names = [‘John’, ‘Sarah’, ‘Kevin’, ‘Alice’]; var displayNewHires = React.createElement( ‘ul’, null, names.map(function (name) { return React.createElement( ‘li’, null, name ); }) ); ReactDOM.render(displayNewHires, document.getElementById(‘root’));

    Eso es todo al respecto. Ahora tiene una aplicación React simple que mostrará una lista de nombres. No hay nada que destacar, pero debería darte una idea de lo que React es capaz de hacer.

    Plantillas de Vue.js

    De acuerdo con el último ejemplo, una vez más creará una aplicación simple que mostrará una lista de nombres en el navegador.

    The first thing that you need to do is create another empty index.html file. Inside that file, you will then create another empty div with an id of root. Keep in mind though, that root is only a personal preference. You can call the id whatever you like. You only need to make sure that it matches up later on when you sync the html to your JavaScript code.

    This div will function like it does in React. It will tell the JavaScript library, in this case Vue, where to look in the DOM when it wants to start making changes.

    Once that’s done, you’re going to create a JavaScript file that will house all the Vue code. Call it app.js, to stay consistent.

    So now that you have your files ready to go, let’s get into how Vue displays element onto the browser.

    Vue uses a template-like approach when it comes to manipulating the DOM. This means that your HTML file will not only have an empty div, like in React. You’re actually going to write a good part of your code in your HTML file.

    To give you a better idea, think back on what it takes to create a list of name using plain HTML. A <ul> element with some

  • elements inside. In Vue, you are going to do almost the exact same thing, with only a few changes added in.

    Create a <ul> element.

    
         

      Now add one empty <li> element inside the

        element.

        
              

        Nothing new yet. Change that by adding a directive, a custom Vue attribute, to your <li> element.

        
              

        A directive is Vue’s way of adding JavaScript functionality straight into the HTML. They all start with v- and are followed by descriptive names that give you an idea of what they are doing. In this case, it’s a for loop. For every name in your list of names, listOfNames, you want to copy this <li> element and replace it with a new

      • element with a name from your list.

        Now, the code only needs one final touch. Currently, it will display an <li> element for every name in your list, but you have not actually told it to display the actual name onto the browser. To fix that, you are going to insert some mustache like syntax inside your

      • element. Something you might have seen in some other JavaScript libraries.

        
               
        • {{name}}

        Now the <li> element is complete. It will now display each item inside a list called listOfNames. Keep in mind that the word name is arbitrary. You could have called it item and it would have served the same purpose. All the keyword does is serve as a placeholder that will be used to iterate over the list.

        The last thing that you need to do is create the data set and actually initialize Vue in your application.

        To do so, you will need to create a new Vue instance. Instantiate it by assigning it to a variable called app.

        let app = new Vue({ });

        Now, the object is going to take in a few parameters. The first one being the most important, the el (element) parameter that tells Vue where to start adding things to the DOM. Just like you did with your React example.

        let app = new Vue({ el:’#root’, });

        The final step is to add the data to the Vue application. In Vue, all the data passed into the application will be done so as a parameter to the Vue instance. Also, each Vue instance can only have one parameter of each kind. While there are quite a few, you only need to focus on two for this example, el and data.

        let app = new Vue({ el:’#root’, data: { listOfNames: [‘Kevin’, ‘John’, ‘Sarah’, ‘Alice’] } });

        The data object will accept an array called listOfNames. Now whenever you want to use that dataset in your application, you only need to call it using a directive. Simple, right?

        Here’s the final application:

        HTML

        
               
        • {{name}}

        JavaScript

        new Vue({ el:”#root”, data: { listOfNames: [‘Kevin’, ‘John’, ‘Sarah’, ‘Alice’] } });

        Conclusion

        You know now how to create two simple applications using both React and Vue. They both offer a robust amount of features, though Vue tends to be the easier to use. Also, keep in mind that Vue allows the use of JSX, though it is not the preferred method of implementation.

        Either way, these are two powerful libraries and you can’t go wrong using either one.

        If you want to learn more about web development check out my website at juanmvega.com for videos and articles on the latest JavaScript standards and frameworks!