I did a simple counter micro frontend for practice purposes, its working as expected but im getting an error message from visual code "Cannot find module 'remote/counterWrapper'...
Print:
My remote code:
import React, {useRef, useEffect} from "react";
import ReactDOM from "react-dom";
import counterWrapper from "remote/counterWrapper";
import "./index.css";
const App = () => {
const divRef = useRef(null)
useEffect(()=> {counterWrapper(divRef.current);}, [])
return(
<div>
<div>Name: react-host</div>
<div ref={divRef}></div>
</div>
)
};
ReactDOM.render(<App />, document.getElementById("app"));
My host code:
import { render } from "solid-js/web";
import Counter from "./Counter"
import "./index.css";
export default (el) => {
render(Counter, el);
}
Related
this is my index.html
<div id="root"></div>
<div id="portaltest"></div>
this my App.js
import React, { Component } from "react";
import PortalTest from "./PortalTest";
export class App extends Component {
render() {
return (
<div>
<PortalTest />
</div>
);
}
}
export default App;
this is what's in PortalTest.js
import React from "react";
import { ReactDOM } from "react";
function PortalTest() {
return ReactDOM.createPortal(
<div>This is the PORTAL DIV</div>,
document.getElementById("portaltest")
);
}
export default PortalTest;
This suppose to show the contents of PortalTest.js instead it only returns a blank page.
What did I do wrong?
Use import ReactDOM from 'react-dom' instead of import { ReactDOM } from 'react' and it should work.
See this sandbox.
I'm working on shopping Cart app, I want to use a Modal Form to display the cart's content and additional options before place the order, that's why I'm using Portals, so far, the source code of my Modal.js looks like this:
import { Fragment } from 'react';
import ReactDOM from 'react';
//import ReactDOM from 'react-dom/client';
import classes from './Modal.module.css';
const Backdrop = (props) => {
return <div className={classes.backdrop} onClick={props.onClose}/>;
};
const ModalOverlay = (props) => {
return (
<div className={classes.modal}>
<div className={classes.content}>{props.children}</div>
</div>
);
};
const portalElement = document.getElementById('overlays');
const Modal = (props) => {
return (
<Fragment>
{ReactDOM.createPortal(<Backdrop onClose={props.onClose} />, portalElement)}
{ReactDOM.createPortal(
<ModalOverlay>{props.children}</ModalOverlay>,
portalElement
)}
</Fragment>
);
};
export default Modal;
When I tried to load the modal form -clicking on an icon- I get this error:
This is the React's version I'm using:
This code used to work on previous version of React (17.x), the weird thing I tried to downgrade but still getting the same error.
My questions are:
In ver 18.x of React, Portals have been changed?
How can I downgrade React properly in order to test my code?
do you have any other suggestions how to overcome this issue using React's 18?
Thanks a lot
I had same error and I solved by importing
import ReactDOM from 'react-dom';
instead of
import ReactDOM from 'react-dom/client';
how are you doing? I badly cannot connect GA with React, im very stucked and all the videos that i saw the ID connector its start with UA, please help me
import './App.css';
// import Header from "../Header/header"
import Header2 from "../Header2/header"
import Footer from "../Footer/footer"
import Switch from "../Switch/switch"
import {BrowserRouter as Router} from "react-router-dom";
import React, {useEffect} from "react"
import ReactGa from "react-ga";
/**** Icons ****/
import { library } from '#fortawesome/fontawesome-svg-core'
import { fab, faFacebookSquare, faGoogle, faInstagramSquare, faWhatsappSquare} from '#fortawesome/free-brands-svg-icons'
import { fas, faBars, faIdCard, faGlobeAmericas, faCalendarAlt, faArrowUp} from '#fortawesome/free-solid-svg-icons'
library.add(fas, fab, faBars, faFacebookSquare, faInstagramSquare, faWhatsappSquare, faGoogle, faIdCard, faGlobeAmericas, faCalendarAlt, faArrowUp)
function App() {
useEffect(() => {
ReactGa.initialize('G-YZ9S63BMYY')
ReactGa.pageview(window.location.pathname)
}, [])
useEffect(() => {
console.log("hola", window.location.pathname)
})
return (
<Router>
<Header2 />
<React.StrictMode>
<Switch />
</React.StrictMode>
<Footer />
</Router>
);
}
export default App;
From now on thanks for all folks :)
You have to use React for GA4: https://www.npmjs.com/package/react-ga4
I am a beginner in reactjs. I am trying create my firs app that just log string to console browser but when I start, it gives jscript compilation error.
Please help me.
Thanks.
import React from "react";
import ReactDOM from "react-dom";
const element = <h1>Hello World</h1>;
console.log(element);
okay do it like this
import React from "react";
import ReactDOM from "react-dom";
const Element = () => {
console.log('First Render')
return <h1>Hello World</h1>;
}
ReactDOM.render(Element, document.getElementById('root'))
Hope it helps
Im new to react hooks and are experimenting a bit. I can display my values that are generated in Provider.js in App.js through Comptest.js. My problem is that the structure of my project with css etc makes it inconvenient to have a structure in the App.js like this:
<Provider>
<Comptest />
</Provider>
is it possible to fetch the data without displaying the components in that way in the app? just passing it between the components.
Here is a compact version of my application:
App.js
import React, { useContext } from "react";
import Provider from "./Provider";
import Comptest from "./Comptest";
import DataContext from "./Context";
function App() {
return (
<div className="App">
<h2>My array!</h2>
<Provider>
<Comptest />
</Provider>
</div>
);
}
export default App;
Provider.js
import React, { useState } from "react";
import DataContext from "./Context";
const Provider = props => {
const data = ["item1", "item2"];
return (
<DataContext.Provider value={data}>{props.children}</DataContext.Provider>
);
};
export default Provider;
Comptest.js
import React from "react";
import DataContext from "./Context";
const Comptest = () => {
const content = React.useContext(DataContext);
console.log(content);
return <div>{(content)}</div>;
};
export default Comptest;
Context.js
import React from "react";
const DataContext = React.createContext([]);
export default DataContext;