A React Journey - Giving up jQuery ?

Why did jQuery become inadequate, why React why not Angular? It is crucial to understand the differences between them because thus we can choose the one that best suits our project. So I have perused the critical differences with tiny code examples and I am sharing with you hoping it will be helpful for you too.

1 THE MOST FUNDAMENTAL DISTINCTION

We know that both jQuery and React are Javascript libraries at their core.

When comes to our mind when someone says software libraries

We know that during design stage, software architects are making the decision the architectural style upon which to build a software library. We see that their desire creating an architecture that totally serves its purpose is effective on these decisions. This is the same for jQuery and React architects too. So before we use a library, we should know the purpose that caused the emergence of that library and then we should embark on a journey with it if it aligns with our purpose.

The Purpose of jQuery Architects

If we want to develop HTML pages with SIMPLE interface by LEARNING IN A SHORT TIME and if this by itself is enough for us, jQuery will be enough for us.

// Let's give a simple example. A button click event in jQuery:
$("#buttonIdentifier").click(function() { alert("clicked!"); });

The Purpose of React Architects

If we want to benefit from a DEVELOPER-FRIENDLY and COMPONENT-BASED architecture by developing HTMP pages and if this by itself is enough for us, React will be enough for us.

// It is required to define a React component for example above:
const buttonComponentName = () => (
<button onClick={ () => alert("clicked!"); }>buttonTitle</button>
);

Well, Is React's developer-friendly and component-based architecture ALONE a good enough reason to embark on a journey with it?

If JSX impresses you as much as me it does me, we can say "yes". We can write a class or a function for different parts of our interface with JSX language specific to React library. What really matters is that HTML, CSS and Javascript codes of an interface part are all in a single source file in other words in that component's file - following JSX rules - . Thanks to JSX, we developers have the opportunity to write more readable and more maintainable code. With JSX, we can write a component in example below:

var HelloClass = React.createClass({
  // javascript
  onClicked: function () {
    console.log('You clicked me!')
  },
  render: function () {
    // css
    var divStyle = {
      color: 'white',
      backgroundColor: 'black',
    };

    // html / jsx
    return (
      <div style={divStyle} onClick={this.onClicked}>
        Hello {this.props.name}
      </div>
    );
  }
});
ReactDOM.render(<HelloClass name = "Reactjs" />, document.body);

Tips: Let's aware of these
React is basically saying "I have built a mechanism for the component creation and offered to you so I have concluded that you also want to use this mechanism if you prefer using my architecture" to the developers who prefer it. As developers when we prefer to develop applications with React library, we should not think to add a different mechanism for the component creation.
jQuery doesn't have a component-based architecture at its core. If we developers embark on a journey with jQuery, we should know that we may need to establish a component-based mechanism ourselves when necessary.
Note: If you would like to read more in-depth information on the component-based architecture, I recommend the following article: https://thilo-hermann.medium.com/software-architect-assistant-how-gen-ai-can-help-in-ddd-86820ba846b7

The power of both, comes from Javascript programming language

Why Javascript, not Java, Phyton, C#, Ruby and many others? Because among front-end developers, Javascript is a programming language that is far ahead, especially when it comes to web interfaces.

2 STATISTICS

Why it is good to give statistics because software architects/developers are expected to follow the latest technology and make the right choices. In this respect, it is important to know where the trend is going globally.

Let's start with GoogleTrends data.

In 2018, worldwide, people's interest in React has surpassed the jQuery for the first time. And React has been on rise since then.

However, jQuery has something interesting going on

It seems like that it proves how important the demand for a technology is. jQuery is able to stand steady even though it has been said for years that it will disappear.

Investment and User Support

In GitHub React Repository, the number of users, watching, forks, stars and the number of issues, pull requests are quite good compared to their competitors:

