Use React but learn jQuery

It’s 2018 and You Should Learn jQuery

Now, you’re probably thinking,

Yeah, it’s 2018! Why should I learn jQuery when everyone is talking about React, Vue, and even Angular?

They say these are more appealing than jQuery, and they’re right.

The hype around these libraries/frameworks is huge and certainly well-deserved - even this whole website was created with React.

However, the reality is that jQuery is still super popular, and guess what? It’s not going away any time soon, especially if you are going to work with major corporate companies.

I get it, React is attractive. The demand for React engineers is growing. Google Trends are telling us that React has surpassed jQuery during last few months. And, don’t get me wrong, learning and using React is a great idea, but you better know what a well-written $( ) can do.

The fact is that most of the bigger companies, and even startups, have used or are still using jQuery at some point in their code. The reason is that it’s not that easy to convert everything to React or maybe they need to support an older browser (yes Internet Explorer) and don’t want to set a WebPack bundler with a Babel compiler and convert that fancy ES6 (that most of your teammates probably aren’t using).

So, let’s take a deep breath and grasp the core of what we really would need to know in jQuery.

Selectors are cool and easy if you’re familiar with CSS selectors.

// Select div tag
$(“div”)

// Select element by class
$(“.class”)

//Select an element by id
$(“#id”)

Now, when you select an element like this, jQuery is going to return a special jQuery Object, which is the selected element in a collection that looks like an array (weird, but useful).

Event Listeners are very useful and quick to use.

// This is a very popular method used to trigger
// custom events. In this case we will alert hey!
// when the selected button is clicked
$(“button”).click(function() {
  alert(“hey!”)
});

// There are plenty of other Event Listeners 
// that are just as easy to use
$(“button”).hover()

$(document).scroll()

$(“input”).keypress()

// And the famous 
$(document).ready()

Animations – yes, jQuery also has smooth animations and transitions.

// Here we’re adding an animation to a div,
// which will animate it to 0.25 of opacity over 500
// milliseconds, after the click event occurs
$(“button”).click(function() {
  $(“div”).animate({
    opacity: 0.25
  }, 500);
});

And, there are a lot more possibilities for making beautiful animations, many of them are there just out of the box.

These are just a few things that jQuery can do, and all of them are proven by a decennial usage all over the internet. And, there is so much more, such as CSS manipulation, advanced DOM manipulation, AJAX request, $(this), and so on.

I hope, that after reading this blog post, you’ll consider using jQuery. It’s not just a great tool, but it’s also an advantage for your career.