Author avatar

Vivek Kumar

Walkthrough of Mobile Rendering for jQuery and React – Part 1

Vivek Kumar

  • Jun 18, 2019
  • 9 Min read
  • 49 Views
  • Jun 18, 2019
  • 9 Min read
  • 49 Views
Web Development
React

Introduction

The process of mobile rendering for jQuery and React is one of the fields where a good amount of research has been done for quite some time. It is basically due to this research and continuous trial and error that we have attained certain frameworks which enable us to acquire precise results for mobile rendering.

This guide is an effort to make you familiar with certain aspects of moblie rendering. One of the keys is to integrate React components with the already present jQuery mobile application. We will divide this guide into two parts and bifurcate methods of mobile rendering to ensure that you get familiar with different approaches.

The Baseline

It is important to note that the React is a form of JavaScript UI framework which permits the user to create component-based type user interface controls which deal with mobile applications. It is important to note that one of the significant advantages of applying this framework is that every component will maintain its own kind of state. These components will remain independent of one another, making it easier to create individual UI pieces. It will make the component independent from the rest of the mobile application and it is feasible for it to be reused in other, different areas related to the app.

There are several mobile applications present that were created previously with the help of jQuery. You may be required to create a new React component or mobile application which can easily integrate as well as communicate with the jQuery mobile application. For instance, if the user would like to go through details from a jQuery-based mobile application rendering on the page. If the user wishes to display data within the React component, the React component will require them to find a way to request data from the jQuery application, thereafter storing it in an identical state.

There are three models for communicating React to jQuery and vice versa. One way is the direct reference of jQuery object; secondly, with the help of an intermediate manager; and lastly, via a simple subscriber/publisher.

From the JQuery to the React Component

In the case of using a basic HTML document, the code looks as follows:

1
2
3
4
5
6
7
<div class = 'container' >
  <h1 > JQuery to React using $(this) </ h1>
  <div id = 'box' style = 'border: 1px solid #333; background-color: red; width: 100px; height: 100px;' ></ div>
  <hr />
      
  <div id = 'root' class = 'mt-3' ></ div>
</ div>
html

Presently, a jQuery mobile app is comprised of merely a header message, as well as a square in colored form. As per the approach of this guide, we are also going to incorporate a div, in order to serve the base of the React component formed by us to render within. As mentioned above, there are three methods to interact with jQuery from React and it is the time to discuss these methods in an elaborative manner. Here, in this guide, we will emphasize the first two models.

Method 1: The Direct Reference of jQuery Object

It involves the passing of the React component as a copy of JQuery $(this) for the constructor, while initially forming the React component. By using this approach, it would be possible for React to manipulate the present mobile application UI elements. One can observe the design that we acquire in the image down below:

The integration of the React component with jQuery via reference The integration of the React component with jQuery via reference

In the diagram above, the jQuery app will start creating a React component with the help of calling the React.createElement. After the completion of this step, it will be passed in the context of the jQuery application to components constructor. Now, the component can store the reference in the current state and will be able to change the mobile page elements existing outside of its own component area.

1
2
ReactDOM.render(React.createElement(MyComponent, { context: $('body') }), document.getElementById('root'));
});

In the above-mentioned sample code, it displays the component formed in the initial stage. The constructor of the component passed a reference to the JQuery conducive body object accessible in the props of constructor of components.

The React Component

The code for the React component to store the jQuery context are as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      context: props.context
    };
    this.onClick = this.onClick.bind(this);
  }
  
  onClick() {
    // Get reference to a JQuery object in parent app.
    var box = this.state.context.find('#box');
    
    // Change the color of the box.
    box.css('background-color', (box.css('background-color') === 'rgb(255, 0, 0)' ? 'green' : 'red'));
  }
  render() {
    return (
      <div className = 'alert alert-success' role = 'alert' >
        <h3 > Hello, from React! </ h3>
        <button type = 'button' className = 'btn btn-default' onClick = { this.onClick }> Click Me </ button>
      </ div>
    );
  }
}
javascript

Here, the component, which is defined above, provides a simple button and message. While clicking the button, the component will get access to the jQuery context in order to change the background color or the UI element located outside its normal landscape.

A standard image of the application is represented below:

Imgur

Method 2: Application of Intermediate JS Class

This method involves the passage of a React component as a reference to a JS class object, serving as an intermediary in the communication between the existing mobile app and new React component. Now, it would be feasible for the component to request data as well as the values existing in intermediate class or, rather, update specific areas related to the page in the form of new data.

The flow chart displayed below showcases the type of layout which the React component can actually get in touch with, in the existing jQuery mobile app via intermediate class.

Imgur

Here, it is important to observe how JQuery controls its segment of mobile page elements. Similarly, the React component controls its own segment of mobile page elements. One of the major advantages of this approach is that it separates the concerns between the React components’ accountability for the UI elements on the mobile page from the JQuery applications’ responsibility for its own UI elements.

The code result for the intermediary class is as follows:

1
ReactDOM.render(React.createElement(MyComponent, { context: UIManager }), document.getElementById('root'));

The UIManager Class in this type of method can be represented as shown:

1
2
3
4
5
6
7
8
var UIManager = {
  getColor: function(parent, callback) {
    callback($('#box').css('background-color'), parent);
  },
  setColor: function(name) {
    $('#box').css('background-color', name);
  }
};
javascript

The React Component

Just as we did in the first method, the state of the component is holding the context of the outer application. The only difference this time is that now the UIManager class is holding the reference, as shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      context: props.context
    };
    this.onClick = this.onClick.bind(this);
  }
  
  onClick() {
    this.state.context.getColor(this, function(color, that) {
      that.state.context.setColor(color === 'rgb(255, 0, 0)' ? 'green' : 'red');
    });
  }
  render() {
    return (
      <div className='alert alert-success' role='alert'>
        <h3 >Hello, from React!</ h3>
        <button type = 'button' className = 'btn btn-default' onClick = { this.onClick }>Click Me</ button>
      </ div>
    );
  }
}
javascript

Conclusion

In this guide, you've learned about two methods: the direct reference of the jQuery object and the application of the intermediate JS class for mobile rendering using jQuery and React. In the subsequent guide,Walkthrough of Mobile Rendering for jQuery and React – Part 2, you will learn about another method to perform the desired task.

References

While writing this guide, the following resource has been referred to:

0