App.tsx blank when running debug without any errors

Question

Hello everyone i have stucked on this code why this leave blank without showing any errors did i miss a library or i missplace something here the code i wanted to create some resuable component and ask question on chat gpt and create this 2 files for component

nabvar.tsx

import React from 'react';

interface NavbarProps {
  links: { text: string, url: string }[];
}

const Navbar: React.FC<NavbarProps> = ({ links }) => {
  return (
    <nav className="navbar"
         style={{
           position: 'absolute',
           width: '707px',
           height: '57px',
           left: '1665px',
           top: '94px',
           filter: 'drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))',
           backdropFilter: 'blur(2px)' /* Note: backdrop-filter has minimal browser support */
         }}>
      {links.map(link => (
        <a key={link.url} href={link.url} className="navbar__link">{link.text}</a>
      ))}
    </nav>
  );
};

export default Navbar;

And then this for image

image.tsx

import React from 'react';

interface ImageProps {
  src: string;
}

const Image: React.FC<ImageProps> = ({ src }) => {
  return (
    <div
      style={{
        position: 'absolute',
        width: '2437px',
        height: '1285px',
        left: '14px',
        top: '0px',
        background: `url(${src})`,
        backdropFilter: 'blur(2px)' /* Note: backdrop-filter has minimal browser support */
      }}
    />
  );
};

export default Image;

And the last was my APP.tsx

import React from 'react';
import Navbar from './components/navbar/navbar';
import Image from './components/header/image';

function App() {
  const links = [
    { text: 'Home', url: '#' },
    { text: 'About', url: '#' },
    { text: 'Contact', url: '#' },
  ];

  return (
    <div className="App">
      <Image src="../assets/Background/background.png" />
      <Navbar links={links} />
    </div>
  );
}

export default App;

did i missplace some code or i need to create to read inside component folder like index.tsx?

i need to know what is missing on my code because when run start the web is blank

Answer 1

just rename your files, for example: Nabvar.tsx, Image.tsx, App.tsx.

Components must be capitalized first letter of their names.