Question 136357 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – Importing a component from another JS file using React

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.

Tags:

2

Answers


  1. 0

    Try using this import:

    import Header from "./Header"

    Maybe show your folder structure, if it is not working.

    Login or Signup to reply.
  2. 0 
    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>
        );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search