React vs jQuery: how does each technology differentiate and who would “win” today?
Many people (including myself in the past) mistake one or both of them as frameworks but that is not accurate. Frameworks are full flavor development “environments” that provide as much functionality possible to help with the complete product’s lifecycle. Libraries, on the other hand, come with less functionality because they try to address more specific issues. In exchange they provide more freedom, allowing developers to choose how to approach the rest of the product development.
So let’s dive into the React vs jQuery topic. Let’s see together what makes each technology unique and what problems each one tries to solve.
At that time jQuery was rising. jQuery was created in 2006, but I think it wasn’t until 2008 that started to gain attention. By 2010 it was being used worldwide and considered a state of the art library. And if you went job seeking, interviewers asked for jQuery experience.
What is jQuery and how does it work?
jQuery created by John Resig, from the need to re-use functionality easily, without having to re-write it. It creates methods around common front-end tasks that require many lines of code and adds interactivity (animations, etc) in a fast and lean way. That being said, developers can invoke these methods with just a line of code.
Catching up with the present
At first, most of the existing frameworks have created their own jQuery like functionality and also major browsers have made their APIs more consistent. On the other hand, today we also treat web development from a different perspective. In the example, we consider that manipulating the DOM directly is not the optimal development route. Because DOM elements carry around a lot of unnecessary data which make the performance go down when the web page is full of elements.
React vs jQuery: what are the differences?
React is a library for building User Interfaces (UI elements). If you are familiar with the Model View Controller architectural pattern, React stands only for the V (View).
React is different in the sense that it is a UI 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 methods. If you follow the advised conventions, you get optimizations for free. In the example, internally it minimizes the actual DOM changes that happen to keep the application performant.
A big difference between these two is that React works through the “virtual DOM”, whereas jQuery interacts with the DOM directly. The virtual DOM is a DOM implementation in memory that compares to the existing DOM elements and makes the necessary changes/updates. And that leads to much faster performance.
In React, A single component contains both the functional part of the View and the UI itself. That’s right! With React you code your UI elements in JSX, a syntax extension of HTML. Although it might sound counter-intuitive, it turns out it is much more efficient and you have better control and maintenance over your code.
React or jQuery: which should I learn?
Although, the roles played by jQuery and React somewhat overlap when it comes to user interface management, they are very different in the core. And by learning one doesn’t mean you can do all the things that the other does.