How to use jQuery in your React App

Manish Mandal
How To React
Published in
2 min readApr 25, 2020

We are all familiar with jQuery and at some point of time, we all want to know how we can use jQuery in our react app. When I was a beginner in react I wanted to know how I can use jQuery in my react app. I checked many tutorials available on the internet how we can use jQuery in react app some were easy to understand and some of them were only misguiding. Today I will show how you can easily use jQuery to manipulate DOM in your react app.

Requirements

  1. Go to the root directory of your react project and open terminal to install jQuery using the below-mentioned command.
npm install jquery --save

2. Now open project in your favorite IDE and import jquery to the file where you want to manipulate DOM.

import $ from 'jquery'

3. Now create a function and put your jquery code inside that function. For this tutorial purpose, I have created a lorem ipsum text and button and I will use jQuery CSS API to change the color of lorem ipsum text by clicking on that button.

4. Now call that function inside the componentDidMount lifecycle method.

5. That’s it Now run react app in your browser to test.

Here are the live example and git repository

--

--

Manish Mandal
How To React

Full Stack Developer | React JS | Next JS | Node JS | Vue JS | Wordpress. Connect with me https://www.linkedin.com/in/manishmandal21/