Question 223386 in Html Question posted in
Some basic documentation can be found here.

Html – I am new to react, I have a query in following code in VS studio in importing a function

I am not able to import function Navbar, I get a blank output but if I try to build the function in file.js it works so there should be error in how I import it. Any advice? in Here are my 3 files:
navbar.js

export default function Navbar(){
    return<nav className="Navbar">
        <a href="/" className="site-title">
            Hello name of the site
        </a>
        <ul>
            <li>
                <a href="/pricing_option1">Pricing_option1</a>
                <a href="/pricing_option2">pricing_option2</a>
            </li>
        </ul>
    </nav>

}

index.html

<html>
    <head>
        <link rel="stylsheet" href="index.css">
        <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>

        <script src="file.js" type="text/babel" ></script>
    </body>
</html>

file.js

import Navbar from "./navbar"



ReactDOM.render(<div>
    <Navbar />
  </div>, document.getElementById("root"))

Output: blank

if I try to build the function in file.js it works so there should be error in how I import it.

Tags:

2

Answers


  1. 0

    NavBar.js:

    import React from "react";
export default function Navbar() {
  return (
    <nav className="Navbar">
      <a href="/" className="site-title">
        Hello name of the site
      </a>
      <ul>
        <li>
          <a href="/pricing_option1">Pricing_option1</a>
          <a href="/pricing_option2">pricing_option2</a>
        </li>
      </ul>
    </nav>
  );
}

    index.html:

    <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="index.css">
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script src="file.js" type="module"></script>
</body>
</html>

    file.js:

    import React from "react";
import ReactDOM from "react-dom";
import Navbar from "./navbar";

ReactDOM.render(
  <div>
    <Navbar />
  </div>,
  document.getElementById("root")
);
    Login or Signup to reply.
  2. 0

    Try this:

    Delete export default function Navbar

    Insert export default Navbar; on the bottom of your file.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search