how to migrate from JQUERY to ReactJS

Question

I am trying to migrate the code of jquery to reactjs and i am failing to achieve it. Folder structure :

MasterPage.master (aspx)
  1. Client.aspx
  2. Session.aspx
     2.1 Session.js

I am trying to remove this js and add a jsx file which has the react content instead of jquery.

Doubts: 1. how can i access the DOM element in master page from jsx

  var navButton = document.getElementById("HyperlinkNavigation");

How can i use the beginrequest and endrequest in react?

var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_beginRequest(BeginRequestHandler); prm.add_endRequest(EndRequestHandler);

masterpage.master

<!DOCTYPE html>
<head>
</head>
<body id="BodyMasterPage" runat="server">
<form id="AppPortalFormPage" runat="server" enableviewstate="true" class="container">
<asp:Panel runat="server" ID="PanelLayout" CssClass="container__center">
    <div class="main" id="mainDiv" runat="server">

     <asp:ContentPlaceHolder ID="ContentPlaceHolderMiddlePanel" runat="server">
             <%-- The content middle part to be filled in the pages --%>
     </asp:ContentPlaceHolder>

     <div class="navigation" id="navigationDiv">
        <asp:Hyperlink ID="HyperlinkNavigation" runat="server"/>         
        <asp:LinkButton ID="LinkButtonAbout" CssClass="navigation__logo" runat="server" OnClientClick="javascript:showAboutLayer();return false;" OnLoad="LinkButtonAbout_Load"/>
     </div>

    </div>
</asp:Panel>
</form>
</body>
</html>

session.aspx

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeBehind="session.aspx.cs" Inherits="AppPortal.sessionPage" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="ContentPlaceHolderMiddlePanel" runat="Server">
      <script>
          let userActivity = true;
          let scroolBarPlaceHolder = '<%= ClientID %>';

      </script>   
      <script src="Scripts/jquery-3.2.1.min.js"></script>

      <script src="https://unpkg.com/react@15/dist/react.js"></script>
      <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
      <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
      <script  type="text/babel" src="includes/scripts/session.js"></script>

  <div class="sessionmanager">
    <div id="session_root"></div> 
  </div>
</asp:Content>

session.js

navButton.className = "navigation__button navigation__button--back";

      // attach activity tracker on masterpage
      $(this).on('mousedown touchstart mousewheel keydown', function () {
        userActivity = true;
      });

      navButton.onclick = function () {
        //history.back(); terminate postback writes to browser history 
         navButton.href="applications.aspx";
      };

      // Register request handlers to set scroll bar on the correct position when table is refreshed.
      var xPos, yPos;
      var prm = Sys.WebForms.PageRequestManager.getInstance();
      prm.add_beginRequest(BeginRequestHandler);
      prm.add_endRequest(EndRequestHandler);

      function BeginRequestHandler(sender, args) {
        // Get X and Y positions of scrollbar before the partial postback
        xPos = $get(scroolBarPlaceHolder).scrollLeft;
        yPos = $get(scroolBarPlaceHolder).scrollTop;
      }

      function EndRequestHandler(sender, args) {
        // Set X and Y positions back to the scrollbar after partial postback
        $get(scroolBarPlaceHolder).scrollLeft = xPos;
        $get(scroolBarPlaceHolder).scrollTop = yPos;
      }
    });

    setInterval(function () { makePing(socketID, userActivity); }, 5000);

In theory you can touch existing DOM from React, it's still JavaScript after all, but you should not need to. It is an antipattern. You should try to understand React paradigm, decide if it's the right tool in this context, and if it really is, try to move away from jQuery. — pawel
– pawel, Commented Jul 30, 2019 at 12:24
Or to frame it differently: React's tagline is A JavaScript library for building user interfaces. You're building your interface with ASP.NET. You should think of migrating from ASP to React, not from jQuery, as the latter is a natural consequence of the former. — pawel
– pawel, Commented Jul 30, 2019 at 12:32
hm i have not fully understood but i get your point. In your first reply you mentioned it could be possible to access the div given in aspx. but how? usually in react we use ref property in div to access it. but does <asp:HyperLink ref= ""> possible?` — hightides1973
– hightides1973, Commented Jul 30, 2019 at 12:43
You still can call document.querySelector in React code. But I would strongly recommend to not go this route and use React how it is meant to work instead of hacking around it. — pawel
– pawel, Commented Jul 30, 2019 at 14:34

pawel · Accepted Answer · 2019-07-30 15:11:29Z

I will expand on this a little, maybe it will help you understand a bit better.
A naive way to go from jQuery to React in this situation would be something like this:

class NotJquery extends React.Component {
    componentDidMount(){
       document.documentElement.addEventListener("mousedown", this.setActivity );
       const navButton = document.getElementById("HyperlinkNavigation");
       navButton.className = "navigation__button navigation__button--back";
       navButton.addEventListener( 'click', e => e.target.href = "applications.aspx" );
       window.setInterval(function () { window.makePing(window.socketID, window.userActivity); }, 5000);
    }
    setActivity(){
        window.userActivity = true
    }
    render(){
        return null;
    }
}

ReactDOM.render( <NotJquery />, document.querySelector( /*some element on the page */ ));

I didn't cover all your logic, but some of it so you get the idea.
To actually call it a React solution, it would go something like this:

First, change the master

 <div class="navigation" id="navigationDiv">
    <div id="HyperlinkNavigationDiv"></div>         
    <asp:LinkButton ID="LinkButtonAbout" CssClass="navigation__logo" runat="server" OnClientClick="javascript:showAboutLayer();return false;" OnLoad="LinkButtonAbout_Load"/>
 </div>

Then the React part

const HyperlinkNavigation = props => <a href="applications.aspx" className="navigation__button navigation__button--back" {...props}></a>;

class App extends React.Component {
   constructor(props){
      super(props);
      this.state = { userActivity : false }
   }
   componentDidMount(){
      document.documentElement.addEventListener("mousedown", this.setActivity );
      window.setInterval( this.ping, 5000 );
   }
   setActivity(e){
      this.setState({ userActivity: true })
   }
   ping(){
       /* call the socket with this.props.socketId and this.state.userActivity */
   }
   render(){
      return <HyperlinkNavigation />
   }
}

ReactDOM.render(<App socketId={ window.socketId } />, document.getElementById("HyperlinkNavigationDiv") );

This would render the link element and set up event listeners... again this is not a solution, just a hint towards the direction.

thanks for the explanation. i shall go through it in detail once again.

Collectives™ on Stack Overflow

how to migrate from JQUERY to ReactJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related