Getting a Vite + React app on the screen

Closest thing to npm create vue@latest energy - just swap the default logo and you're in familiar territory.

I've decided to stick with Vite + React + TypeScript for the SPA half of this tutorial. It's the setup that feels most like a modern Vue SPA: fast HMR, simple config, you own the router and data layer.

Scaffold

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run dev

Comments for the code above:

• react-ts gives you TypeScript out of the box (worth it)
• Dev server is Vite - same vibes as Vue + Vite
• You'll open something like http://localhost:5173

What the folder looks like

my-react-app
|-- index.html
|-- package.json
|-- vite.config.ts
|-- tsconfig.json
|-- src
|   |-- main.tsx        # createRoot, mount
|   |-- App.tsx         # root component
|   |-- App.css
|   |-- index.css
|   |-- assets/

Compare to Vue: main.ts + App.vue → main.tsx + App.tsx. No SFC compiler, no *.vue files.

The mount point

// src/main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

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

Comments for the code above:

• createRoot is the modern React 18+ mount API (like createApp(App).mount('#app'))
• StrictMode double-invokes some stuff in dev on purpose - effects may run twice. Don't panic, it's a feature 😅
• #root lives in index.html - same idea as Vue's #app

App.tsx is just a function

// src/App.tsx
function App() {
  return (
    <h1>Hello from React</h1>
  )
}

export default App

As you can see - no setup(), no return { } from Options API. The return value is the UI.

Scripts you'll actually use

Script	What it does
npm run dev	Vite dev server
npm run build	production build to dist/
npm run preview	serve the production build locally

Same muscle memory as a Vite Vue project.

Next: JSX - the part that looks weird for about two days and then becomes boring.

-- ł.