> ## Documentation Index
> Fetch the complete documentation index at: https://docs.weventures.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# React
> Comprehensive learning guide for React development
## What is React?
React is a **JavaScript library** for building user interfaces, created by Facebook (now Meta). Think of it as a way to build interactive websites using reusable pieces called "components."
**Key Concepts:**
* **Components**: Building blocks of your UI (like LEGO pieces)
* **State**: Data that can change over time (like a counter value)
* **Props**: Data passed from parent to child components (like function arguments)
* **JSX**: HTML-like syntax inside JavaScript
**Why React?**
* Build once, reuse everywhere (components)
* Automatically updates UI when data changes
* Huge ecosystem and community
* Used by Facebook, Instagram, Netflix, Airbnb, and thousands more
**The Mental Model:**
```
Data Changes → React Updates UI Automatically
```
Instead of manually manipulating the DOM, you describe what the UI should look like, and React handles the updates.
React is the foundation of all our frontend applications. We use it with Next.js for full-stack apps and Vite for client-side applications. Our React code follows modern patterns with TypeScript, hooks, and functional components.
## Essential React Concepts
### 1. Components
```tsx theme={null}
// Modern React uses function components
function Welcome({ name }: { name: string }) {
return
Hello, {name}!
}
// With TypeScript interface
interface UserProps {
name: string
age: number
isActive?: boolean
}
function UserCard({ name, age, isActive = false }: UserProps) {
return (
{name}
Age: {age}
{isActive && 🟢 Active}
)
}
```
```tsx theme={null}
// Old pattern - avoid in new code
class Welcome extends React.Component<{ name: string }> {
render() {
return
Hello, {this.props.name}!
}
}
```
### 2. State Management
```tsx useState Hook theme={null}
import { useState } from 'react'
function Counter() {
const [count, setCount] = useState(0)
return (
)
}
return this.props.children
}
}
```
### 3. Performance Debugging
```tsx theme={null}
import { Profiler } from 'react'
function onRenderCallback(
id: string,
phase: 'mount' | 'update',
actualDuration: number,
baseDuration: number,
startTime: number,
commitTime: number
) {
console.log({ id, phase, actualDuration })
}
function App() {
return (
)
}
```
## Testing Commands
### Next.js + React
```bash Development theme={null}
# Start dev server
npm run dev
# or
pnpm dev
# Specific port
npm run dev -- -p 3001
# TypeScript check
npm run type-check
# or
npx tsc --noEmit
# Lint
npm run lint
# Build
npm run build
# Start production server
npm run start
```
```bash Testing theme={null}
# Run tests
npm test
# or
pnpm test
# Watch mode
npm test -- --watch
# Coverage
npm test -- --coverage
# E2E tests (if using Playwright)
npx playwright test
# Specific test file
npm test -- UserCard.test.tsx
```
```bash Debugging theme={null}
# Debug with Node inspector
NODE_OPTIONS='--inspect' npm run dev
# Check bundle size
npm run build
npx @next/bundle-analyzer
# Analyze build
ANALYZE=true npm run build
```
### Vite + React
```bash Development theme={null}
# Start dev server
npm run dev
# or
pnpm dev
# Specific port
npm run dev -- --port 3001
# Open in browser
npm run dev -- --open
# TypeScript check
npx tsc --noEmit
# Build
npm run build
# Preview production build
npm run preview
```
```bash Testing with Vitest theme={null}
# Run tests
npm test
# or
npx vitest
# Watch mode (default)
npx vitest watch
# Run once
npx vitest run
# Coverage
npx vitest --coverage
# UI mode
npx vitest --ui
```
```bash Debugging theme={null}
# Debug in browser
npm run dev
# Build analysis
npm run build
npx vite-bundle-visualizer
# Check dependencies
npm ls react
```
## Common Issues & Solutions
**Problem:** Old React versions required importing React
**Solution:**
```tsx theme={null}
// Not needed in React 17+
// import React from 'react' ❌
// Use new JSX transform (automatic)
export default function App() {
return
Hello
}
```
**Problem:** Setting state during render causes infinite loop
**Solution:**
```tsx theme={null}
// ❌ Wrong
function Bad() {
const [count, setCount] = useState(0)
setCount(1) // Causes infinite loop!
return
{count}
}
// ✅ Correct
function Good() {
const [count, setCount] = useState(0)
useEffect(() => {
setCount(1) // OK in effect
}, [])
return
{count}
}
```
**Problem:** Missing or wrong dependencies
**Solution:**
```tsx theme={null}
// ❌ Wrong - runs on every render
useEffect(() => {
fetchData()
}) // No dependency array!
// ❌ Wrong - object/array recreated each render
useEffect(() => {
fetchData(filter)
}, [filter]) // If filter is an object
// ✅ Correct
useEffect(() => {
fetchData()
}, []) // Run once
// ✅ Or memoize objects
const filter = useMemo(() => ({ status: 'active' }), [])
useEffect(() => {
fetchData(filter)
}, [filter])
```
**Problem:** Arrow functions vs regular functions
**Solution:**
```tsx theme={null}
// ❌ Wrong (class component)
**Problem:** Missing unique key for list items
**Solution:**
```tsx theme={null}
// ❌ Wrong
{items.map(item =>