Popular posts

Lorefnon and Ben Buchanan (200ok) are correct in that React and jQuery do not cover the same subject matter one-for-one. However, the areas where React lacks a feature found in jQuery, chances are that there is a native feature that is better served to help. JavaScript has caught up a lot in the last few years to a point where many of the gaps that jQuery filled are now implemented natively. If you are going to invest time in learning a framework/library, a modern one like React or Vue is much more worthwhile. (Honestly I would recommend learning Vue for a novice before learning React.)

There are only a few concepts in jQuery that are critical to know to use it effectively.

• Querying – $()
• DOM Manipulation – methods such as append(), insert(), addClass()
• Events – $.on()
• Ajax – $.ajax()

The main construct in jQuery is the node list, what is returned by $(). Node lists can then in turn be operated on to manipulate elements in the DOM. On the other hand, in modern frameworks, one of the foundational concepts is that of the binding. Bindings make code more intelligible by allowing logic to be declaratively included alongside markup rather than being imperatively executed separately onto markup. Bindings will cover jQuery's mechanisms for event handling (e.g. $.on()), DOM manipulation, and querying (implicitly). As for AJAX, just use the browser's native fetch() method.

Take for instance what is need to create a todo list with clickable items.

In React:

render() {
    return (
        <ul>
        (todos.map(function(todo) {
            return <li onClick=markDone>{todo.text}</li>
        }))
        </ul>
    );
}

In Vue:

<ul>
 <li v-for="todo in todos" v-on:click="markDone">
        {{ todo.text }}
 </li>
</ul>

In Ember:

<ul>
    {{#each todos as |todo|}}
 <li {{action 'markDone'}}>
        {{todo.text}}
 </li>
    {{/each}}
</ul>

In Knockout:

<ul data-bind="foreach: todos">
 <li data-bind="text: text, click: markDone"></li>
</ul>

In Angular 2:

<ul *ngFor="let todo of todos">
 <li (click)="markDone($event)">
        {{ todo.text }}
 </li>
</ul>

However, in jQuery, it's more like this:

var list = $('<ul></ul>');
todos.forEach(function(todo) 
    var listItem = $('<li></li>')
        .text(todo.text)
        .on('click', markDone);

    list.append(listItem);
});

$('body').append(list);

jQuery tends to lead to bad coding practices and sloppy code, often without any discernible structure. It is hard to maintain and hard to scale. With all of the alternatives available these days, there is no reason to have jQuery in your toolbelt... with exception of needing it to maintain legacy code.

Also I must disagree with the assertion that only vanilla JavaScript in worthwhile to learn and not any frameworks. For a novice, using only vanilla JavaScript will end up being too daunting. Libraries exist for a reason because they have solved a problem (and solved it well). Don't reinvent the wheel unnecessarily.

Matt Strom I think you should write this reply as a separate answer or just update your existing answer - so that more users can read this and upvote! :)

jQuery isn't _evil _as such. It has nicer syntax for a lot of simple tasks and vanilla js still has tricks and traps you have to remember, eg. Array.prototype.forEach hacks just to get IE11 to iterate over nodelists.

So comparing the two:

$('selector').each(function(){
  $(this).dostuff();
});

Array.prototype.forEach.call(document.querySelectorAll('selector'), function(el) {
  el.dostuff();
});

The vanilla js really isn't the nicest bit of code you're going to see all day, although it is quick.

So going from jQuery to vanilla I do miss the convenience of just not having to worry about compatibility. jQuery is just _a lot of extra weight _for that convenience; and being an abstraction it will always have a performance tradeoff. Hence rolling up the sleeves and using vanilla ;)