setup react with swc

Perfect 👌 I’ll give you a clean React + TypeScript + Vite + SWC + Bootstrap + React Router starter template.

This setup will:

Use Vite as bundler
Use SWC (@vitejs/plugin-react-swc) instead of Babel
Add Bootstrap styling
Add React Router v6 for pages & navigation
Include a Navbar + Footer layout

📂 Project Structure

my-app/
├── index.html
├── vite.config.ts
├── tsconfig.json
├── src/
│   ├── main.tsx
│   ├── App.tsx
│   ├── layouts/
│   │   └── MainLayout.tsx
│   ├── pages/
│   │   ├── Home.tsx
│   │   ├── About.tsx
│   │   └── NotFound.tsx
│   └── components/
│       ├── Navbar.tsx
│       └── Footer.tsx

⚙️ vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [react()],
})

🟦 src/main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

// Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
)

🟩 src/App.tsx

import { Routes, Route } from 'react-router-dom'
import MainLayout from './layouts/MainLayout'

import Home from './pages/Home'
import About from './pages/About'
import NotFound from './pages/NotFound'

function App() {
  return (
    <MainLayout>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </MainLayout>
  )
}

export default App

🏗️ src/layouts/MainLayout.tsx

import Navbar from '../components/Navbar'
import Footer from '../components/Footer'
import { ReactNode } from 'react'

type Props = {
  children: ReactNode
}

export default function MainLayout({ children }: Props) {
  return (
    <div className="d-flex flex-column min-vh-100">
      <Navbar />
      <main className="container flex-grow-1 py-4">
        {children}
      </main>
      <Footer />
    </div>
  )
}

🧭 src/components/Navbar.tsx

import { Link } from 'react-router-dom'
import { Navbar as BsNavbar, Nav, Container } from 'react-bootstrap'

export default function Navbar() {
  return (
    <BsNavbar bg="dark" variant="dark" expand="lg">
      <Container>
        <BsNavbar.Brand as={Link} to="/">MyApp</BsNavbar.Brand>
        <BsNavbar.Toggle aria-controls="basic-navbar-nav" />
        <BsNavbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link as={Link} to="/">Home</Nav.Link>
            <Nav.Link as={Link} to="/about">About</Nav.Link>
          </Nav>
        </BsNavbar.Collapse>
      </Container>
    </BsNavbar>
  )
}

🦶 src/components/Footer.tsx

export default function Footer() {
  return (
    <footer className="bg-light text-center py-3 mt-auto border-top">
      <small>&copy; {new Date().getFullYear()} MyApp. All rights reserved.</small>
    </footer>
  )
}

📄 src/pages/Home.tsx

export default function Home() {
  return <h1>Welcome to MyApp 🚀</h1>
}

📄 src/pages/About.tsx

export default function About() {
  return <h1>About Page</h1>
}

📄 src/pages/NotFound.tsx

export default function NotFound() {
  return <h1>404 - Page Not Found</h1>
}

🚀 Run it

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm install react-router-dom bootstrap react-bootstrap @vitejs/plugin-react-swc -D
npm run dev

This gives you a modern, fast, bootstrap-styled React app with layouts.

👉 Do you also want me to wire this into file-based routing (like Next.js style with vite-plugin-pages), or are you happy with plain react-router-dom + layouts for now?

jpalala/how-to-react-swc-boilerplate.md