React or Vue? Choosing a library for front-end development

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

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

    {names.map(name => 
{name}
 )}
  
);
ReactDOM.render(
  displayNewHires,
  document.getElementById(‘root’)
);

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

Vue Templates

containing a number of elements
• . In Vue, you need to do almost the same, but with some changes. So, create an element
  .
  
  
  
  Now, inside this element, create one empty
  • .
    
    
    
    So far, everything is quite familiar. Edit
  • by adding a Vue directive to it that looks like an attribute of a tag.
    
    
    
    Native directives are an approach that Vue uses to add JavaScript functionality directly to HTML. Symbols are located at the beginning of directives v-, followed by a descriptive name that allows them to understand the roles of directives. In this case, we have a cycle for. For each name of listOfNameswe want to copy an element
  • and replace it with a new element
  • containing this name.
    
    Now, in order to make the code workable, only a little remains. Namely, what has already been written will allow the formation of an element
  • for each name on the list. But we have not yet informed the system that this element should contain a name from the list. In order to fix this, you need to add to the element
  • A design whose syntax is similar to Mustache templates. You may already have seen this in other JS libraries.
    
    

    
      
    
        {{name}}
      

    
    Element
  • ready for work. Now each of the elements of the list formed by the Vue tools will output the name from listOfNames. It is worth remembering that the word "name" in this case is chosen arbitrarily. With the same success, you can use any other, say, “item”. All that the keyword does is serve as a substitution field that will be used when processing the list of names.
    
    It remains only to create a dataset and initialize Vue in the application. To do this, create a new instance of Vue. Assign it to a variable app.
    
    

    let app = new Vue({
    });

    
    The Vue object accepts several parameters. The first, and perhaps the most important, is el(that is, an element). He tells Vue where exactly in the DOM is where you need to add new elements. This is very similar to how React works.
    
    

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

    
    The final step is to add data to the Vue application. In this library, data is transferred to the application through the Vue instance parameter. In addition, each Vue instance can have only one parameter of each kind. Although there are a lot of parameters, in our example we can focus on only two - this is the above el, and the parameter data.
    
    

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

    
    The object datanow contains an array listOfNames. And when you need to use this data set in the application, you only need to call it using the directive. It's pretty simple. Here's what the finished application looks like.
    
    HTML:
    
    

    
      
    
        
    
          {{name}}
        
      

    
    JavaScript:
    
    

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

    
    

    Conclusion

    
    Now you know how to create simple applications using React and Vue. We hope you, with the help of our simple examples, have taken the first steps in the development areas using React and Vue, and are ready to move on in search of "your" front-end library.
    
    In the end, I want to say that both libraries offer an excellent set of features. Usually, although this is probably a matter of habit, Vue is somewhat easier to use. It is worth noting that Vue supports JSX, but a similar approach to creating Vue applications is used infrequently.
    
    In any case, both React and Vue are powerful tools, any of which allows you to create great web applications, and no matter what you choose, you won’t lose.
    
    Dear readers! And what do you use for front-end development?