I have a html template like
<!doctype html>
<html lang="en">
<head>
</head>
<body>
</body>
some body
<script type="text/javascript">
**Some JQUERY**
</script>
</body>
</html>
I am trying to convert it into react functional component.Everything is done But in the script tag there is some JQUERY written for one of the elements in the body.
Can anyone tell me how to implement this jquery in my component or any way to convert the functions in script tag into javascript functions??
You can do this by using react functional component or by using react hooks.
Example:
import React, {useEffect, useState} from "react";
import * as $ from "jquery";
const HtmlToReact = () => {
const [loaded, setLoaded} =useState(false);
useEffect(() => {
if (!loaded) {
setLoaded(true);
// ... jquery//;
}
},[loaded]);
return (
<body>
//statement
</body>
)
}
Related
I'm trying to embed a Sharpspring form script into my React (page.jsx) component. For this form to load succesfully it needs to be placed outsite the <head></head> element, and inside the <div> where I want to display the form.
The original HTML code I need to embed looks like this:
<!-- SharpSpring Form -->
<script type="text/javascript">
var ss_form = {'account': 'MzawMDE3tzQzBQ', 'formID': 'szBIMrFMSzbXTUm0TNM1MTc107VMNbfQTTRJTExOTUoySk4zAA'};
ss_form.width = '100%';
ss_form.domain = 'app-3QNK98WC9.marketingautomation.services';
// ss_form.hidden = {'field_id': 'value'}; // Modify this for sending hidden variables, or overriding values
// ss_form.target_id = 'target'; // Optional parameter: forms will be placed inside the element with the specified id
// ss_form.polling = true; // Optional parameter: set to true ONLY if your page loads dynamically and the id needs to be polled continually.
</script>
<script type="text/javascript" src="https://koi-3QNK98WC9.marketingautomation.services/client/form.js?ver=2.0.1"></script>
I'm trying to embed it into page.jsx this way:
import React from "react";
function myComponent() {
var ss_form = {'account': 'MzawMDE3tzQzBQA', 'formID': 'szBIMrFMSzbXTUm0TNM1MTc107VMNbfQTTRJTExOTUoySk4zAAA'};
ss_form.width = '100%';
ss_form.domain = 'app-3QNK98WC9Y.marketingautomation.services';
return (
<main>
<div className="form">
{ss_form}
<script src="https://koi-3QNK98WC9Y.marketingautomation.services/client/form.js?ver=2.0.1" type="text/javascript" />
</div>
</main>
);
}
export default myComponent;
However, I get this error:
Error: Objects are not valid as a React child (found: object with keys {account, formID, width, domain}). If you meant to render a collection of children, use an array instead.
I know I'm supposed to use "arrays instead" but I could not find any documentation that solved this error. Any suggestions on how I could make this embed code to work?
Thank you.
I was able to embed the form using helmet.
First installed:
npm install helmet
My working code looks like this:
import React from "react";
import ReactDOM from "react-dom";
import { Helmet } from 'react-helmet';
function myComponent() {
return (
<main>
<Helmet>
<script
src="https://koi-3QNK98WC9.marketingautomation.services/client/form.js?ver=2.0.1"
/>
<script>
{`
var ss_form = {'account': 'MzawMDE3tzQzBQ', 'formID': 'szBIMrFMSzbXTUm0TNM1MTc107VMNbfQTTRJTExOTUoySk4zAA'};
ss_form.width = '100%';
ss_form.domain = 'app-3QNK98WC9Y.marketingautomation.services';
ss_form.target_id = 'form';
ss_form.polling = true;
`}
</script>
</Helmet>
<div id="form"> </div>
</main>
);
}
export default myComponent;
Turns out SharpSpring embed code supports the variant ss_form.target_id, which displays the form on the designated ID.
I'm sure the above solution will work for other javascripts and embed codes as well.
I am integrating a third-party library into my React app.
They provide this script I need to add to my <head>:
index.html
<head>
<script>
var externalVariable1 = externalVariable1 || {};
var externalVariable2 = externalVariable2 || {};
</script>
// tag.min.js gives value to these variables
<script async src="//example.com/tag.min.js"></script>
</head>
I need to use access these two variables from my component. I tried the following but I get 'externalVariable1' is not defined error. Any thoughts?
MyScreen.js
import React from 'react';
const MyScreen = () => {
return (
<React.Fragment>
<div>
<h2>Hello!</h2>
</div>
<div id='myId'>
{externalVariable.push(function() { externalVariable2.display();})}
</div>
</React.Fragment>
);
}
export default MyScreen;
If you want to access variables defined in the global scope from inside of a React component, you can typically do that by accessing the variable through the window object.
See the example below:
function App(){
return <h1>The secret is {window.secret}</h1>
}
ReactDOM.render(<App />, document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- Adding some global variables outside of React -->
<script>
var secret = "hello";
</script>
<div id="root"></div>
I am trying to compare text from two HTML pages using javascript using two separate external js files and importing the needed variable to be compared. However the function is not showing any result.
My first html is:
<!DOCTYPE html>
<html>
<body>
<span id='current-name'>John Hamish Smith</span>
<p id='new-billing'>0</p>
<script src='experiment.js' type="text/javascript"></script>
</body>
</html>
experiment.js below:
const currentName = document.getElementById('current-name').textContent;
const newBillingField = document.getElementById('new-billing');
const currBillingValue = Number(newBillingField.textContent);
let newBillingValue = currBillingValue + 1;
import {nameCheck} from './test2';
const testing = () => {
if(currentName === nameCheck) {
newBillingField.textContent = newBillingValue;
alert('hi there');
}
}
window.addEventListener('load', testing);
then my second html is simply:
<!DOCTYPE html>
<html>
<body>
<p id='userName'>John Hamish Smith</p>
<script src='./test2.js' type='text.javascript'></script>
</body>
</html>
and test2.js as follows:
let nameCheck = document.getElementById('userName').textContent;
export {nameCheck}
However, even with the names being the same, my newBillingValue is still 0.
(the alert is just to facilitate the function test)
thank you!
Am just starting with Vue.js and ui development, and I am trying to make a very simple vue.js call. However, when I am launching my html page using liveserver on Visual Studio Code no JavaScript function is getting called from app.js. I cant figure out what is wrong with the code.
Can someone please advise?
Vue included in HTML-
<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#next" defer></script>
<script src="app.js" defer></script>
app.js code -
function getRandomValue(min, max){
return Math.floor(Math.random() * (max - min)) + min;}
const app = Vue.createApp({
data(){
return{
playerHealth:100,
monsterHealth:100
};
},
methods:{
attackMonster(){
console.log('attack called')
const attackValue = getRandomValue(5,12);
this.monsterHealth = this.monsterHealth - attackValue;
this.attackPlayer()
},
attackPlayer(){
console.log('attack Player called')
const attackValue = getRandomValue(8,15);
this.playerHealth = this.playerHealth - attackValue;
}
}
});
You need to mount your app to a <div> tag, for example:
In your html:
<div id="app"></div>
In app.js:
const vm = app.mount('#app')
Here is the detailed explanation from Vue.js documentation:
https://v3.vuejs.org/guide/instance.html#creating-an-application-instance
You have defined methods attackMonster and attackPlayer but you didn't call them. You can use created() to call them or you can also use mounted() (if you need to access DOM).
created () {
this.attackMonster();
}
Also you need to mount Vue app to HTML.
const app = Vue.createApp({
/** the rest of your vue app */
/** the rest of your vue app */
created () {
this.attackMonster();
}
})
const vm = app.mount('#app');
html
<body>
<div id="app">
<p>playerHealth: {{ playerHealth }}</p>
<p>monsterHealth: {{ monsterHealth }}</p>
</div>
</body>
Please check the path in your script tag
<script src="/path/to/app.js" defer></script>
This my code HTML file
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script src="../node_modules/rxjs/bundles/rxjs.umd.min.js"></script>
<script src="./Test.js"></script>
</body>
</html>
This my code Js file
const stream = Rx.Observable.create(...);
When I want to use Rx I get Error.
Uncaught ReferenceError: Rx is not defined
I can’t understand what the problem is.
In RxJs 6 the object is called rxjs
const stream = rxjs.Observable.create(...);
or
const { Observable } = rxjs;
const stream = Observable.create(...);
If you are using npm then you need to import the parts you need as the main thing about RxJs 6 over 5 is that it is tree shakeable
import { Observable } from 'rxjs';
const stream = Observable.create(...);