I am learning how to use components using React.
My page works fine, but if I move a component to another JS file and attempt to import it, my page goes completely blank.
Here is the working code where the imports are commented out.
//import Header from "./Header.js"
//import Footer from "./Footer.js"
function Body () {
return (
<div>
<h1>Reasons I am excited to learn react</h1>
<ol>Reasons
<li>Popular</li>
<li>Functional</li>
<li>I can build apps</li>
</ol>
</div>
)
}
function Page() {
return (
<div>
{/* <Header /> */}
<Body />
{/* <Footer /> */}
</div>
)
}
ReactDOM.render(<Page />, document.getElementById("root"))
and here is the Header I am trying to import
export default function Header () {
return (
<header>
<nav className="nav">
<img className="nav-image" src = "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" />
<ul className="nav-items">
<li>Pricing</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
)
}
There is no error message when the lines are uncommented, but when I open the HTML document the page, which displayed before, is always blank.
Why is it that when I uncomment either of the import lines from the top, my page renders completely blank?
Update: It looks like it is a general problem with import; if I add:
import React from 'react';
to the top, it also makes the page render as a blank white screen.
Per recommendation in the comments, I put it in an online editor (Code Sand Box), and the code works fine there. I guess the problem is with how I have Visual Studio Code set up?? I was using live server and then tried to use npm, but didn't quite figure out how to get npm to render the page.
Try using this import:
import Header from "./Header"
Maybe show your folder structure, if it is not working.
ReactDOM.render(<Page />, document.getElementById("root"))
Change above line as below
import ReactDOM from "react-dom/client";
ReactDOM.createRoot(document.querySelector("#root")).render(
<React.StrictMode>
<Page />
</React.StrictMode>
);
Related
I am having some troubles integrating a component from the outside library 'react-calendly', the PopUpButton widget specifically, that requires the parent DOM node to be inserted into. My current understanding is that my issue is being caused by the fact that Next.js uses SSR and therefore I do not have access to the browser. How can I work around this? For reference, my website is a very simple fullstack app for his business and I am new to React/full-stack development. Here is the code for the app portion that renders my page components:
import '../styles/globals.css'
import styles from '../styles/App.module.css'
import Navbar from '../components/navbar'
import Footer from '../components/footer'
function MyApp({Component, pageProps}) {
return (
<div className={styles.app}>
<div>
<Navbar />
</div>
<div className={styles.body} id="body">
<Component props={pageProps} />
</div>
<div>
<Footer className={styles.footer}/>
</div>
</div>
)
}
export default MyApp
And here is the code for my specific page component:
import styles from '../styles/Home.module.css'
import Head from 'next/head'
import { PopupButton } from 'react-calendly'
export default function Home() {
return (
<div className="home">
<Head>
<title>Homepage</title>
</Head>
<div className="cal_div">
<PopupButton
url="https://calendly.com/my_url"
rootElement={document.getElementsById("body")}
text="Click here to schedule!"
/>
</div>
</div>
)
}
I have a JS file; Cards.js which implements a card-style div:
import React from "react";
import CardItem from "./CardItem";
import "./Cards.css";
function Cards() {
return (
<div classNam="cards">
<ul className="cards__items">
<CardItem
src={require("../images/img-9.jpg").default}
text="text"
label="label"
path="/jobs"
/>
</ul>
</div>
);
}
export default Cards;
And then CardItem.js:
import React from "react";
import { Link } from "react-router-dom";
function CardItem(props) {
return (
<div>
<li className="cards__item">
<Link className="cards__item__link" to={props.path}>
<figure className="cards__item__pic-wrap"
data-category={props.label}>
<img
src={props.src}
className="card__item__img"
alt="alt"
/>
</figure>
<div className="cards__item__info">
<h5 className="cards__item__text">{props.text} </h5>
</div>
</Link>
</li>
</div>
);
}
export default CardItem;
However, on my site, the images from CardItem are not displayed. The Text, Label and Path all work, but no image.
I've looked around and have seen different solutions to this issue but none have worked for me.
I've tried using
src="../images/img-9.jpg"
instead of using require but that also didn't work.
What's weird is I can see the path AND the preview of the image when looking at the Chrome inspection panel, but they won't load.
I've also tried putting the images folder in the Public directory which is another solution I've seen, but I get an error saying something about loading resources outside of /src
I am trying to convert a basic success page design from figma to reactcode using anima.
import React from "react";
function success() {
return (
<Frame1
ellipse2="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/ellipse-2#2x.svg"
ellipse1="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/ellipse-1#2x.svg"
maskGroup="https://anima-uploads.s3.amazonaws.com/projects/602653dc8a60ddf32d89b719/releases/602653e5fdd0d169563cc04a/img/mask-group#2x.svg"
great="Great!"
text1="Your payment was successfull"
place="Okay"
/>
);
}
export default success;
function Frame1(props) {
const { ellipse2, ellipse1, maskGroup, great, text1, place } = props;
return (
<div className="frame-1">
<div className="overlap-group1">
<img className="ellipse-2" src={ellipse2} />
<img className="ellipse-1" src={ellipse1} />
<div className="typcntick smart-layers-pointers ">
<img className="mask-group" src={maskGroup} />
</div>
<h1 className="great avenirnext-medium-black-48px">{great}</h1>
</div>
<div className="text-1 avenirnext-medium-black-24px">{text1}</div>
<div className="overlap-group">
<Rectangle1 />
<div className="place avenirnext-demi-bold-white-36px">{place}</div>
</div>
</div>
);
}
function Rectangle1() {
return <div className="rectangle-1 smart-layers-pointers "></div>;
}
I have copied the jsx and css files from anima and now I am trying to import that into my app.
But I am unable to display it on my app. How can I resolve this?
import React from 'react';
import './success.css';
import success from './success';
const App = () => {
return (
<div>
<success/>
</div>
);
}
export default App;
I checked the react code and it works for me, maybe there's something basic that is not setup correctly. First thing is to try and see if your react code shows a simple hello world text.
I see that you are using anima to import figma and export react code. If you manage to get it work that's great, if not I recommend trying Desech Studio and see if that works for you.
It imports Figma with relative html/css positioning and it exports react code. Here's the github repo for more details.
The success component you imported and exported should start with a capital letter like Success then only react understands that its a component
Setup
I've loaded the Vanilla JS library lightgallery.js through NPM and importing it as normal.
Issue
I'm initializing this library through componentDidMount(), but it's failing to compile because 'lightGallery' is not defined. see sample below
I verified the library is importing by removing componentDidMount() and initializing it through the Chrome Console. When I do this, it works as intended.
I'm not clear on why it's resulting in 'lightGallery' is not defined when the import clearly works when i don't initialize it with componentDidMount(). I'm guessing it's either an issue with the elements not being present in the DOM at load or it's an issue with the way my import is setup.
Any help would be appreciated.
Current Page
This is a stripped down version of my setup with the gallery elements hardcoded for easy explanation.
import React, { Component } from 'react';
import 'lightgallery.js';
class Gallery extends Component {
componentDidMount() {
lightGallery(document.getElementById('lightgallery'));
}
render() {
return (
<>
<section>
<h1>Gallery</h1>
</section>
<section>
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
<a href="img/img3.jpg">
<img src="img/thumb3.jpg" />
</a>
</div>
</section>
</>
);
}
}
export default Gallery;
error - React.Children.only expected to receive a single React element child.
There were quite a few questions with the same context, I tried those solutions but have not found a solution.
The Navbar of the website is what is giving me the error. There is a section over the Navbar which renders properly, when I try to render the Navbar below it throws the error.
import Link from 'next/link'
import Head from '../components/head'
import Download from '../components/nav'
import NavBar from '../components/header'
import Footer from '../components/footer'
import htmlContent from 'html-loader!../legacy/index.html'
const Homepage = () => (
<div>
<Head />
<Download/>
<NavBar />
<div dangerouslySetInnerHTML={{__html: htmlContent}} />
<Footer />
</div>
);
export default Homepage
The footer shows properly, head tag is for all the meta data etc(also works). Github link to all the code is-https://github.com/yohanelly/website-jsx/tree/master/components
The problem is with the whitespace between the Link and the a tag.
<Link href="#"> <a className="menu-links features">Features</a></Link>
should be either
<Link href="#"><a className="menu-links features">Features</a></Link>
or
<Link href="#">
<a className="menu-links features">Features</a>
</Link>
Read the Children in JSX section of the React docs for more info.