如何在react中转换<script>标记?

作为我的应用程序的一部分,我有一个如下所示的标签。我想知道我应该如何将其转换为react吗?

我能分开它是一个javascript文件并加载到这个文件吗?如果答案是肯定的,你能告诉我怎么做吗?

class App extends Component {
  render() {
    return (
      <div className="App">
  <section class="abcContainer">
        <div class="card border-primary mb-3" style="max-width: 20rem;">
            <div class="card-header">Toolbox</div>
            <div class="card-body">
                <div class="col col-6">
                    <ul class="ml4 js-sortable-copy sortable list flex flex-column list-reset" aria-dropeffect="move">
                        <li class="p1 mb1 yellow bg-maroon" style="position: relative; z-index: 10" draggable="true" role="option" aria-grabbed="false">Item 1</li>
                        <li class="p1 mb1 yellow bg-maroon" style="position: relative; z-index: 10" draggable="true" role="option" aria-grabbed="false">Item 2</li>

                    </ul>
                </div>
            </div>
        </div>
        <div class="jumbotron">
            <div class="col col-6">
                <h2 class="h4 mt1">Copy items here</h2>
                <ul class="p2 border maroon border-maroon js-sortable-copy-target sortable list flex flex-column list-reset" aria-dropeffect="move"></ul>
            </div>
        </div>

    </section>


    <script>
        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'
        });
    </script>
      </div>
    );
  }
}

export default App;