React - integrate custom Bootstrap theme

I've been trying for couple days to integrate a poor Bootstrap theme template in a React app with no success.

So, I've created a new application in my folder. All good. Installed all the packages required by the theme and upgraded to the latest version. All good.

Now, let's customize the App.js component in React with some custom code:

function App() {
return (
<div className="App">
<section className="slice slice-lg delimiter-top delimiter-bottom">
<div className="container">
<div className="row mb-6 justify-content-center text-center">
<div className="col-lg-8 col-md-10">
<span className="badge badge-primary badge-pill">
What we do
</span>
<h3 className="mt-4">Leading digital agency for <span className="text-warning typed" id="type-example-1" data-type-this="business, modern, dedicated"></span> solutions</h3>
</div>
</div>
<div className="row row-grid">
<div className="col-md-4">
<div className="pb-4">
<div className="icon">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Apps.svg" className="svg-inject img-fluid" />
</div>
</div>
<h5>Designed for developers</h5>
<p className="text-muted mb-0">Quick contains components and pages that are built to be customized and used in any combination.</p>
</div>
<div className="col-md-4">
<div className="pb-4">
<div className="icon">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Ballance.svg" className="svg-inject img-fluid" />
</div>
</div>
<h5>Responsive and scalable</h5>
<p className="text-muted mb-0">Scalable and easy to maintain, Quick enables consistency while developing new features and pages.</p>
</div>
<div className="col-md-4">
<div className="pb-4">
<div className="icon">
<img alt="Image placeholder" src="../../assets/img/svg/icons/Book.svg" className="svg-inject img-fluid" />
</div>
</div>
<h5 className="">Very well documented</h5>
<p className="text-muted mb-0">No matter you are a developer or new to web design, you will find our theme very easy to customize with an intuitive code.</p>
</div>
</div>
</div>
</section>
</div>
);
}
export default App;

Now, let's import everything we need from the custom theme in index.js:

...
import './assets/css/quick-website.css';
import './assets/js/quick-website.js';
import './assets/libs/@fortawesome/fontawesome-free/css/all.min.css';
import './assets/libs/jquery/dist/jquery.min.js';
...

However, when I import the core JS (quick-website.js) file of the time, I get this types of errors:

1. From quick-website.js

2. From 'jquery.min.js`

What am I missing here?

Rather than importing jquery.min.js from assets, you should use npm to install the jquery package and then import relevant modules in the files where you need them. This is a more "react" way of doing things and it's much easier to update dependencies from the command line.

1. Run npm install jquery from the command line
2. Now, just import modules where you need them (in this case, quick-website.js):

import $ from 'jquery'

In general, if you see the error 'Something' is not defined, checking if you have imported the module is a good place to start.