I am new to reactjs. First, I will summarize what happened to me. When I tried to move to another page using useNavigate() in react-router-dom, some click events not fired in that page. But when refresh that page, javascript works well. I want to make react website(just look like medium.com) using metronic static website template. So I added required css and js files in index.html file in public folder like below.
...
<link href="%PUBLIC_URL%/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
<link href="%PUBLIC_URL%/assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="%PUBLIC_URL%/assets/plugins/global/plugins.bundle.js"></script>
<script src="%PUBLIC_URL%/assets/js/scripts.bundle.js"></script>
<script src="%PUBLIC_URL%/assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
<script src="%PUBLIC_URL%/assets/js/custom/widgets.js"></script>
<script src="%PUBLIC_URL%/assets/js/custom/apps/chat/chat.js"></script>
<script src="%PUBLIC_URL%/assets/js/custom/modals/create-app.js"></script>
<script src="%PUBLIC_URL%/assets/js/custom/modals/upgrade-plan.js"></script>
And I made a login and dashboard page. After successfully logged in, then page navigates to dashboard page. (I omitted unnecessary codes for simplicity.)
...
import { useNavigate } from "react-router-dom";
...
const Login =() => {
const navigate=UseNavigate();
useEffect(() => {
dispatch(login(credential))
.unwrap()
.then(()=>{
navigate("/dashboard")});
But in dashboard page, original javascript came from Metronic does not work. If I refresh page, then javascript works well. ( dropdown event when click button)
plugins.bundle.js and scripts.bundle.js are responsible for click event handling and they are already included in page.
Maybe my method for using Metronic template in react is incorrect. Please solve this problem. I tried all day long, but could not find solution. Thanks in advance.
Finally I solved this problem. For those who would confront this problem, I will explain the root cause and solution!
All Metronic bootstrap menu components are initialized automatically, but sometimes like me should initialize instances. In my problem, I could not fire dropdown menu event because when navigating to dashboard(re-rendering), not initialized automatically.
So, in useEffect hook, just initialize KTMenu like below.
KTMenu.createInstances();
For those similar cases, check this manual metronic documentation how to initialize instances, then add initialization code in useEffect hook.
Related
Im building a website using React JS and each time I refresh the page the layout breaks. What could be causing this?This is before refresh
This is after
In the public/index.html call your style.css:
<link rel="stylesheet" href="%PUBLIC_URL%/css/style.css" />
I am developing a web app using the React CDN. In a .js file that defines a React component using JSX, I am trying to use the JSX <img> element to render an image from a local image file. Unfortunately, the image is not displaying.
In the <body> of my index.html, I have the following:
<div id="coursesModeTab"></div>
...
<script src="https://unpkg.com/react#18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"crossorigin></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script src="scripts/coursesMode.js" type="text/babel"
data-plugins="transform-modules-umd"
data-presets="react" data-type="module">
Then, in coursesMode.js, I have the following:
import ssLogo from "./images/sslogo2.png";
function Logo() {
return <img className="mode-page-icon" src={ssLogo} alt="SpeedScore logo"/>
}
const coursesDiv = ReactDOM.createRoot(document.getElementById('coursesModeTab'));
coursesDiv.render(<Logo />);
Thanks to this related StackOverflow post, I was able to eliminate all console errors related to not being able to use import statements in my coursesMode.js file. However, the image still does not display! Instead, I see
when the app attempts to render the image. I can confirm that images/sslogo2.png exists in my project. I have also tried putting sslogo2.png in a public/ directory and at the root of my project, but neither worked.
How can I make the image render properly?
I am trying to embed the podcast player provided by Buzzsprout. This is the code they provide.
<div id="buzzsprout-player-61XX09"></div>
<script src="https://www.buzzsprout.com/14XX79/61XX09-the-podcast-promo.js?container_id=buzzsprout-player-61XX09&player=small" type="text/javascript" charset="utf-8"></script>
The intention is to have multiple players on a single page, a list of podcast episodes. However the above code does not work with a Gatsby component. I've search for ways to include this and unable to find a solution.
I have tried the following but this does not work.
const IndexPage = () => (
<script dangerouslySetInnerHTML={{__html: `src="https://www.buzzsprout.com/14XX79/61XX09-the-podcast-promo.js?container_id=buzzsprout-player-61XX09&player=small" type="text/javascript" charset="utf-8"`}} />
)
Spent a while trying other options such as the react-script-tag package but uses deprecated methods and does not work. Any help would be great!
Use <Helmet> component:
const IndexPage = () => (
<>
<Helmet>
<script defer src="https://www.buzzsprout.com/14XX79/61XX09-the-podcast-promo.js?container_id=buzzsprout-player-61XX09&player=small" type="text/javascript" charset="utf-8" />
</Helmet>
</>
)
Basically, the <Helmet> (imported from react-helmet) component puts inside the head tag everything that has wrapped inside. You may want to play with the defer attribute if needed (thanks #LekoArts for the reference at https://github.com/gatsbyjs/gatsby/discussions/30752).
Keep in mind that with your approach, you are exposing the site to XSS (Cross-Site Scripting) attacks since you are using dangerouslySetInnerHtml (hence the name). You can use some parse libraries to avoid its usage if needed. Using <Helmet> approach your site is completely safe.
The issue has been solved using a native iframe for this use-case.
I created a new project using the React-Redux SPA template for Visual Studio 2017
Now the "react-app" div is added in Index.cshtml.
what if I want to reuse the same <div> again inside another app(simp HTML page) and reuse related scripts.
here is what on a test.html page
scripts
<base href="" />
<link rel="stylesheet" href="dist/vendor.css" asp-append-version="true" />
<link rel="stylesheet" href="dist/site.css" asp-append-version="true" />
<script type="text/javascript" src="dist/vendor.js" asp-append-version="true"></script>
<script type="text/javascript" src="dist/main-client.js" asp-append-version="true"></script>
body
<div id="react-app" asp-prerender-module="ClientApp/dist/main-server" data-content="{"formID":7}">Loading...</div>
running this page in browser says that initialReduxState is undefined.
so what is the best practice to easily embed React component and its related scripts into another page without requiring MVC Razor views?
Thanks!
it turns out that the server side prerendering is initiating the initialReduxState, and in this case (simple HTML page), server side prerendering is not working and all Tag Helpers like asp-prerender-module are useless and should be removed.
so to get the main-client.js file work, I modified boot-client.ts file
from
const initialState = (window as any).initialReduxState as ApplicationState;
to
const initialState = (window as any).initialReduxState as ApplicationState || { form: {}, routing: { location: null }};
Can anyone help me here? im (totally) new at polymer. And im having trouble with rendering the content.
One page named "o-primeiro-demo.html" isnt rendering. I can only get the content present in the index.html file when i get it either through localhost:8080 or localhost/php.
This is the code:
index.html(what i added. the rest is the inicial settings)
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="o-primeiro-demo.html">
<body>where is "o-primeiro-demo.html" data?</body>
o-primeiro-demo.html
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<link rel="import" href="https://polygit.org/components/iron-icon/iron-icon.html">
<dom-module id="o-primeiro-demo">
<template>This is the first test</template>
<script>Polymer ({ is : "o-primeiro-demo" }); </script>
</dom-module>
bower.json
"name": "o-primeiro-demo",
If I understand correctly, you are trying to show o-primeiro-demo in your page.
For Polymer, to show a page you have to stamp it out onto the page with a tag.
If you want that to show up you need to write:
<body>
<o-premeiro-demo></o-premeiro-demo>
</body>
Until you do this, all content is inert. It doesn't exist and nothing knows about it.