Как преобразовать тег <script> в реакцию?

Как часть моего приложения, у меня есть тег, как показано ниже. Я хочу знать, как мне преобразовать его в реакцию?

Могу я разделить это файл 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;