react render don't show anything-CodePudding

I created this navbar component in react

import './nav.css';
import react from 'react'

export default function NavBar() {
  return (

    // bootstrap navbar component
<div className = "NavDiv ml-auto"> 
<div className = "topPortion "  >
<nav className="navbar navbar-expand-lg navbar-dark ">
  <div className="container-fluid">
    <a className="navbar-brand" href="#">Get the app</a>
    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse ms-auto justify-content-end " id="navbarNav">
      <ul className="navbar-nav ms-auto ">
       
        <li className="nav-item">
          <a className="nav-link active " href="#">
          Add Restaurant
          </a>
        </li>
        <li className="nav-item">
          <a className="nav-link active" href="#">Login</a>
        </li>
        <li className="nav-item">
          <a className="nav-link active">SignUp</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
</div>
<img className= "zomatoPic" src = "https://b.zmtcdn.com/web_assets/8313a97515fcb0447d2d77c276532a511583262271.png" alt= "zomato name pic" />
<h2 className="zomatoPic2"> Discover the best food & drinks in chennai </h2>
</div>
 );
}

and imported it in the app.js

import react from "react";
const NavBar = import('./NavBar')



function App() {
    


    return <NavBar />

    


    
}

export default App

and then I imported this to the main index.js and tried to render using ReactDOM.render like this

import React from 'react';
import ReactDOM from 'react-dom';

const App = import('./components/App')
ReactDOM.render(<App />, document.getElementById("root"))

but not getting any output and only a blank screen.

this is the locaiton of the files

this is my index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- bootstrap stylesheet -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>React App</title>
  </head>
  <body>
    
    
    <div id="root"></div>
  
  
  
  
  </body>
  <!-- bootstrap script -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704 h835Lr 6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</html>

and this is my nav.css folder that styles the navbar component



.NavDiv {

    width: 100%;
    height: 30rem;
    background-image: url("https://b.zmtcdn.com/web_assets/81f3ff974d82520780078ba1cfbd453a1583259680.png");
    background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
}

.topPortion {

    padding : 0 200px 0 20px;
}


.zomato {
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 5rem;
}
h1{
    font-size: 5rem;
}

.zomatoPic2{
    display: block;
width : 50rem;
    margin-right: auto;
margin-left: auto;
}
img{
    display: block;

    justify-content: center;
    width: 20rem;
    margin-right: auto;
margin-left: auto;
color: #fff;
}

I Don't know why it is not rendering anything.

CodePudding user response：

You're using import(), which is for dynamic imports and returns a promise.

You'll need the static import form

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById("root"));

instead. The same stands for the import of NavBar in the app file.

Secondly, in the NavBar file, you need to import React as React, not react:

import React from 'react';

CodePudding user response：

Static import is useful when you required your component to mounted during complete application run time . Even different different route will open but static component will always present and will be mounted.

Dynamic import is useful where you want your component to unmount when you navigate to different route.

Dynamic import is supported in react using lazy() and Suspence.

Dynamic import should be bottom of static import otherwise you will get Error

import Snackbar from "./component/shared/Snackbar"
const Dashbaord = lazy(() => import("./screens/admin/Dashboard"))
const Profile = lazy(() => import("./screens/admin/Profile"))

Then you can use Suspense to mount dynamic component with fallback loading.

export default function App() {
    return (
        <Suspence fallback={<p>Loading Screens...</p>}>
            {/* suppose you are working with react-router-dom v6 */}
            <Routes>
                <Route path="/admin" element={<AdminLayout />}>
                    <Route path="dashboard" element={<Dashbaord />} />
                    <Route path="profile" element={<Profile />} />
                </Route>
            </Routes>
        </Suspence >
    )
}

Fallback helps to show some placeholder when your component will loading and going to mount.