Problems with Bootstrap HTML template in React

Question

I've received this template https://themeforest.net/item/light-admin-clean-bootstrap-dashboard-html-template/19760124 to implement an admin dashboard.

I started it in Angular 8, but I must move it to React.

The problem is that I'm not being able to get it working correctly in React.

In Angular, I setup like this inside angular.json:

        "styles": [
          "node_modules/select2/dist/css/select2.css",
          "node_modules/bootstrap-daterangepicker/daterangepicker.css",
          "node_modules/dropzone/dist/dropzone.css",
          "node_modules/datatables.net-bs/css/dataTables.bootstrap.css",
          "node_modules/fullcalendar/dist/fullcalendar.min.css",
          "node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css",
          "node_modules/slick-carousel/slick/slick.css",
          "src/css/main.css",
          "src/css/styles.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/moment/moment.js",
          "node_modules/chart.js/dist/Chart.min.js",
          "node_modules/select2/dist/js/select2.full.min.js",
          "node_modules/jquery-bar-rating/dist/jquery.barrating.min.js",
          "node_modules/ckeditor/ckeditor.js",
          "node_modules/bootstrap-validator/dist/validator.min.js",
          "node_modules/bootstrap-daterangepicker/daterangepicker.js",
          "node_modules/ion-rangeslider/js/ion.rangeSlider.min.js",
          "node_modules/dropzone/dist/dropzone.js",
          "node_modules/editable-table/dist/editable-table.js",
          "node_modules/datatables.net/js/jquery.dataTables.js",
          "node_modules/datatables.net-bs/js/dataTables.bootstrap.js",
          "node_modules/fullcalendar/dist/fullcalendar.min.js",
          "node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.min.js",
          "node_modules/tether/dist/js/tether.min.js",
          "node_modules/slick-carousel/slick/slick.min.js",
          "node_modules/bootstrap/js/dist/util.js",
          "node_modules/bootstrap/js/dist/alert.js",
          "node_modules/bootstrap/js/dist/button.js",
          "node_modules/bootstrap/js/dist/carousel.js",
          "node_modules/bootstrap/js/dist/collapse.js",
          "node_modules/bootstrap/js/dist/dropdown.js",
          "node_modules/bootstrap/js/dist/modal.js",
          "node_modules/bootstrap/js/dist/tab.js",
          "node_modules/bootstrap/js/dist/tooltip.js",
          "node_modules/bootstrap/js/dist/popover.js",
          "src/js/demo_customizer.js",
          "src/js/main.js"
        ]
      },

It worked like a charm. But in React I'm getting a lot of warnings and errors.

I tried this inside App.tsx:

import 'select2/dist/css/select2.css'
import 'bootstrap-daterangepicker/daterangepicker.css'
import 'dropzone/dist/dropzone.css'
import 'datatables.net-bs/css/dataTables.bootstrap.css'
import 'fullcalendar/dist/fullcalendar.min.css'
import 'perfect-scrollbar/dist/css/perfect-scrollbar.min.css'
import 'slick-carousel/slick/slick.css'
import './assets/css/main.css'
import './assets/css/styles.css'

import 'jquery'
import 'popper.js'
import 'moment'
import 'chart.js'
import 'select2'
import 'jquery-bar-rating'
import 'ckeditor'
import 'bootstrap-validator'
import 'bootstrap-daterangepicker'
import 'ion-rangeslider'
import 'dropzone'
import 'editable-table'
import 'datatables.net'
import 'datatables.net-bs'
import 'fullcalendar'
import 'perfect-scrollbar'
import 'tether'
import 'slick-carousel'
import 'bootstrap'
import 'dragula'
import './assets/js/demo_customizer.js'
import './assets/js/main.js'

import React from 'react';
import Routes from './routes'

const App: React.FC = () => <Routes/>

export default App;

But I'm getting a lot of error, like:

ReferenceError: jQuery is not defined
./node_modules/bootstrap-validator/js/validator.js

... and so on.

Any idea how I can get this template working on React?