What are main differences between ReactJS and jQuery? Are the things can be done by jQuery can be also done by ReactJS, or vice-versa? Which one should I learn? If I should learn both, which one is the most important?
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.
$()append(), insert(), addClass()$.on()$.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:
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.
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.
CoderInMe
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.