Cannot import components with React-CodePudding

So I'm getting into React and I cannot see my components, only my background image of the CSS.

Here is my App.jsx:

import React from 'react'
import Header from './components/header/Header'
import Nav from './components/nav/Nav'
import About from './components/about/About'
import Experience from './components/experience/Experience'
import Services from './components/services/Services'
import Portfolio from './components/Portfolio/Portfolio'
import Testimonials from './components/Testimonials/Testimonials'
import Contact from './components/contact/Contact'
import Footer from './components/footer/Footer'

const App = () => {
  return (
    <>
      <Header />
      <Nav />
      <About />
      <Experience />
      <Services />
      <Portfolio />
      <Testimonials />
      <Contact />
      <Footer />
    </>   
  )
}

export default App

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Ultimate React Personal Portfolio Website</title>
   
</head>
<body>
    <div id="root"></div>
</body>
</html>

What am I doing wrong?

I've changed import React from 'react to import React from 'react-dom' to no avail. Please help

My apologies, I removed a confusing section and included snippets for further clarification.

Here is a screenshot of my project folders

Also here is my index.js:

import ReactDOM from 'react-dom'
import App from './App'
import './style.css'

ReactDOM.render(<App/>, document.querySelector("#root"))

CodePudding user response：

Until I do not see the logs from your console I can only assume what I am wrong.
This is a very fresh post and I assume you are using the latest version of react 18.
Hopefully this will help :)

// React 17 
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App/>, document.querySelector("#root"))

// React 18
import ReactDOM from 'react-dom/client'
const container = document.getElementById('app')
const root = ReactDOM.createRoot(container) // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />)