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>
)
}
Related
Hi I am currently learning Vue.js and I have an issue with it, I am calling Vue using a CDN.
I have followed instructions but it does not seem to be recognising that Vue exists.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght#400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue#3"></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goal">
<h2>My Course Goal</h2>
<p>{{coarseGoal}}</p>
</section>
</body>
</html>
This is the simple js file It does not output the code from the Vue object.
Would really appreciate any help on this.
const app = vue.createApp({
data () {
return {
coarseGoal: 'This is the best',
};
}
});
app.mount('#user-goal');
It should be Vue.createApp instead of vue.createApp.
Working Fiddle
const app = Vue.createApp({
data() {
return {
coarseGoal: 'This is the best',
};
}
});
app.mount('#user-goal');
<title>Vue Basics</title>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght#400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue#3"></script>
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goal">
<h2>My Course Goal</h2>
<p>{{coarseGoal}}</p>
</section>
</body>
I am building a website with react and when I share the link on social media, it appears like the following:
How to have the website preload the content when sharing the links? Should I use something other than ReactDOMServer.renderToStaticMarkup, to render the data?
Server.js
app.get('/*',(req, res) => {
getStore(function(err, AppStore){
if(err){
return res.status(500).end('error')
}
match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
// Get React markup
const reactMarkup = ReactDOMServer.renderToStaticMarkup(<RoutingContext {...renderProps} />)
res.locals.reactMarkup = reactMarkup
if (error) {
res.status(500).send(error.message)
} else if (redirectLocation) {
res.redirect(302, redirectLocation.pathname + redirectLocation.search)
} else if (renderProps) {
// Success!
res.status(200).render('index.html')
} else {
res.status(404).render('index.html')
}
})
})
})
app.listen(app.get('port'))
index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap Core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/css/clean-blog.min.css" rel="stylesheet">
<link href="/css/cosmic-custom.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic"
rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?
family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
rel="stylesheet" type="text/css">
<title>{{ site.title }}{{# page }} | {{ page.title }}{{/ page }}</title>
</head>
<body class="hidden">
<div id="app">{{{ reactMarkup }}}</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/clean-blog.min.js"></script>
<script src="/dist/bundle.js"></script>
</body>
</html>
I have some sdk scripts that should be imported like this:
<script src="../libs/async.min.js"></script>
<script src="../libs/es6-shim.js"></script>
<script src="../libs/websdk.client.bundle.min.js"></script>
<script src="../libs/fingerprint.sdk.min.js"></script>
These are part of an SDK that allows me to interact with a biometric. I need to create a module in my project that from these scripts to then reuse it. It is a project of React JS.
Try importing them into the index.html that contains the class = 'app / root' and then create a folder controlers with a FingerSDK class and try to access the classes and methods contained in the SDK but it does not compile, it does not recognize anything, as if the scripts were not imported.
For example i try in index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dashboard</title>
</head>
<body>
<div id="root">
</div>
<script src="../production/libs/es6-shim.js"></script>
<script src="../production/libs/websdk.client.bundle.min.js"></script>
<script src="../production/libs/fingerprint.sdk.min.js"></script>
<script src="../production/app.js"></script>
</body>
</html>
And my module:
class FingerprintSDKTest {
constructor( errM ) {
this.deviceId = '' //'A7429977-B0D4-9640-9AF7-CC792A5989BD'
this.fingerData = {}
this.sdk = new Fingerprint.WebApi
this.errorManagment = errM
this.getDeviceList()
}
getDeviceList() {
this.sdk.enumerateDevices()
.then( response => {
this.deviceId = response[0]
} )
.catch( err => {
notification['warning']( {
message: 'No se ha conectado el lector de huellas',
description: 'No se ha detectado ningún lector de huellas, algunas funcionalidades no estaran disponibles sin el lector, favor de connectar un lector de huellas.'
} )
} )
}
}
I need to be able to import those scripts so that I can instantiate FingerPrint.WebApi and I really do not understand how I can do it. After I need import this module into a React JS component.
I appreciate you can guide me and I appreciate the contributions, apologies for my English.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>TestApp</title>`enter code here
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</div>
<script src="scripts/es6-shim.js"></script>
<script src="scripts/websdk.client.bundle.min.js"></script>
<script src="scripts/fingerprint.sdk.min.js"></script>
</body>
</html>
BioAuth.js
import React, { Component } from 'react';
class BioAuth extends Component {
componentDidMount() {
this.onScriptLoad();
}
onScriptLoad = () => {
this.sdk = new window.Fingerprint.WebApi();
this.sdk.onDeviceConnected = function (e) {
console.log('no fingerprint device');
};
this.sdk.onDeviceDisconnected = function (e) {
console.log('no fingerprint device');
};
this.sdk.onCommunicationFailed = function (e) {
console.log('Communication Error')
};
}
render() {
return (
<div>
<h1>Validate BioAuth Connectivity</h1>
</div>
);
}
}
export default BioAuth;
With above config i use imported functions in my ReactJs Components.
I am trying to implement a Dropzone element to allow my user to easily drag and drop multiple files to upload into my web app. However, I don't really understand or know how to integrate the source code into my current solution. Can someone help me out on this?
Currently, I have a base.html to store all the frontend libraries/dependencies like bootstrap.min.css and jquery.min.js. Based on that understanding, i did a similar import for dropzone.js and dropzone.css. But I can't seemed to get it working.
"base.html" at root folder
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js" />
<link rel="stylesheet" type="text/css" href="includes/css/basic.css" />
<link rel="stylesheet" type="text/css" href="includes/css/dropzone.css" />
<script type="text/javascript" src="includes/js/dropzone.js" />
<script>
Dropzone.autoDiscover = false;
window.onload = function () {
var dropzoneOptions = {
dictDefaultMessage: 'Drop Here!',
paramName: "file",
maxFilesize: 2, // MB
addRemoveLinks: true,
init: function () {
this.on("success", function (file) {
console.log("success > " + file.name);
});
}
};
var uploader = document.querySelector('#uploader');
var newDropzone = new Dropzone(uploader, dropzoneOptions);
console.log("Loaded");
};
</script>
<!-- Font Awesome -->
<title>Market Data Terminal Analysis</title>
</head>
<body>
{% include 'includes/_navbar.html' %}
<div class="container-fluid">
{% block content %}{% endblock content%}
</div>
</body>
I stored my dropzone.js and dropzone.css in root/includes/js and root/includes/css respectively.
Expecting a dropzone element on my page, but still not appearing.
I'm building a custom element. this is my code:
<!DOCTYPE html>
<html>
<template>
<link rel="stylesheet" type="text/css" href="pols-notifier.css">
<div class="body">
<button class="close"></button>
<div class="content"></div>
</div>
</template>
<script>
class PolsNotifier extends HTMLElement {
constructor() {
super();
this.currentDocument = document.currentScript.ownerDocument;
}
connectedCallback() {
const instance = this.currentDocument.querySelector('template').content.cloneNode(true);
this.attachShadow({mode: 'open'}).appendChild(instance);
}
}
window.customElements.define('pols-notifier', PolsNotifier);
</script>
</html>
And the page is:
<!Doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="import" href="http://localhost:8080/assets/pols-notifier/pols-notifier.html">
<body>
<pols-notifier></pols-notifier>
</body>
</html>
The console show an error when try load the stylesheet. The file of custom element and the stylesheet are in /assets/pols-notifier directory in my project but the navigator is looking /pols-notifier.css.
Why is looking there?
Greeting. Thanks.