import { createRoot } from 'react-dom/client';

function App() {
  return (
    <h1>Hello from React!</h1>
  );
}

const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(<App />);

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  base: '',
  publicDir: 'public',
  build: {outDir: 'dist'},
  plugins: [react(), svgr()],
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'components'),
      '@pages': path.resolve(__dirname, 'pages'),
      '@styles': path.resolve(__dirname, 'styles'),
      '@assets': path.resolve(__dirname, 'assets'),
    }
  }
});

// 1) directory & component 생성
components/
pages/
styles/
assets/

// 2) import styles, pages, components 임포트
import '@styles/styles.scss';
import MainIndex from '@pages/main';
import { Header } from '@components/header';

// 3) assets 이미지 및 SVG 임포트
import ReactLogo from '@assets/images/react-logo.svg';
import viteLogo from '@assets/images/vite-logo.png';
<img src={ReactLogo} alt="react logo" />
<img src={viteLogo} alt="vite logo" />

// app
import { BrowserRouter, Routes, Route } from 'react-router-dom';
<BrowserRouter>
  <Routes>
    <Route path="" element={} />
  </Routes>
</BrowserRouter>

// header
import { Link } from 'react-router-dom';
<Link to=""></Link>