I've tried to put <script src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image"></script> in the <head> of my index.html using reactjs, however, for some reason this didn't work for me.
client/public/index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Portal</title>
<!-- WIRISplugin -->
<script src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
When I run the app the math equation remains not displaying and I received on console the 404 error, as the script wasn't able to access the Wiris URL and get the plugin.
Current results:
a3xy=∞∅π
21,4 mol ⇄ a∆N
Expected results:
Could someone help me? I've read the documentation on the Wiris website (https://docs.wiris.com/en/mathtype/mathtype_web/integrations/mathml-mode), but I wasn't able to identify why this didn't work.
Add the below script to your index.html or the page where you want to render mathml
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
Create a new component which will be used to render your math equations
function Latex(props) {
const node = React.createRef();
const renderMath = () => {
window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub, node.current]);
};
useEffect(() => {
renderMath();
});
return (
<div ref={node} {...props}>
{props.children}
</div>
);
}
Wrap your content with <Latex /> component and it will render your equations
Related
First off; I have corrected the misspelt stylesheet name and my app works, now, I just need to find the error.
I'm working through the Pro MERN Stack, 2nd Edition book and I have completed up to the Server Router section in Chapter 12.
When testing the server-rendered About page it is obvious that it hasn't been styled in line with the browser rendered page.
Express routes localhost:8000/about to render()
function render(req, res) {
// const body = ReactDOMServer.renderToString(<About />);
const element = (
<StaticRouter location={req.url} context={{}}>
<Page />
</StaticRouter>
);
const body = ReactDOMServer.renderToString(element);
res.send(template(body));
}
the template function is as follows:
export default function template(body) {
return `<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Pro MERN Title</title>
<link rel="stylesheet" href="/boostrap/css/bootstrap.min.css" ></link>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<style>...</style>
</head>
<body>
<!-- Page generated from template. -->
<div id="contents">${body}</div>
<script src="/env.js"></script>
<script src="/vendor.bundle.js"></script>
<script src="/app.bundle.js"></script>
</body>
</html>
`;
}
the error is that href="/boostrap/css/bootstrap.min.css"
is missing a 't' in the word bootstrap.
The question is where should I look for any error?
Added in response to question about 404 ...
Can u tell me why script below works only when is first page load? When i go to another page and go back i see there is no captcha and cant send a form.
import Script from "next/script";
function Contact(){
return(<>
<Head>
<title>Kontakt</title>
<meta name="description" content="Formularz kontaktowy. Napisz wiadomość" />
</Head>
<Script src="https://www.google.com/recaptcha/api.js"></Script>
</>
}
but whe i use script like below it works fine
import Script from "next/script";
function Contact(){
return(<>
<Head>
<title>Kontakt</title>
<meta name="description" content="Formularz kontaktowy. Napisz wiadomość" />
<script src="https://www.google.com/recaptcha/api.js"></script>
</Head>
</>
}
I tried all strategy's load but it doesnt help.
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 am trying to use altmetrics in one of the my article (PDF) in my website.
I tried to add the altmetric badges (here) to in reacts js but I could not manage.
Here is my trial:
First I tried to create a component and add to the page
class DownloadPDF extends Component {
render() {
return (
<div>
<script type="text/javascript" src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"></script>
<div data-badge-details="right" data-badge-type="medium-donut" data-doi={"my-doi-number-here"} class="altmetric-embed"> </div>
Download PDF
</div>
);
}
}
The second is I tried to put in the page directly:
<div>
<script type="text/javascript" src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"></script>
<div data-badge-details="right" data-badge-type="medium-donut" data-doi="my-doi-number-here" class="altmetric-embed"> my-crosreff-doi.pdf</div>
{<DownloadPDF />}
</div>
Can someone know how can I put altmetrics badges correctly in reactJS?
Thank you all answers.
For seeing the Altmetrics result in your page first you should add:
altmetrics external javascript file
<script type='text/javascript'src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>
2.
You should add your DOI wherever you want to display
<div class='altmetric-embed' data-badge-type='donut' data-doi="10.1038/nature.2012.9872"></div>
so this is for adding to html page but when you add in ReactJS web app we have a tiny problem.
Problem is adding external javascript file to in ReactJS page that you want to display the Altmetrics badge
So solution is we need to install an addition library that allows us to implement any external javascript file.
Check the link:
https://github.com/shaneosullivan/ReactDependentScript/
We need to add below code in your ReactJS page
...
render() {
return (
<div>
<ReactDependentScript
loadingComponent={<div></div>}
scripts={['https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js']}
>
<div></div>
</ReactDependentScript>
...
</div>
);
}
}
then you can add your the Altmetrics badge wherever you want in the page like this
<div data-badge-details="right" data-badge-type="medium-donut" data-doi="doi-numberhere" class="altmetric-embed"></div>
I think all you need to do as described https://api.altmetric.com/embeds.html
that you put the js script in any where in html , but react is virtual dom , so all you need is put in puplic in index.html in <body> under <div id"root"></div>
or like you named. just simple as that
There are two things you are missing
Adding the script to index.html file underpublicdirectory (if you have created your app usingcreate-react-app`)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<!-- Here we go with the external script -->
<script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.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>
Change the class attribute to className in dom
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
// changed class to className
<div className='altmetric-embed' data-badge-type='donut' data-doi="10.1038/nature.2012.9872"></div>
</div>
);
}
}
export default App;
I am using MacBook Pro.
I prefer to use ubuntu in a VM for web development.
I created a index.html inside my Macbook and then simply open it with Chrome.
The html was created following this video
and this is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name=description content="">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>First Component</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0-beta.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0-beta.1/JSXTransformer.js"></script>
</head>
<body>
<script type="text/jsx">
/** #jsx React.DOM */
var APP = React.createClass({
render: function() {
return (
<h1>Hello World</h1>
);
}
});
React.renderComponent(<APP />, document.body);
</script>
</body>
</html>
I got the following error:
When I expand on the error:
Please advise.
Update:
In the newer versions it is (documentation)
ReactDOM.render(reactElement, domContainerNode)
It is should be React.render and not React.renderComponent as per documentation
The video you mentioned uses 0.8 and you are using 0.13.
From 0.12 renderComponent has been replaced with render