My web app is mostly executed on the server rather than on the client/browser. Where interactivity is needed, I use jQuery to do it. This is really my preference rather than a recommendation. I come mostly from backend experience and hence use minimal JS code. In this case, using ReactJS is a bloat.

Some folks comment that for performance plain old JS (sometimes called vanilla JS) should be used rather than jQuery. But jQuery simplifies developer's effort because of its maturity and cross-browser compatibility. My app doesn't need to be blazingly fast. jQuery helps me to write more reliable code in shorter time.

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.

ReactJS (or its ilk like Angular, Vue, Ember) is far more valuable than jQuery today. When I get résumés for developers where jQuery is their only framework, I will almost certainly pass. jQuery is on its way out.

My team recently removed every reference to jQuery in our project. It was so cathartic. Everything that you use $() for, you can use document.querySelector(). And all the DOM manipulation that you would do with jQuery is done much more cleanly with JSX. Instead of $.ajax(), use fetch() (it's a native method or polyfill).

I'll back up the other answers and say if you don't know vanilla JavaScript yet, learn that first. You need to know the core tech not just the abstractions.

A simplistic, incomplete but not-excessively-inaccurate comparison:

• jQuery is a DOM scripting library that helps the author manipulate the browser's DOM directly, providing neat syntax and cross-browser normalisation for common methods. Typically used to add behaviour to a server-side-rendered site or app.
• React is a client-side library that abstracts DOM manipulation. The author changes application state, state is reflected in React's "virtual DOM", and React updates the browser's DOM to reflect the virtual DOM.

Both do more than just that, I've skipped a lot of details, but it's as quick as I can come up with to describe the general difference.

In a very broad sense, yes you can do anything you need to do with both jQuery and React; because they are two ways write an application that renders its UI in the DOM. But in a practical sense they are not interchangeable.

Also most React applications add in quite a lot more than just the pure view/dom management stuff, so "learning React" tends to mean learning a full suite of tools like state managers, type systems, etc. So when you add all that in, it has no real resemblance to jQuery.

Which should you learn now? Depends on the job you have and/or want.

• If you are doing a lot new, small, content-focused websites (not apps) I think you should focus on good old fashioned DOM scripting with vanilla JavaScript/ES6. React is overkill for a small website.
• If you are maintaining existing/legacy websites or apps, you are probably going to encounter jQuery. You should at least know its fundamentals... but if you know vanilla JavaScript and CSS selectors you'll probably be able to learn whatever you need as you go. So you don't particularly need to learn it up front.
• If you are working on new web applications, or websites with a lot of data handling on the client side, then you should learn React.

So in reality: a good plan is probably to learn JavaScript/ES6, because that's the core language and the knowledge has real longevity. Then learn React, and pick up whatever jQuery you need when you encounter it.

Neither. You should learn JavaScript itself and software engineering.

Please, ALWAYS, start from the fundament and not the roof.

Moreover, jQuery is not needed today anymore and React is just a hype with virtual problems. Anyway, tools you will use at work will depend on the project and a company.

jQuery is an abstraction over DOM, XHR and some other browser APIs. It was particularly valuable when these APIs were largely inconsistent across major browsers. That scenario has significantly changed with evergreen browsers becoming ubiquitous.

Contrary to popular perception, jQuery is still relevant because many of jQuery's higher level APIs are more succinct and elegant than native APIs which are, in many cases, quite verbose by design.

React is different in the sense that it is a component management library as opposed to a utility library wrapping browser APIs. Using React implies that you adhere to a recommended methodology (component oriented structure) for defining your user interface, and structure your interactions around well defined lifecycle hooks and if the recommended conventions are followed correctly React gives you some very interesting optimizations for free, the crux of which is that it allows you to think that your entire component hierarchy is rendered top to bottom on every change, but internally minimizes the actual DOM changes that happen to keep the application performant.

So even the roles played by jQuery and React somewhat overlap when it comes to user interface management, they are built around different objectives. React, in particular, is entirely agnostic to communication management etc. So it is not correct to assume that anything that can be done by jQuery can be done by React and vice versa.

I recommend getting familiar with javascript fundamentals, and browser APIs first (MDN is a great resource) and then start with higher level opinionated libraries like React. jQuery is a lot less relevant in present world, and you can gradually pick it up "on the side" during your projects, especially when scenarios like legacy browser support or integration with some pre-existing jquery based code inadvertently pops up.