Frontend Development

<!-- ❌ Yomon - faqat div ishlatish -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>

<!-- ✅ Yaxshi - semantic HTML -->
<header>
    <nav aria-label="Main navigation">
        <ul>
            <li><a href="/">Home</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <h1>Sarlavha</h1>
        <section>...</section>
    </article>
    <aside>Sidebar</aside>
</main>

<footer>...</footer>

/* FLEXBOX - bir o'qli layout */
.flex-container {
    display: flex;
    justify-content: space-between;  /* gorizontal */
    align-items: center;           /* vertikal */
    gap: 1rem;
    flex-wrap: wrap;               /* keyingi qatorga o'tish */
}

/* CSS GRID - ikki o'qli layout */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 teng ustun */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

/* Responsive grid */
.responsive-grid {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .responsive-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Root da global o'zgaruvchilar */
:root {
    --color-primary: #7C5CFF;
    --color-secondary: #27D7C4;
    --font-size-base: 16px;
    --spacing-unit: 8px;
    --border-radius: 12px;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0B1020;
        --color-text: #E8EEF8;
    }
}

/* Ishlatish */
.button {
    background: var(--color-primary);
    padding: calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius);
}

// 1. DESTRUCTURING
const user = { name: 'Ali', age: 25, city: 'Tashkent' };
const { name, age } = user;  // object destructuring

const colors = ['red', 'green', 'blue'];
const [first, second] = colors;  // array destructuring

// 2. SPREAD & REST
const newUser = { ...user, email: 'ali@mail.com' };  // spread
const [head, ...tail] = colors;  // rest

// 3. ARROW FUNCTIONS
const add = (a, b) => a + b;
const greet = name => `Hello, ${name}!`;  // template literal

// 4. ASYNC/AWAIT
async function fetchUser(id) {
    try {
        const response = await fetch(`/api/users/${id}`);
        if (!response.ok) throw new Error('User not found');
        return await response.json();
    } catch (error) {
        console.error('Error:', error);
    }
}

// 5. OPTIONAL CHAINING & NULLISH COALESCING
const city = user?.address?.city ?? 'Unknown';

// 6. ARRAY METHODS
const adults = users
    .filter(u => u.age >= 18)
    .map(u => u.name)
    .sort();

// 7. ES MODULES
import { useState, useEffect } from 'react';
export default function Component() { }

import { useState, useEffect } from 'react';

interface User {
    id: number;
    name: string;
    email: string;
}

export function UserCard({ userId }: { userId: number }) {
    const [user, setUser] = useState<User | null>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        async function fetchUser() {
            try {
                const res = await fetch(`/api/users/${userId}`);
                if (!res.ok) throw new Error('Failed to fetch');
                setUser(await res.json());
            } catch (e) {
                setError(e.message);
            } finally {
                setLoading(false);
            }
        }
        fetchUser();
    }, [userId]);

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error}</div>;
    if (!user) return null;

    return (
        <div className="user-card">
            <h2>{user.name}</h2>
            <p>{user.email}</p>
        </div>
    );
}

import { create } from 'zustand';

interface CartStore {
    items: CartItem[];
    addItem: (item: CartItem) => void;
    removeItem: (id: string) => void;
    clearCart: () => void;
    total: () => number;
}

export const useCartStore = create<CartStore>((set, get) => ({
    items: [],
    addItem: (item) => set((state) => ({ 
        items: [...state.items, item] 
    })),
    removeItem: (id) => set((state) => ({ 
        items: state.items.filter(i => i.id !== id) 
    })),
    clearCart: () => set({ items: [] }),
    total: () => get().items.reduce((sum, i) => sum + i.price, 0),
}));

// Ishlatish
function CartButton() {
    const { items, addItem } = useCartStore();
    return <span>Cart: {items.length}</span>;
}

# React + TypeScript
npm create vite@latest my-app -- --template react-ts

# Vue + TypeScript
npm create vite@latest my-app -- --template vue-ts

# Svelte
npm create vite@latest my-app -- --template svelte-ts

# Ishga tushirish
cd my-app
npm install
npm run dev

import { lazy, Suspense } from 'react';

// Komponentni lazy yuklash
const HeavyChart = lazy(() => import('./HeavyChart'));

function Dashboard() {
    return (
        <div>
            <h1>Dashboard</h1>
            <Suspense fallback={<div>Loading chart...</div>}>
                <HeavyChart />
            </Suspense>
        </div>
    );
}

<!-- ❌ Yomon -->
<div onclick="submit()">Submit</div>

<!-- ✅ Yaxshi -->
<button
    type="submit"
    aria-label="Submit form"
    disabled={isLoading}
>
    {isLoading ? 'Loading...' : 'Submit'}
</button>

<!-- Image with alt -->
<img
    src="user.jpg"
    alt="John Doe - Software Engineer"
    loading="lazy"
/>

<!-- Form with labels -->
<label for="email">Email address</label>
<input
    id="email"
    type="email"
    aria-describedby="email-hint"
    required
/>
<span id="email-hint">We'll never share your email</span>

import { render, screen, fireEvent } from '@testing-library/react';
import { Counter } from './Counter';

describe('Counter', () => {
    it('increments count when button clicked', () => {
        render(<Counter />);
        
        const button = screen.getByRole('button', { name: /increment/i });
        const count = screen.getByText(/count: 0/i);
        
        expect(count).toBeInTheDocument();
        
        fireEvent.click(button);
        
        expect(screen.getByText(/count: 1/i)).toBeInTheDocument();
    });

    it('is accessible', async () => {
        const { container } = render(<Counter />);
        const results = await axe(container);
        expect(results).toHaveNoViolations();
    });
});

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

// GET request
function useUsers() {
    return useQuery({
        queryKey: ['users'],
        queryFn: () => fetch('/api/users').then(r => r.json()),
        staleTime: 5 * 60 * 1000, // 5 min cache
    });
}

// POST request with cache invalidation
function useCreateUser() {
    const queryClient = useQueryClient();
    
    return useMutation({
        mutationFn: (newUser) => fetch('/api/users', {
            method: 'POST',
            body: JSON.stringify(newUser),
        }),
        onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: ['users'] });
        },
    });
}

// Ishlatish
function UserList() {
    const { data, isLoading, error } = useUsers();
    const createUser = useCreateUser();
    
    if (isLoading) return <Skeleton />;
    if (error) return <Error message={error.message} />;
    
    return <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}