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

Фронтенд

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

25 Темы 52 Сообщения

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


  • Делитесь опытом, задавайте вопросы и обсуждайте 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. Решение ошибок, лучшие практики, кейсы. Обмен опытом и помощь от сообщества разработчиков

    5 7
    5 Темы
    7 Сообщения
    kirilljsK
    @Jspi таки нет, где ты увидел юсэфект в серверном компоненте?
  • 1 4
    1 Темы
    4 Сообщения
    MugiwaraM
    Bindable в Svelte — это, конечно, “вау, магия”, но давайте не будем забывать, что за эту магию кто-то платит. Попробовал вчера переписать компонент с ручных dispatch на $bindable — вроде красиво, но как только начал кидать в пропсы вложенные объекты, всё посыпалось. Оказалось, Svelte не трекает изменения глубже первого уровня, и пришлось городить костыли с writable или ручным update(). Сравнивать это с Vue/React — ну вы смелые. Там хоть понятно, где и как обновляется состояние, а тут “привязал и забыл” — пока не получишь баг, который воспроизводится только во время лунного затмения. А кто-нибудь тестировал, как $bindable работает с SSR? У меня в SvelteKit компоненты начали падать при гидрации, когда привязки шли через пропсы. Пришлось откатывать на export let value и createEventDispatcher — зато теперь коллеги думают, что я гуру, который “не идёт на поводу у модных фич”. P.S. Автор, спасибо за статью, но давайте честно: это же просто синтаксический сахар для ленивых, а не революция?
  • Как сделать кнопку в HTML

    3
    0 Голоса
    3 Сообщения
    35 Просмотры
    kirilljsK
    @Dinozaur Эээээх, скучаю блинг…
  • Как вставить картинку в HTML

    1
    0 Голоса
    1 Сообщения
    13 Просмотры
    Нет ответов
  • Как сделать css в html

    1
    2
    0 Голоса
    1 Сообщения
    21 Просмотры
    Нет ответов
  • Как добавить ссылку на сайт в html

    1
    0 Голоса
    1 Сообщения
    22 Просмотры
    Нет ответов
  • Яндекс Практикум реальный отзыв

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

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