How to use JQuery with ReactJS

Question

I m new to ReactJS  Previously I ve used jQuery to set any animation or feature that I needed  But now I m trying to use ReactJS and minimize the use of jQuery   My Case is   I m trying to build an accordion with ReactJS    lt div class  accor  gt      lt div class  head  gt Head 1 lt  div gt      lt div class  body hide  gt Body 1 lt  div gt   lt  div gt   lt div class  accor  gt      lt div class  head  gt Head 1 lt  div gt      lt div class  body hide  gt Body 1 lt  div gt   lt  div gt   lt div class  accor  gt      lt div class  head  gt Head 1 lt  div gt      lt div class  body hide  gt Body 1 lt  div gt   lt  div gt    using JQuery       accor  gt   head   on  click   function           accor  gt   body   slideUp         this  next   slideDown          My Question   How can I do this with ReactJS

User · Answer

Earlier I was facing problem in using jquery with React js so I did following steps to make it working-   npm install jquery --save Then  import   from  jquery    See here

User · Answer

Yes  we can use jQuery in ReactJs  Here I will tell how we can use it using npm  step 1  Go to your project folder where the package json file is present via using terminal using cd command  step 2  Write the following command to install jquery using npm   npm install jquery --save step 3  Now  import   from jquery into your jsx file where you need to use  Example  write the below in index jsx import React from  react   import ReactDOM from  react-dom   import   from  jquery          react code here      quot button quot   click function          get  quot demo test asp quot   function data  status           alert  quot Data   quot    data    quot  nStatus   quot    status                   react code here  write the below in index html  lt  DOCTYPE html gt   lt html gt   lt head gt       lt script src  quot index jsx quot  gt  lt  script gt       lt  -- other scripting files -- gt   lt  head gt   lt body gt       lt  -- other useful tags -- gt       lt div id  quot div1 quot  gt           lt h2 gt Let jQuery AJAX Change This Text lt  h2 gt       lt  div gt       lt button gt Get External Content lt  button gt   lt  body gt   lt  html gt

User · Answer

Step 1   npm install jquery   Step 2   touch loader js    Somewhere in your project folder  Step 3     loader js window     window jQuery   require  jquery     Step 4   Import the loader into your root file before you import the files which require jQuery    App js import   lt pathToYourLoader gt  loader js    Step 5   Now use jQuery anywhere in your code     SomeReact js class SomeClass extends React Compontent         handleClick        gt           accor  gt   head   on  click   function              accor  gt   body   slideUp            this  next   slideDown                   export default SomeClass

User · Answer

You should try and avoid jQuery in ReactJS  But if you really want to use it  you d put it in componentDidMount   lifecycle function of the component   e g   class App extends React Component     componentDidMount            Jquery here                             Ideally  you d want to create a reusable Accordion component  For this you could use Jquery  or just use plain javascript   CSS   class Accordion extends React Component     constructor         super        this  handleClick   this  handleClick bind this          componentDidMount         this  handleClick            handleClick         const acc   this  acc children      for  let i   0  i  lt  acc length  i            let a   acc i         a onclick        gt  a classList toggle  active                 render         return          lt div          ref  a   gt  this  acc   a           onClick  this  handleClick  gt           this props children         lt  div gt                Then you can use it in any component like so   class App extends React Component     render         return          lt div gt           lt Accordion gt             lt div className  accor  gt               lt div className  head  gt Head 1 lt  div gt               lt div className  body  gt  lt  div gt             lt  div gt           lt  Accordion gt         lt  div gt                 Codepen link here  https   codepen io jzmmm pen JKLwEA editors 0110  I changed this link to https

User · Answer

To install it  just run the command   npm install jquery   or  yarn add jquery   then you can import it in your file like  import   from  jquery

[javascript] How to use JQuery with ReactJS

Examples related to javascript

Examples related to jquery

Examples related to reactjs