When should I use Jquery vs React?

<%= @topic_view.topic.title %>
<%= @topic_view.topic.average_rating %> <%= @topic_view.topic.posts.count { |p| !!p.custom_fields['rating'] } %>

I know this sound this sounds like a question that should be obvious, but I don’t really understand. What sort of projects should you build with Jquery? What should you build with React? Should you ever use both on one project? Is one more important to learn then the other, or is it just opinion?
I’m doing the front-end libraries certificate in the beta, in case anyone is wondering. I’ve heard people saying that React is better than jQuery. I just want to know which ones I should learn moving forward. Also, after I finish the front-end libraries certificate, I want to make a skateboarding game where you have a character that jumps over blocks. Which Library should I use for that?
Thanks! Any advice is greatly appreciated :slight_smile:

2 Likes

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

jQuery makes DOM interaction and manipulation very easy with various methods and api’s. React helps manage the state of your pages. This can involve inserting dynamic data such as a user’s profile name and picture, and updating the page efficiently when information is changed.

They are not the same thing and you can use them together.

1 Like

I would say if you have to update your DOM very often, go for React. If you just need to make some minor changes, jQuery is fine.

My opinion is based on the fact that React uses a virtual DOM that only re-renders the real DOM when it’s necessary whereas jQuery renders every time you want to make a change.

Also, in my opinion, React is much more elegant than jQuery and it’s gaining a lot of popularity in web development. jQuery, on the other hand, is used A LOT and many libraries use it. And you have an answer in the forums for everything you might think of.

1 Like

I think some people forgot one of the key things about React vs jQuery.

React is a lib focusing on making UI for single page apps(Everything is served from the index.html). You can use it for non-single page apps, but depending on the situation it can easily be overkill, or redundant.

As others said jQuery is more like a “helper” lib in that it provides functions to your code to perform certain common tasks. A key selling point of jQuery when it was very popular is it provided an interface to deal with inconsistencies between browsers. This issue isn’t as nearly important today, as all modern browsers work more or less the same for most of the main specs.

You can learn both up to a point and use the one that’s right for the job. Neither is better than the other since they should be used for different jobs. Knowing the basics of both allows you to make the right choices when it comes to real-life problems. If you only have a hammer, everything starts looking like nails. :wink:

For your game I would use neither and use Phaser.js. Phaser uses cavnas/webGL technologies to handle the graphics. Neither JQuery or React offers anything beyond DOM/CSS handling, neither of which are that good to make a game with.

1 Like

You use React if you have some data that gets updated pretty regularly, and you want to represent that data as UI. So, for the obvious example, Facebook timeline. The timeline (which is just data) constantly updates with new items. With React, you take that data, and specify how you want it to be represented (you have the timeline itself, then you have individual items, and some of those items are text, some images, some videos, and you can like or commment on those items, etc). You don’t specify all the nuts and bolts, you just say “use that data source as input, and render some HTML that looks like this as output”. When the data changes, the UI just updates automatically. Data in, HTML out. You don’t have to manage how you do that manually, you just declare what you want to happen.

jQuery is used for manipulating the DOM directly, it’s a utility library. It used to be a nightmare doing this, as there were huge differences in how different browsers did things - jQuery kinda smoothed over those differences and had a really nice API. It’s not as necessary nowadays, but it’s still nice, easy to use. You have to actually go and select things on an HTML page, then manually specify what to do with them.

Things like React, Angular etc. emerged after jQuery, to enable building web applications (Single Page Applications) that behave like desktop applications - you can do everything in jQuery, it just becomes increasingly complex, it’s much easier if you have a library or framework that does all the heavy lifting for you. jQuery is good for adding a sprinkling of JS to simple web pages.

Neither React now jQuery are particularly good for this. Both of them deal with updating the DOM, they’re UI libraries. Updating the DOM is slow. Simple games where this isn’t an issue are ok (the Simon game project on FCC for example). But anything involving physics will be janky as hell if you move DOM elements around, to the point of being unplayable. You’d want to use a game engine - pixi.js or phaser are two of the most popular.

3 Likes

My answer is this. If you are building a single page application, React is the obvious choice. React is built for this and you take care of creating and rendering content on the page without even thinking about the DOM, the awkward details of how the content on the page is displayed.

React follows a declarative approach and you can work to a much greater degree by using it.

jQuery (or native browser APIs) should not really be used when building a SPA, as things can get complicated very quickly.

Although it is compatible with the React app, it is well suited for adding interactive components to a server-rendered page.

With jQuery you interact directly with the DOM to select elements, using selectors to find the content on the page you want to work with.

This is both a low level and as your application size increases, there is a greater chance of problems.

Don’t use jQuery with React. Learn React. jQuery will be dead soon. If you want good job, readable code, learn and use only React. You dont need jQuery, trust me. It is a nice library, but it’s time is gone.