jQuery Plugins in React JS

jQuery Plugins in React JS: So, we have learned how to create components, how to create an app, styling in ReactJS, now we will learn how to install jQuery plugins and using them. So, let me tell you what is JQuery? JQuery is a JavaScript library, JQuery has dozens of functions to deal with DOM, hiding them, removing them, and there are thousands of plugins out there for JQuery. JQuery makes easier to make changes to DOM. 95% percent of plugins are free to install and use them on our website. JQuery plugins can be easily embedded in any web app.

By this tutorial, we will learn how to add and use JQuery plugins in the React app. To run a JQuery plugin in the react app, we will need jQuery in your application.

How to add JQuery in React JS?

• Go ahead and create a new fresh application.
• Remove all files from src folder keep index.js and
• App.js with the following content:

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

src/App.js

import React from 'react';
export default class App extends React.Component
render() {
return (
<h1> Welcome to my App</h1>
) ;
}
}

This will print Welcome to my App on the screen. Now let’s go ahead and download JQuery with the help of  below command

npm i jquery --save

We will use JQuery SlimScroll by Rochal. Now create a file called slimscroll.js that will convert body scrollbar into SlimScroll bar. As we have installed JQuery we can import it and using jquery.getScript() function we can import a Slim Scroll from a CDN (Content Delivery Network) and run a function after script. src/slimscroll.js

JQuery in React JS Example

import React from 'react';
import $ from 'jquery';
window.jQuery = $;
export default class Slimscroll extends React.com
ponent{
render() {
this.h();
return
<div>
</div>
);
}
h() {
$.getScript('https://cdnjs.cloudflare.com/
ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscrol
I.min.js', function(data, textStatus) {
$("body").slimScroll({
size: '8px',
width: 100%,
height: '100%',
color: '#ff4800,
allowPageScroll: true,
alwaysVisible: true
});
}) ;
}
}

JQuery in React JS Example Output

This will change browser scrollbar into something like this:

Now we have learned how to use jQuery plugins in React Apps. Go ahead and try another plugin. If you wondering how to add other plugins. The way is the same as we did in this demo. First, you have to install jQuery and then use $.getScript() to require a script from a location. On $.getScript() callback, initialize your plugin as we did in example.

JQuery in React JS Exercise

Now we have completed our chapter and here some questions:

• What is jQuery and why it is used?
• What is $.ajax() and how to use it with ReactJS?

What is jQuery and why it is used?

JQuery is a JavaScript library. It is very fast, very small and feature-rich. It makes easy to play with DOM and its manipulation. Event handling, animation, and Ajax become easier with jQuery. JQuery is used to make web applications very fast and that is easy to change.

What is $.ajax() and how to use it with ReactJS?

$.ajax() is a Jquery function that allows us to create make Ajax calls. It is very easy to use it with an Ajax. If you want to have the Ajax feature in our ReactJS application. Then I recommend to use $.ajax() with your ReactJS application. As we bind component functions to component elements like button, input or form like click, hover or submit. We can send ajax request on that function.