could anyone help me out here? Just trying to embed a simple Skype button in my react app, but due to my apparent lack of understanding of modules, imports, webpack, and how create-react-app actually does what it does, I can't access the Skype object. It's not defined.
I have followed instructions
https://www.skype.com/en/developer/create-contactme-buttons/
I have linked to the skype js using a script tag in my index.html's <script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>
inside my main js file, using create-react-app:
loadSkype() {
Skype.ui({
"name": "dropdown",
"element": "SkypeButton_Call_john23",
"participants": ["john23"],
"imageSize": 32
})
}
I can not access the Skype object. Any ideas?
The instructions make it sound really simple: copy and paste the following code:
<script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>
<div id="SkypeButton_Call_john23_1">
<script type="text/javascript">
Skype.ui({
"name": "call",
"element": "SkypeButton_Call_john23_1",
"participants": ["john23"]
});
</script>
</div>
On your index.html you need import the skype library:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>
</body>
</html>
Then create a component for skype and import it whenever you want to use it:
import React from "react";
import { render } from "react-dom";
const styles = {
fontFamily: "sans-serif",
textAlign: "center"
};
class SkypeBT extends React.Component {
componentDidMount() {
Skype.ui({
name: "dropdown",
element: "SkypeButton_Call_john23",
participants: ["john23"],
imageSize: 32
});
}
render() {
return <div id="SkypeButton_Call_john23" />;
}
}
const App = () => (
<div style={styles}>
<h2>Call me</h2>
<SkypeBT />
</div>
);
render(<App />, document.getElementById("root"));
You can fid a working version in here
This snippet creates a button for your website, if you need to create an object then you should create a new div element and set the id to SkypeButton_Call_john23_1. Then you need to create a script element and place the json inside it.
loadSkype() {
var div = document.createElement('div');
div.id = 'SkypeButton_Call_john23_1';
var s = document.createElement('script');
s.setAttribute('type', 'text/javascript');
s.value =
Skype.ui({
"name": "call",
"element": "SkypeButton_Call_john23_1",
"participants": ["john23"]
});
div.appendChild(s);
return div;
}
Related
[EDIT]
Ok, i unstertood that, if i render my class in a div with id="root" using ReactDOM.render it work and i can use console.log().
But i need that this component, that is in a Razor pages, could be receive ,as props, some data of the Razor's Model. (for example a list of users). So, i decided to use #Html.React to load the component. But if i use this method, i can pass properties but console.log() doesn't work.
What should i do?
And, there is a way which i can use, in the razor pages, the component as "" ??
[EDIT]
i want to do something like that but the component are not showing anymore.
<div id="root">
<App/>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
<script src="#Url.Content("https://unpkg.com/#babel/standalone/babel.min.js")"></script>
<script src="#Url.Content("~/js/app.jsx")" type="text/babel"></script>
i have an ASP.NET CORE MVC project and i want that my Razor pages implement ReactJS component.
I can load the component App but when i tried to use console.log it doens't work. I figure out that is because the component load only on server side but i can't find a correct way to allow my client-side to access to component and use the js to print in the console a value that i want.
First solution i tried was by follow this link: https://reactjs.net/features/server-side-rendering.html
But when it says to add :
#Scripts.Render("~/bundles/main")
#Html.ReactInitJavaScript()
I have 2 problem:
don't foud #Script so i had to install WebOptimize..but now it says that cannot fine the Ihtml string
i don't have this '~/bundles/main', what is that file? i have to install packages?
with ReactInitJavaScript component is showen but in the inspector says that component is undefined and in the class cannot find React.Component
So, the value are showen but i can't access to console. What i have to insert in the code to enable the client-side??
_Layout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - SportData</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/card.css" asp-append-version="true" />
</head>
<body>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Index.cshtml
#using Newtonsoft.Json;
#using SportData.Web.Models;
#using System.Web.Optimization;
#model SportContainer
#Html.React("App",new { Property1 = "value1", Property2 = "value2" })
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
#Scripts.Render("~/bundles/main")
#Html.ReactInitJavaScript()
App.jsx:
class App extends React.Component{
componentDidMount() {
console.log('hi')
}
render() {
console.log(this.props)
const { Property1, Property2 } = this.props
const handler = (event) => {
console.log(event);
}
return (
<div>
<button onClick={handler}> clicca </button>
{console.log(this.props)}
<p>Property1: {Property1}</p>
<p>Property2: {Property2}</p>
<div className="box">Sono un box</div>
</div>
);
}
}
Program.cs:
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();
builder.Services.AddMvc().AddRazorRuntimeCompilation();
//builder.Services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
builder.Services.AddReact();
builder.Services.AddHttpContextAccessor();
builder.Services.AddJsEngineSwitcher(option => option.DefaultEngineName = V8JsEngine.EngineName).AddV8();
var app = builder.Build();
// configure middleware
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error");
app.UseHsts();
}
app.UseReact(config => {
config.AddScript("~/js/App.jsx");
});
ReactSiteConfiguration.Configuration.JsonSerializerSettings.ContractResolver = new DefaultContractResolver();
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
app.Run();
you have to use react js with api this is way.because if you will use react js like this you cannot make rich ui and also issues with the packges but if you want to use like this so you have to use like this.
check here
I am trying to use React with MS Visual Studio Code. If I ran the program from the terminal, I get following error message: "Cannot use import statement outside a module"
If I run the program without terminal, it takes me to the browser (Firefox) and gives "File not found" error message.
Not sure how the above two are connected. Is this is a problem with node installation, location of my files (where I do the actual programming), or perhaps is has something to do with Firefox debugger.
Kindly ask for help.
Many thanks.
Here is the code:
import React from "react";
import { ReactDOM } from "react-dom";
class App extends React.Component {
render() {
return (
<div>Test div</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("App"));
I am also providing a code to my .html, in case it is relevant:
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="/src/Dejan/Kalkulator/calc.css">
</head>
<body>
<h1 id="test">Testing the system</h1>
<script src="/src/Dejan/Kalkulator/calc.js"></script>
</body>
<div id="App"></div>
</html>
Hey Deyan doesn't add into the HTML file, because react will automatically handle that, and also don't use CSS in HTML it will cause weird behavior at the end.
And don't put App div outside of the body tag. Because inside that div your whole react app will be fitted.
import React from "react";
import { ReactDOM } from "react-dom";
import "./Dejan/Kalkulator/calc.css"; // and add css like this I don't know your file path use the correct I put randomly.
class App extends React.Component {
render() {
return (
<div>Test div</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("App"));
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
</head>
<body>
<div id="App"></div>
</body>
My component looks like this:
import React from "react"
function about(props) {
return (
<>
<h2>List users:</h2>
<ul>
{props.users.map((user) => {
return <li>{user.name}</li>
})}
</ul>
</>
)
}
export default about
export async function getStaticProps() {
console.log("Pedido GSP")
const res = await fetch("https://jsonplaceholder.typicode.com/users")
const users = await res.json()
return {
props: {
users,
}, // will be passed to the page component as props
revalidate: 60
}
}
My generated HTML file after build looks like these:
<!DOCTYPE html>
<html>
<head>
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<meta name="next-head-count" content="2"/>
<link rel="preload" href="/_next/static/css/120f2e2270820d49a21f.css" as="style"/>
<link rel="stylesheet" href="/_next/static/css/120f2e2270820d49a21f.css" data-n-g=""/>
<noscript data-n-css=""></noscript>
<script defer="" nomodule="" src="/_next/static/chunks/polyfills-a40ef1678bae11e696dba45124eadd70.js"></script>
<script src="/_next/static/chunks/webpack-93d688579f639ac646b4.js" defer=""></script>
<script src="/_next/static/chunks/framework-fb2dd7aba3784ca05084.js" defer=""></script>
<script src="/_next/static/chunks/main-89e612c37cd79392e22d.js" defer=""></script>
<script src="/_next/static/chunks/pages/_app-fd5464216d5252770dc3.js" defer=""></script>
<script src="/_next/static/chunks/pages/GSSP-43e12c3600ead54767ee.js" defer=""></script>
<script src="/_next/static/zNXWEGrv_m38JDMSXfB2l/_buildManifest.js" defer=""></script>
<script src="/_next/static/zNXWEGrv_m38JDMSXfB2l/_ssgManifest.js" defer=""></script>
</head>
<body>
<div id="__next"></div>
<script id="__NEXT_DATA__" type="application/json">
{"props":{"pageProps":{"users":[{"id":1,"name":"Leanne Graham","username":"Bret","email":"Sincere#april.biz","address":{"street":"Kulas Light","suite":"Apt. 556","city":"Gwenborough","zipcode":"92998-3874","geo":{"lat":"-37.3159","lng":"81.1496"}},(...),"page":"/GSSP","query":{},"buildId":"zNXWEGrv_m38JDMSXfB2l","isFallback":false,"gssp":true,"scriptLoader":[]}
</script>
</body>
</html>
For what I've been learning the <div id="__next"></div> should'nt be empty, it should contain the list of users already rendered.
The page loads normally, but I believe the list is being created on the browser instead of being on the server. I'm new to Next and I got to this result while merging the project with Redux.
Also why are so many <script> tags being generated at the begining?
Thanks in advance.
Well I got it working and came here to help others that might have the same problem.
If you're using Redux with redux-persist, the PersistGate is causing the issue. Pass the store with a Provider and the issue is gone (the store will still persist).
I would like to include jquery.min.js and add a external JavaScript file and call a JavaScript function inside an existing react JS file.
I did below but it is not working
const VoCaaSComponentbtn = (
<React.Fragment>
<div>
<script type="text/javascript"src="https:xxxx/jquery-3.3.1.min.js"></script>
<script type="text/javascript"src="https:xxx/microsurvey" defer="defer"></script>
<div id="microsurvey" module="true" tab-info="tabname"></div>
<script type="text/javascript"> voc_getsurvey(); </script>
</div>
</React.Fragment>
);
You can import all the scripts in the main HTML file.
If you want to import the script inside the react component, you can use the following options.
Option 1: Use plain Javascript and React custom hook
Create custom hook [useScript.js]
import { useEffect } from 'react';
const useScript = url => {
useEffect(() => {
const script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, [url]);
};
export default useScript;
Use
import useScript from 'hooks/useScript';
const MyComponent = props => {
useScript('https://use.typekit.net/foobar.js');
// rest of your component
}
Option 2: Use plain Javascript in ComponentDidMount
componentDidMount () {
const script = document.createElement("script");
script.src = url;
script.async = true;
document.body.appendChild(script);
}
Option 3: Use dangerouslySetInnerHTML
const codeStr = `
<div>
<script type="text/javascript"src="https:xxxx/jquery-3.3.1.min.js"></script>
<script type="text/javascript"src="https:xxx/microsurvey" defer="defer"></script>
<div id="microsurvey" module="true" tab-info="tabname"></div>
<script type="text/javascript"> voc_getsurvey(); </script>
</div>
`
<div dangerouslySetInnerHTML={{ __html: codeStr }} />
You can add External JS library in indeex.html page inside public directory.
public/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="manifest" href="%PUBLIC_URL%/manifest.json" />
<script type="text/javascript"src="https:xxxx/jquery-3.3.1.min.js"></script>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
One another way to add external JavaScript file. If you only want to add for specific page or component.
componentDidMount() {
var script = document.createElement('script')
script.src = // path of external javascript file.
script.class = "external-script"
document.body.appendChild(script);
}
from this ressource https://reactjs.org/docs/add-react-to-a-website.html I have integrate into my static website a basic component
<body>
<div id="like_button_container"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/react-content-loader#3.4.1/dist/react-content-loader.min.js" crossorigin></script>
<!-- Load our React component. -->
<script src="like_button.js"></script>
</body>
</html>
like_button.js :
'use strict';
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return (
<div>
<button onClick={() => this.setState({ liked: true }) }>
Like
</button>
<Facebook /> ???????????
</div>
);
}
}
let domContainer = document.querySelector('#like_button_container');
ReactDOM.render(<LikeButton />, domContainer);
How to use in this component an external module like https://www.npmjs.com/package/react-content-loader ?
I tried to add script https://unpkg.com/react-content-loader#3.4.1/dist/react-content-loader.min.js into html page with import satement in my component but I have an error "Uncaught ReferenceError: Facebook is not defined"
I never tried the code in Add React to a Website chapter of the React documentation. It was a good time to tinker with it.
There are more than one potential problem with your attached code. You do not load Babel in your index.html. At least in the question. So you could not use jsx syntax in the like_button.js.
The second one is that you could not use import here. You have to find what is the namespace of the package. I logged out the window object, checked that and it is ContentLoader.
The rest is easy I created a standalone index.html with babel:
https://codesandbox.io/s/w27pjmq355
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script
src="https://unpkg.com/react-content-loader#3.4.1/dist/react-content-loader.min.js"
crossorigin
></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
console.log('window', window);
class App extends React.Component {
render() {
return (
<div>
<h1>Hello world!</h1>
<ContentLoader.Facebook />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
I think you could try out React this way, but Babel usage is not recommended like this in production. I strongly recommend to install node and use create-react-app. This way you can use the whole toolchain in no time.
Or event create a new React sandbox on CodeSandbox.io