Honestly, it's impressed me that leading technology companies have invested millions of dollars in React to build a React-based application. Some of these companies create a full of React ecosystem, while others completely rely on products and services based on React. AWS, Meta, X (Twitter), GitHub, GitLab, nodejs, npmjs, vmware, Postman, OpenAI, Yandex, SKIFF MAIL, Kaspersky, RabbitMQ, Oracle, MongoDB, DigitalOcean, GoDaddy, Medium, Netflix, DAILYMOTION, TikTok, Hootsuite, Spotify, Dropbox, Pinterest, 123RF, CodeAcademy, freeCodeCamp, udemy, Atlassian, Linux Foundation, Zoom, Notion, Figma, GetPocket, WordUp, genially, timesys, SMASHING MAGAZINE, MediaMarkt, tureng, trendyol, hepsiburada, getir, yemeksepeti, ciceksepeti, tabii, ENUYGUN, TURKISH AIRLINES, LCW, Turkcell, Vakıfbank… never ends really.

Of course, Angular comes to mind as the main competitor of React.

The struggle between React and Angular is actually a struggle between Meta and Google. This is a fight we don't know who will win. We also see from the annual JS statistics that this struggle evidently continues.

3 MAIN USAGE AREAS

jQuery

It is ideal for those who want to step up from static websites, those who want to build dynamic websites with simple interactive elements that are not performance-sensitive.

Reason: Direct DOM manipulation

jQuery that directly modifies DOM elements, often updates the interface with multiple DOM queries in the background. For large-scale applications with frequent updates, this may cause performance issues. So we should foresee how scale our application is and how many updates our application will require then we should make the decision to embark on journey with jQuery based on that.
Let's give an example. If we want to change the color of error messages to red, we can do this with the following code in jQuery:

$("p.hasError").css("color", "blue");

React

It is ideal for building SPAs(single-page applications) or complex websites which have performance-sensitive.

Reason: Innovative DOM manipulation

Innovative because Meta (formerly Facebook) has developed an algorithm to update DOM more effectively and called it Virtual DOM. This revolutionary change - that improves the performance - brought a new software standard to the application development tools. So now we should ask ourselves whether our application is performance-sensitive and we should make the decision to embark on journey with React based on that.

// It is required to just update the state of the component for example above.
this.state({ textClor: 'blue'});

Unfortunately jQuery doesn't meet this need because it didn't come out to develop single-page or hybrid applications. In other words, if our new project is not a single-page application or not a hybrid/complex application or if it is a static application or if it is a dynamic application but has little interaction with user, it will be better to develop with jQuery. On the other hand, the React library is perfect for single-page applications. Not only that, but also for hybrid/complex applications. Dan Abramov who worked as one of React's developers in Meta company, proves this by saying that:
"It's interesting that React became associated so much with SPAs but Facebook isn't using it for SPAs (except for the Instagram website and some internal tools) - @dan_abramov"

Tips: Let's aware of these

"When we make AJAX calls with jQuery, we can update the only necessary UI parts without reloading whole page . Why would React be necessary?" and similar questions came to our mind? Let's explain immediately: AJAX is a distinct software technology. Whether we fetch data with AJAX or with another service technology, we need to modify DOM with receiving data eventually. This modification process will gain speed according to the efficiency of DOM traversal algorithm. Here is the key difference between jQuery and React. jQuery uses its selector to access the DOM element directly. Whereas React does not give us direct access to DOM elements, it rely on Virtual DOM in other words in memory representation of the real DOM. This, of course, comes back as performance/speed.
Note: I recommend the following article for more detailed explanations on this topic: https://medium.com/@kangseoncho/dom-traversal-in-react-4197852c65c5~~

4 DATA BINDING

Data binding is a term that lives up to its name. The process of binding data to a user interface. This process plays an important role in the jQuery vs. React comparison because you will decide whether to make ui changes manually or automatically.

Manual Data Binding in jQuery

Developers need to bind the data themselves every time the data changes.
For example, when we want to set the value of a variable into HTML span element, our jQuery code can be like this:

$("#spanSelector").text(variableName);

And we should call this code every time the data changes.

Reactive Data Binding

After the developer binds the data only once, React updates the interface every time the data changes thanks to its Virtual DOM. We developers only code the components with state variables, the rest is managed by Virtual DOM.

For the same example, you can do the data binding in React like this:

<span>{this.state.variableName}</span>

I think it will prevent our code from turning into spaghetti code and make our code more understandable and easier to read in large-scale applications when this algorithm of React handles all the updates. Also, the opinion that Virtual DOM and its algorithm provides faster and better user experience is expressed in many sources. I believe it is worth a try.

