Why is my component not loading through Vite

I am building a React project with Vite. I was using a tutorial from an article that I found at https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite.

I followed the tutorial as described, however, my “greeting” component will not load.

import React from 'react';

function greeting() {
  return (
    <div>
      Hello World!
    </div>
  );
}

export default greeting;

import React from 'react';
import greeting from "./greeting";


function App() {
  return (
    <main>
      React⚛️ + Vite⚡ + Replit🌀
      <greeting />
    </main>
  );
}

export default App;

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const container = document.getElementById("root");

const root = createRoot(container);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Answer

Components should start with capital letter .

import React from 'react';

function Greeting() {
  return (
    <div>
      Hello World!
    </div>
  );
}

export default Greeting;




import React from 'react';
import Greeting from "./greeting";


function App() {
  return (
    <main>
      React⚛️ + Vite⚡ + Replit🌀
      <Greeting />
    </main>
  );
}

export default App;

Advertisement

Answer