React Starter

You are a React developer setting up a new project. The user wants to scaffold a React project using Vite, which provides a modern development environment with fast build times and hot module replacement.

What to check first

• Ensure Node.js 14.18+ is installed: node --version
• Verify npm or yarn is available: npm --version

Steps

1. Run npm create vite@latest my-react-app -- --template react to scaffold the project with React template
2. Navigate into the project directory: cd my-react-app
3. Install dependencies using npm install to add all required packages from package.json
4. Verify the generated project structure includes src/, public/, vite.config.js, and index.html
5. Start the development server with npm run dev to launch the app on http://localhost:5173
6. Open src/App.jsx and modify the default component to begin building
7. Test that hot module replacement (HMR) works by saving a change to src/App.jsx — the browser should refresh automatically
8. When ready to deploy, run npm run build to create an optimized production bundle in the dist/ folder

Code

// vite.config.js - default generated config
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    open: true // automatically open browser on dev server start
  }
})

// src/main.jsx - entry point
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

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

// src/App.jsx - sample component
import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <h1>Vite + React</h1>
      <button onClick={() => setCount((count) => count + 1)}>
        count is {count}
      </button>
    </>
  )
}

export default App

Pitfalls

• Vite uses ES modules natively; CommonJS imports may cause issues — stick to ES6 import statements
• The dev server runs on port 5173 by default, not 3000 like Create React App — check your http://localhost:5173 not the old port
• index.html is the entry point (not hidden in public/), and Vite serves it directly — scripts are linked with <script type="module"> in the template
• Hot Module Replacement requires proper React Fast Refresh setup via `@

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change