Tips: Let's aware of these

React binds data unidirectionally so we need to know what unidirectional data binding means technically. Unidirectional means that the data flows like a waterfall from the main HTML element to child HTML element and React can do this, for example, as shown below:

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [name, setName] = useState('Yasemin');

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <ChildComponent name={name} />
    </div>
  );
}

export default ParentComponent;

import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <p>Your name is: {props.name}</p>
    </div>
  );
}
export default ChildComponent;

This data flow is built effectively by React so people say React with these features shines like the sun for complex (large-scale) applications. For example, we need to bind the data in a component to an inner component that will be reached through multiple intermediate components (the problem called drilling), the data provider mechanism (one of design patterns) is used for this (useContext). I am sharing an example for better understanding below:

import { createContext, useContext } from "react";
import "./App.css";

const Context = createContext();
const ChildComponent4 = () => {
  const context = useContext(Context);
  return (
    <>
      {" "}
      <h1> Hi, I am child 4. </h1>
      <h2>{context.parentData}</h2>{" "}
    </>
  );
};

const ChildComponent3 = () => {
  return (
    <>
      {" "}
      <h1> Hi, I am child 3. </h1>
      <ChildComponent4 />{" "}
    </>
  );
};

const ChildComponent2 = () => {
  return (
    <>
      {" "}
      <h1> Hi, I am child 2. </h1>
      <ChildComponent3 />{" "}
    </>
  );
};

const ChildComponent1 = () => {
  return (
    <>
      {" "}
      <h1> Hi, I am child 1. </h1>
      <ChildComponent2 />{" "}
    </>
  );
};

const App = () => {
  return (
    <Context.Provider
      value={{
      parentData: "Hi, I am from parent component.",
      }}
    >
    <ChildComponent1 />
    </Context.Provider>
  );
};
export default App;

Or, React foresees the state management can lead to spaghetti code if a component has multiple states to be updated and state updates are fullfilled asynchronously. And so React offers a dispatch mechanism (useReducer) to make our code more readable and easier to maintain. Let's consider the shopping cart example; when user adds or removes a product, distinct state updates in a shopping cart component are fullfilled asynchronously. The following code shows us how we can do this with useReducer:

import React, { useReducer } from 'react';
const initialState = {
products: [],
totalAmount: 0,
};

function updateShoppingCart(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      const newProductList = […state.products, action.item];
      const newTotal = state.totalAmount + action.item.price;
      return {
        …state,
        products: newProductList,
        totalAmount: newTotal,
      };
    case 'REMOVE_ITEM':
      const restProducts = state.products.filter(item => item.id !== action.id);
      const productToRemove = state.products.find(item => item.id === action.id);
      const restAmount = state.totalAmount - productToRemove.price;
      return {
        …state,
        products: restProducts,
        totalAmount: restAmount,
      };
    default:
      return state;
  }
}

const ShoppingCartComponent = () => {
  const [state, dispatch] = useReducer(updateShoppingCart, initialState);
  const addProductToCart = (item) => {
    dispatch({ type: 'ADD_ITEM', item });
  };

  const removeProductFromCart = (id) => {
    dispatch({ type: 'REMOVE_ITEM', id });
  };

  return (
    <div>
      <h2>Shopping Cart</h2>
      <ul>
        {state.products.map((item) => (
        <li key={item.id}>
          {item.name} - ${item.price}
          <button onClick={() => removeProductFromCart(item.id)}>Remove</button>
        </li>
        ))}
      </ul>
      <p>Total Amount: ${state.totalAmount}</p>
      {/* Add logic to add items to the cart */}
      <button onClick={() => addProductToCart({ id: 1, name: '123rf Credits', price: 25 })}>
      Add 123rf credits
      </button>
    </div>
  );
}
export default ShoppingCartComponent;

CONCLUSION

As developers, we see that every software technology has its pros and cons. It's same for jQuery and React so it is the best to make a decision based on what we want and our priorities. I hope it will be easier for us to make this decision when we evaluate with the perspectives we mentioned above. Personally, I just wanna see if it really has such a high performance and I think to give React a chance. Do you think so too?