title: how to convert <script> tag in react?
body: <p>As part of my application, I have a  tag as shown below. Do I want to know how I should convert it in react?</p>
  
  <p>can I seperate it is a javascript file and load that in this file? if answer is yes, can you show me how?</p>
  
  <pre><code>class App extends Component {
    render() {
      return (
        &lt;div className="App"&gt;
    &lt;section class="abcContainer"&gt;
          &lt;div class="card border-primary mb-3" style="max-width: 20rem;"&gt;
              &lt;div class="card-header"&gt;Toolbox&lt;/div&gt;
              &lt;div class="card-body"&gt;
                  &lt;div class="col col-6"&gt;
                      &lt;ul class="ml4 js-sortable-copy sortable list flex flex-column list-reset" aria-dropeffect="move"&gt;
                          &lt;li class="p1 mb1 yellow bg-maroon" style="position: relative; z-index: 10" draggable="true" role="option" aria-grabbed="false"&gt;Item 1&lt;/li&gt;
                          &lt;li class="p1 mb1 yellow bg-maroon" style="position: relative; z-index: 10" draggable="true" role="option" aria-grabbed="false"&gt;Item 2&lt;/li&gt;
  
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="jumbotron"&gt;
              &lt;div class="col col-6"&gt;
                  &lt;h2 class="h4 mt1"&gt;Copy items here&lt;/h2&gt;
                  &lt;ul class="p2 border maroon border-maroon js-sortable-copy-target sortable list flex flex-column list-reset" aria-dropeffect="move"&gt;&lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/section&gt;
  
  
      &lt;script&gt;
          sortable('.js-sortable-copy', {
              forcePlaceholderSize: true,
              copy: true,
              acceptFrom: false,
              placeholderClass: 'mb1 bg-navy border border-yellow',
          });
          sortable('.js-sortable-copy-target', {
              forcePlaceholderSize: true,
              acceptFrom: '.js-sortable-copy,.js-sortable-copy-target',
              placeholderClass: 'mb1 border border-maroon',
          });
          sortable('.js-grid', {
              forcePlaceholderSize: true,
              placeholderClass: 'col col-4 border border-maroon'
          });
      &lt;/script&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>