Let's say I have a card component/page that I created using tailwindcss and typescript like this
type CardProps = {
config: {
title: string;
clickMeButtonText: string;
}
}
const Card = ({ config } : CardProps) => {
const func = () => {
console.log("func called!");
}
return (
<div>
<h1 className="text-3xl font-bold">{config.title}</h1>
<button onClick={func} className="bg-gray-400 text-black">{config.clickMeButtonText}</button>
</div>
);
}
export default Card;
I want to call this component in another html file as follows.
<!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.0">
<title>Document</title>
</head>
<body>
<script src="my-domain.com/card/bundle.js"></script>
<script>
init({
title: 'My Card',
clickMeButtonText: 'Click Me',
})
</script>
</body>
</html>
I know I didn't define a function called init but I gave such an example to show how I want to call it. Can I create such a structure using nextjs?
Related
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
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);
}
i am starting to create a react app and it gives error that React and ReactDOM is not defined.I am adding my code here...`
<head>
<meta charset="UTF-8">
<title>Indecision App</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react#16.12.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.12.0/umd/react-dom.development.js">
</script>
<script src="/scripts/app.js"></script>
</body>
</html>`
And my app.js file is this
'var template = React.createElement("h1", {
id: "id"
}, "This is jsx from app.js");
var appRoot = document.getElementById('app');
ReactDOM.render(template,appRoot);`
You have not defined ReactDOM.
replace your code with this
import React from "react";
import ReactDOM from "react-dom";
var template = React.createElement("h1", {
id: "id"
}, "This is jsx from app.js")
var appRoot = document.getElementById('root');
ReactDOM.render(template,appRoot);
The below code works fine.
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>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react#16.12.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.12.0/umd/react-dom.development.js"></script>
<script src="./scripts/app.js"></script>
</body>
</html>
app.js
(function() {
var template = React.createElement(
"h1",
{
id: "id"
},
"This is jsx from app.js"
);
var appRoot = document.getElementById("app");
ReactDOM.render(template, appRoot);
})();
folder structure
I am new to React. I've been following a few tutorials and the documentation.I'm trying to make the following work:
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">
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="styles.css">
<title>Composable Squares</title>
</head>
<body>
<div id="container"></div>
<script src="script.js"></script>
</body>
</html>
script.js
const Title = (props) => {
const { text } = props;
return React.createElement('h1', null, text);
}
const App = (props) => {
return React.createElement('div', null,
React.createElement(Title, { text: 'Title one!' } ),
React.createElement(Title, { text: 'Title two!!' } ),
React.createElement(Title, { text: 'Title three!!!' } )
)
}
ReactDOM.render(App, document.getElementById('container'));
I'm getting the following message:
Warning: Functions are not valid as a React child. This may happen if
you return a Component instead of from render. Or maybe
you meant to call this function rather than return it.
I've tried changing it to: ReactDOM.render(<App />, document.getElementById('container')) and I get Unexpected token <
How can I render the elements created by App?
Your App is a function. ReactDOM.render() expects an element as argument, not a function.
The quickest solution is to just invoke App():
ReactDOM.render(App(), document.getElementById('container'));
Or you can make App not a function, but assign to it the result of React.createElement('div'....
Demo:
const Title = (props) => {
const { text } = props;
return React.createElement('h1', null, text);
}
const App = (props) => {
return React.createElement('div', null,
React.createElement(Title, { text: 'Title one!' } ),
React.createElement(Title, { text: 'Title two!!' } ),
React.createElement(Title, { text: 'Title three!!!' } )
)
}
ReactDOM.render(App(), document.getElementById('container'));
<!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">
<script type="text/javascript" src="//unpkg.com/react/umd/react.development.js"></script>
<script type="text/javascript" src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="styles.css">
<title>Composable Squares</title>
</head>
<body>
<div id="container"></div>
<!-- script src="script.js"></script -->
</body>
</html>
When you use this,
ReactDOM.render(<App />, document.getElementById('container'))
You are getting error, because you are using JSX so you need a babel.
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
Also make sure when you add babel, you must add type="text/babel" on your script tag,
<script type="text/babel" src="script.js"></script>
Demo
Read how to Add React to a Website.
There is a really simple tutorial from codecademy about pushing state by parents to child, and using this props to pick up this value by children. It's really simple, I understand it, but it doesn't work if I copy these two files on my localhost. So I'm confused now, tutorial is wrong, or something wring with my computer. So my question is: It should be working or not?
parent.js:
var React = require('react');
var ReactDOM = require('react-dom');
var Child = require('./Child');
var Parent = React.createClass({
getInitialState: function () {
return { name: 'Frarthur' };
},
render: function () {
return <Child name={this.state.name} />;
}
});
ReactDOM.render(<Parent />, document.getElementById('app'));
child.js:
var React = require('react');
var Child = React.createClass({
render: function () {
return <h1>Hey, my name is {this.props.name}</h1>;
}
})
module.exports = Child;
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
</head>
<body>
<div id="app"></div>
<div id="test"></div>
<script>__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__</script>
<script src="bundle.js"></script>
</body>
</html>
In this case "doesn't work" mean I have "Hey, my name is" but I haven't "Frarthur" on the screen. So I don't have props value. I have no mistakes or warnings.