Перейти к содержанию

Фронтенд

HTML, CSS, JavaScript, React, Vue, Angular, Svelte, UI фреймворки! Адаптивная верстка, оптимизация, Webpack/Vite, SSR. Помощь новичкам, экспертные кейсы, тренды (PWA, JAMstack).

20 Темы 43 Сообщения

Подкатегории


  • Делитесь опытом, задавайте вопросы и обсуждайте Angular. Найдите ответы по разработке на Angular: компоненты, директивы, роутинг, RxJS, NGRX, NGXS, оптимизация и лучшие практики. Актуальные туториалы, решения ошибок и тренды Angular 12+.

    0 0
    0 Темы
    0 Сообщения
    Нет новых сообщений
  • Обсуждайте Vue: компоненты, Vuex, Vue Router, Composition API! Создавайте SPA, оптимизируйте приложения, решайте ошибки. Помощь новичкам, советы по Vue 3.0+, интеграция с Nuxt.js и Vite. Делитесь кодом, изучайте тренды.

    3 11
    3 Темы
    11 Сообщения
    kirilljsK
    @Hater надо
  • Обсуждаем React: JSX, Redux, React Hook Form, MobX, Custom Hooks, Хуки, Zustand, Vite, Webpack, MUI. Поделись опытом, задай вопросы и получи ответы от сообщества разработчиков React. Узнай, как создавать мощные и масштабируемые приложения с помощью React и его экосистемы.

    10 14
    10 Темы
    14 Сообщения
    kirilljsK
    Продолжаю делиться своими находками из React 19, про три важных нововведения: работу с ref, метаданными и обработку ошибок. Эти изменения существенно упрощают разработку и делают код более чистым. Упрощённая передача ref Раньше, чтобы передать ref в компонент, нужно было оборачивать его в forwardRef. Это создавало дополнительный уровень сложности и увеличивало объём кода. В React 19 всё стало гораздо проще — теперь можно передавать ref как обычное свойство! Пример: function CustomButton({ ref }) { return <button ref={ref}>Нажми меня</button>; } // Использование: <CustomButton ref={myButtonRef} />; Теперь не нужно думать о том, как правильно обернуть компонент или следить за тем, чтобы ref был корректно передан. Код стал понятнее и короче. Особенно это полезно для небольших компонентов, где использование forwardRef раньше казалось избыточным. Поддержка метаданных Ещё одно долгожданное изменение — возможность напрямую управлять метатегами (<title>, <meta>, <link>) прямо внутри компонентов. Раньше для этого приходилось использовать сторонние библиотеки, такие как react-helmet. Теперь всё это доступно “из коробки”. Пример: function BlogPost({ post }) { return ( <article> <h1>{post.title}</h1> <title>{post.title}</title> <meta name="description" content={post.summary} /> <meta name="keywords" content={post.tags.join(', ')} /> <p>{post.content}</p> </article> ); } Это особенно удобно для управления SEO-данными. Например, если вы пишете блог или новостной сайт, теперь можно легко динамически обновлять заголовки и метатеги на основе данных, полученных от сервера. Плюс ко всему, это работает быстрее, чем через сторонние решения. Оптимизированная обработка ошибок Ошибки — это неизбежная часть разработки, но React 19 сделал их обработку намного удобнее. Теперь сообщения об ошибках стали более информативными и компактными. Система отображает только одно четкое сообщение, что помогает быстрее находить и исправлять проблемы. Например, раньше при возникновении ошибки могла появиться целая куча текста с трейсами, которые были трудно интерпретировать. Сейчас же вы видите только самое важное: Error: Cannot read properties of undefined (reading 'map') Component: BlogPost Location: src/components/BlogPost.js:25 Это значительно ускоряет процесс отладки, особенно в больших проектах, где раньше приходилось тратить время на анализ огромных логов. Личные впечатления Поработав с этими нововведениями, могу сказать, что они действительно делают жизнь разработчика проще. Вот что мне особенно понравилось: Упрощённая работа с ref: больше никаких лишних обёрток, всё просто и интуитивно. Метаданные: теперь можно забыть про react-helmet и подобные библиотеки. Всё необходимое есть в React. Обработка ошибок: более чёткие сообщения помогают быстрее находить проблемы, а это экономит кучу времени. Если у вас есть опыт использования этих фич или вопросы по ним — пишите в комментариях! Интересно узнать, как эти изменения повлияли на ваши проекты.
  • обсуждение SSR, SSG, API Routes, ISR, оптимизации производительности. Советы по роутингу, деплою (Vercel), интеграции с TypeScript, Tailwind. Решение ошибок, лучшие практики, кейсы. Обмен опытом и помощь от сообщества разработчиков

    4 4
    4 Темы
    4 Сообщения
    kirilljsK
    Next.js сочетает преимущества серверного и клиентского рендеринга, но для реализации интерактивных фич (анимации, обработка событий, локальное состояние) требуется правильно интегрировать клиентскую логику. Щас расскажу и покажу как это сделать легко и просто если вы не умеете читать документацию 🧩 Клиентские компоненты в Next.js Начиная с Next.js 13, фреймворк поддерживает разделение на серверные (Server Components) и клиентские (Client Components). Для активации клиентской логики в файле компонента добавьте директиву: 'use client'; import { useState, useEffect } from 'react'; export default function Counter() { const [count, setCount] = useState(0); useEffect(() => { document.title = `Счетчик: ${count}`; }, [count]); return ( <button onClick={() => setCount(prev => prev + 1)}> Кликнуто {count} раз </button> ); } ️ Без 'use client' компонент будет обрабатываться на сервере, и клиентская логика работать не будет. Взаимодействие с серверными компонентами Серверные компоненты могут использовать клиентские как дочерние элементы: // app/page.tsx (Server Component) import Counter from './Counter'; export default function Home() { return ( <main> <h1>Добро пожаловать!</h1> <Counter /> {/* Клиентский компонент */} </main> ); } В 14 версии клиентские не могли использовать серверные как дочерние, но 15 версия все перевернула с ног на ногу, но об этом потом 🧰 Клиентские функции и API Работа с DOM Используйте useRef для доступа к элементам: const inputRef = useRef<HTMLInputElement>(null); Локальное состояние useState, useReducer, useEffect работают как в обычном React-приложении. Браузерные API Доступны только в useEffect или обработчиках событий: useEffect(() => { window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); Хотя вы наверное и так это знаете, но на всякий случай добавлю! Вдруг нас читают новички!!! ️ Распространенные ошибки Использование window/document на сервере // НЕПРАВИЛЬНО if (typeof window !== 'undefined') { /* Проверка обязательна! */ } // Правильно useEffect(() => { console.log(window.innerWidth); // Только в useEffect или обработчиках }, []); Неинициализированные состояния Избегайте несоответствия между серверным и клиентским рендерингом: const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); return mounted ? <Component /> : <Skeleton />; Оптимизация загрузки Ленивая загрузка клиентских модулей import dynamic from 'next/dynamic'; const HeavyComponent = dynamic(() => import('./HeavyComponent'), { ssr: false, // Отключить серверный рендеринг loading: () => <p>Загрузка...</p>, }); Разделение кода Используйте splitChunks в next.config.js для оптимизации бандла. Полезные ссылки Официальная документация: Client Components Data Fetching в Next.js React Server Components vs Client Components Вопросики имеются? Оставляйте комментарии ниже!
  • 1 4
    1 Темы
    4 Сообщения
    MugiwaraM
    Bindable в Svelte — это, конечно, “вау, магия”, но давайте не будем забывать, что за эту магию кто-то платит. Попробовал вчера переписать компонент с ручных dispatch на $bindable — вроде красиво, но как только начал кидать в пропсы вложенные объекты, всё посыпалось. Оказалось, Svelte не трекает изменения глубже первого уровня, и пришлось городить костыли с writable или ручным update(). Сравнивать это с Vue/React — ну вы смелые. Там хоть понятно, где и как обновляется состояние, а тут “привязал и забыл” — пока не получишь баг, который воспроизводится только во время лунного затмения. А кто-нибудь тестировал, как $bindable работает с SSR? У меня в SvelteKit компоненты начали падать при гидрации, когда привязки шли через пропсы. Пришлось откатывать на export let value и createEventDispatcher — зато теперь коллеги думают, что я гуру, который “не идёт на поводу у модных фич”. P.S. Автор, спасибо за статью, но давайте честно: это же просто синтаксический сахар для ленивых, а не революция?
  • Яндекс Практикум реальный отзыв

    Перенесена
    1
    1
    1 Голоса
    1 Сообщения
    26 Просмотры
    Нет ответов
  • Vue.js и React — необычное сравнение

    10
    1
    3 Голоса
    10 Сообщения
    202 Просмотры
    D
    Vue SFC (однофайловые компоненты) — как аквариум: HTML, JS, CSS плавают рядышком, но не мешают друг другу. JSX — это когда рыбы, водоросли и фильтры свалены в одну кучу, зато можно собрать подводный велосипед.