React Vite SPA Assistant
Expert guidance for developing React single-page applications built with Vite, focusing on component architecture, asset management, and modern frontend workflows.
What This Skill Does
This skill provides specialized knowledge for working with React applications bootstrapped with Vite. It helps developers navigate project structure, follow established conventions, implement new features, manage static assets, and utilize Vite's build tooling effectively.
Instructions
1. Understand the Project Architecture
When working with this codebase:
**Entry Point**: `src/index.jsx` renders the main `App` component**Main Component**: `src/App.jsx` contains the core UI layout**Static Assets**: Located in `public/` directory, referenced by relative path**Configuration**: `vite.config.js` controls build and dev server settings**Dependencies**: Managed via `package.json`2. Follow Project Conventions
Always adhere to these established patterns:
Use **functional React components** with hooks (no class components)**Colocate CSS** with components (e.g., `App.css` alongside `App.jsx`)Reference static assets from `public/` using **relative paths** (e.g., `src="Octocat.png"`)This is a **frontend-only** starter with no backend/API integrationNo custom routing or state management libraries are included by default3. Development Workflow Commands
Guide users through these standard workflows:
**Start Development Server**: `npm start` (launches Vite dev server with hot module reloading)**Run Tests**: `npm test` (executes tests in watch mode)**Production Build**: `npm run build` (creates optimized bundle in `build/` directory)4. Adding New Components
When creating new components:
```jsx
// src/MyComponent.jsx
export default function MyComponent() {
return <div>Hello!</div>;
}
```
Then import into `App.jsx`:
```jsx
import MyComponent from './MyComponent';
// Inside App component
<MyComponent />
```
5. Managing Static Assets
For images, icons, and other static files:
**Place files** in the `public/` directory**Reference by filename** in components:```jsx
<img src="Octocat.png" alt="Octocat" />
```
6. Advanced Configuration
For build customization or plugin integration:
Edit `vite.config.js` to modify Vite behaviorConsult [Vite documentation](https://vitejs.dev/guide/) for available options7. Integration Points
When extending the application:
**New pages/components**: Create in `src/` and import into `App.jsx`**Static assets**: Add to `public/` and reference by filename**Routing**: Install `react-router-dom` if multi-page navigation is needed**State management**: Add Redux, Zustand, or Context API as requirements grow**API integration**: Implement fetch/axios calls and manage in custom hooks or servicesExamples
Display an Image from Public Directory
```jsx
<img src="Octocat.png" alt="GitHub Octocat mascot" />
```
Create and Use a New Component
```jsx
// src/Greeting.jsx
export default function Greeting({ name }) {
return <h2>Welcome, {name}!</h2>;
}
// In App.jsx
import Greeting from './Greeting';
function App() {
return (
<div>
<Greeting name="Developer" />
</div>
);
}
```
Add Component-Specific Styling
```jsx
// src/Card.jsx
import './Card.css';
export default function Card({ title, content }) {
return (
<div className="card">
<h3>{title}</h3>
<p>{content}</p>
</div>
);
}
```
```css
/* src/Card.css */
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
margin: 8px 0;
}
```
Important Notes
This is a **frontend-only** starter template with no backend included**No routing library** is present by default; add `react-router-dom` if needed**Hot module reloading** is enabled during development via ViteStatic assets in `public/` are served at the root pathUpdate this documentation when project structure or conventions changeReferences
[Vite Documentation](https://vitejs.dev/guide/)[React Documentation](https://reactjs.org/)[Vite React Plugin](https://github.com/vitejs/vite-plugin-react)