title: How to use JQuery with ReactJS
body: <p>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.</p>
  
  <p><strong>My Case is:</strong></p>
  
  <p>I'm trying to build an accordion with ReactJS.</p>
  
  <pre><code>&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;
  </code></pre>
  
  <p><em>using JQuery</em>:<br></p>
  
  <pre><code>$('.accor &gt; .head').on('click', function(){
     $('.accor &gt; .body').slideUp();
     $(this).next().slideDown();
  });
  </code></pre>
  
  <p><strong>My Question:</strong></p>
  
  <p>How can I do this with ReactJS?</p>