DEV Community

loading...
Cover image for 6 Things I Learned From Migrating From jQuery to React

6 Things I Learned From Migrating From jQuery to React

Supun Kavinda
Seeking success
・2 min read

I'm creating a commenting platform called Hyvor Talk. I previously used Jquery and now React for the moderation console. Here's what I learned by migrating from jQuery to React.

BTW, If you like to know, Hyvor is the network I'm building, and Hyvor Talk is one product of it. I developed the whole website alone (Yep, front-end, back-end, DevOps, designing, and everything except graphic designing).

Lessons Learned:

  1. MOST IMPORTANT ONE: It's time-consuming. If you are hiring people just to migrate from jQuery to React, be cautious! It requires a lot of time and effort than you think.

  2. Once you migrate to React, the next part of the development process is easier than in jQuery.

  3. Routing is super easy and efficient in React. react-router is super cool. Its latest version perfectly goes with "thinking in react".

  4. The codebase will look more arranged. The main reason for this is JSX.

const div = $("<div>").addClass("container").appendTo(somewhere);
Enter fullscreen mode Exit fullscreen mode
<div class="container"></div>
Enter fullscreen mode Exit fullscreen mode

Which one is more clear? Obviously the second one, especially when you have nested elements. You can also easily break things into Components in React.

=> 5. Updating or adding features is easier in React.

=> 6. The most disgusting thing for me when using jQuery (or vanilla JS) is having to update elements each time when the data changes.

function changeName(val) {
   var data.name = val;
   dataElem.html(val); // <- I hate this (updating DOM inside data handling functions?)
}
Enter fullscreen mode Exit fullscreen mode

In React,

changeName(val) {
   this.setState({name: val});
}
Enter fullscreen mode Exit fullscreen mode

All you have to do is to use the states correctly.

Final Thoughts...

Honestly, I feel much better and organized when using React compared to jQuery. And, I have continued using React for the other parts of the website. However, as I mentioned earlier, migrate from jQuery to React if you really need to do it. If you have a large app, it would take months for the task (And, another months for bug fixing 🤗).

This is my personal experience. You should search the internet before making the decision. Here's a good comparison I have seen. Make sure to discuss with the development team about the impacts of the decision before migrating.

One thing I can guarantee is that you will have a better sleep after migrating to React 👀.

Thanks for reading.

PS: Like to try our comments platform on your website? It's free. Give it a try (before your competitor does 😊)

Discussion (0)

Forem Open with the Forem app