Popular posts

At the suggestion of Sandeep Panda, I'm reposting my reply to reply as a direct answer:

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 needed 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 is 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.