To add a new component to your React Vite project follow these simple steps:

1. Create a directory components in the src directory
$ mkdir src/components

2. Create a navigation file in the components directory
$ touch src/components/navigation.jsx

3. Open navigation.jsx
$ code src/components/navigation.jsx

4. Add the following code to navigation.jsx

import React from 'react'

export const Navigation = () => {
  return (
    <div>Navigation</div>
  )
}
export default Navigation

5. Import navigation.jsx to App.jsx

import Navigation from "./components/Navigation"

function App() {
  return (
    <div className="max-w-6xl m-auto ">
      <Navigation />
      <h1>Welcome</h1>
    </div>
  )
}

export default App

6. Start the server
$ npm run dev

OUPUT:

> [email protected] dev
> vite


  VITE v4.0.3  ready in 627 ms

  âžœ  Local:   http://127.0.0.1:5173/
  âžœ  Network: use --host to expose
  âžœ  press h to show help

 

 

 

React Vite - How To Add A Route With Component