I bought html template. When I try to use it on react project, some of function not working. One of it owl carousel. owl.js template file dynamically adding divs and styling them. This section working on html page but not on react. I do not get any error from console.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>aaa</title>
<link href="assets/css/bootstrap.css" rel="stylesheet"/>
<link href="assets/css/style.css" rel="stylesheet"/>
<link href="assets/css/responsive.css" rel="stylesheet"/>
<link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon"/>
<link rel="icon" href="assets/images/favicon.png" type="image/x-icon"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=0">
</head>
<body>
<div id="root"></div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-ui.js"></script>
<script src="assets/js/jquery.fancybox.js"></script>
<script src="assets/js/owl.js"></script>
<script src="assets/js/wow.js"></script>
<script src="assets/js/isotope.js"></script>
<script src="assets/js/mixitup.js"></script>
<script src="assets/js/appear.js"></script>
<script src="assets/js/validate.js"></script>
<script src="assets/js/script.js"></script>
<script src="assets/js/map-script.js"></script>
</body>
</html>
With React your public files, such as JavaScript files, should be in a folder called 'public' in your React app, then in the index.html this should be denoted by '%PUBLIC_URL%'. So in other words, move your assets folder to a folder called public and add '%PUBLIC_URL%/' before the paths for your files.
After 4 hour i found solition for my problem. It is define script links on component instead of index.html. Hope this post helps more people
import '../assets/css/bootstrap.css';
import '../assets/css/style.css';
import '../assets/css/responsive.css';
import React,{ useEffect } from 'react';
import { Helmet } from 'react-helmet';
const useScript = (src) => {
useEffect(() => {
const tag = document.createElement('script');
tag.async = true;
tag.src = src;
document.body.appendChild(tag);
return () => {
document.body.removeChild(tag);
}
}, [src])
}
export function Home(){
useScript('./assets/js/jquery.js');
useScript('./assets/js/bootstrap.min.js');
useScript('./assets/js/popper.min.js');
useScript('./assets/js/jquery-ui.js');
useScript('./assets/js/jquery.fancybox.js');
return(
<div>
<Helmet>
<title>{model.Title}</title>
<meta name="description" content={model.Desc}/>
<meta name="keywords" content={model.Keys}/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-
scale=1.0, maximum-
scale=1.0, user-scalable=0"></meta>
</Helmet>
.......
</div>
)
}