React

RSC From Scratch. Часть 1: Серверные компоненты В этом техническом погружении мы с нуля реализуем очень упрощенную версию React Server Components (RSC). Это глубокое погружение будет опубликовано в нескольких частях: Это глубокое погружение не объясняет преимущества React Server Components, как реализовать приложение с использованием RSC или как реализовать фреймворк с их использованием. Вместо этого он проведет вас через процесс их самостоятельного "изобретения" с нуля. 🔬 Это глубокое погружение для тех, кто любит изучать новые технологии, внедряя их с нуля. Предполагает наличие некоторого опыта в веб-программировании и знакомство с React. 🚧 Это глубокое погружение не предназначено для ознакомления с тем, как использовать серверные компоненты. Мы работаем над документированием серверных компонентов на сайте React. Пока же, если ваш фреймворк поддерживает Server Components, обратитесь к его документации. 😳 По педагогическим соображениям наша реализация будет значительно менее эффективной, чем реальная, используемая в React. Мы будем указывать в тексте будущие возможности оптимизации, но концептуальная ясность будет для нас приоритетнее эффективности. https://github.com/reactwg/server-components/discussions/5 ✍️ @React_lib

Реализация аудио в React-сайтах Очень важно удержать пользователя на сайте и заставить его провести на нем как можно больше времени. Очень полезным, но малораспространенным методом привлечения внимания пользователя является звук. В этой статье мы рассмотрим, как реализовать звук на сайте React и как использовать хук useSound для добавления звуковых эффектов в компоненты React. https://blog.openreplay.com/implementing-audio-in-react-websites/ ✍️ @React_lib

Курс Python-разработчик. Трудоустройство через 7 месяцев Наши выпускники уже попали в VK, «Сбер», «Тинькофф» — и в сотни других компаний. Перейти на сайт #реклама 16+ skillbox.ru О рекламодателе

Аутентификация JWT в React с помощью react-router В этой статье мы рассмотрим бесшовную интеграцию JWT-аутентификации с React и react-router. Мы также узнаем, как работать с публичными маршрутами, защищать аутентифицированные маршруты и использовать библиотеку axios для выполнения API-запросов с маркером аутентификации. https://dev.to/sanjayttg/jwt-authentication-in-react-with-react-router-1d03 ✍️ @React_lib

Курс «Фулстек-разработчик» от Яндекса. Начните с нуля. 1) Программа 2023 года и самые актуальные технологии. 2) HTML, CSS, JavaScript, TypeScript, React, Node.js, Docker и алгоритмы. 3) Реальные проекты в портфолио, карьерная поддержка Попробуйте курс бесплатно Зарегистрироваться #реклама 16+ practicum.yandex.ru О рекламодателе

Построение анимированной выдвижной панели вкладок с помощью React и Tailwind CSS В этом руководстве мы рассмотрим, как создать интерактивную выдвижную панель вкладок с помощью React.js и Tailwind CSS. Мы рассмотрим основы настройки структуры вкладок, добавления интерактивности с помощью React и оформления вкладок для создания элегантного отзывчивого дизайна. Если вы новичок в React или хотите расширить свой набор инструментов для работы с внешним миром, эта статья предлагает практическое погружение в создание динамических компонентов пользовательского интерфейса. let allTabs = [ { id: "home", name: "Home", }, { id: "blog", name: "Blog", }, { id: "projects", name: "Projects", }, { id: "arts", name: "Arts", }, ]; export const SlidingTabBar = () => { const tabsRef = useRef<(HTMLElement | null)[]>([]); const [activeTabIndex, setActiveTabIndex] = useState<number | null>(null); const [tabUnderlineWidth, setTabUnderlineWidth] = useState(0); const [tabUnderlineLeft, setTabUnderlineLeft] = useState(0); useEffect(() => { if (activeTabIndex === null) { return; } const setTabPosition = () => { const currentTab = tabsRef.current[activeTabIndex] as HTMLElement; setTabUnderlineLeft(currentTab?.offsetLeft ?? 0); setTabUnderlineWidth(currentTab?.clientWidth ?? 0); }; setTabPosition(); }, [activeTabIndex]); return ( <div className="flew-row relative mx-auto flex h-12 rounded-3xl border border-black/40 bg-neutral-800 px-2 backdrop-blur-sm"> <span className="absolute bottom-0 top-0 -z-10 flex overflow-hidden rounded-3xl py-2 transition-all duration-300" style={{ left: tabUnderlineLeft, width: tabUnderlineWidth }} > <span className="h-full w-full rounded-3xl bg-gray-200/30" /> </span> {allTabs.map((tab, index) => { const isActive = activeTabIndex === index; return ( <button key={index} ref={(el) => (tabsRef.current[index] = el)} className={`${ isActive ? `` : `hover:text-neutral-300` } my-auto cursor-pointer select-none rounded-full px-4 text-center font-light text-white`} onClick={() => setActiveTabIndex(index)} > {tab.name} </button> ); })} </div> ); }; https://www.julienthibeaut.xyz/blog/build-animated-sliding-tab-bar-with-react-tailwind-css ✍️ @React_lib

Желаем Вам счастливого Дня Рождения Аяза! Ребята, вы издеваетесь? Я пришёл за вами и в Telegram! Я уже сто раз показывал вам свою модель бизнеса, чтобы просто её скопировать, но вы всё ещё не попробовали! К своему Дню Рождения я решил обнулиться. Переехал из Москвы в Казань, отказался от денег, изменил внешность и имя А всё для того, чтобы на своем примере показать, как с нуля стартовать бизнес и сколько можно заработать за неделю Я на себе проверю, работают ли связки, о которых говорю. Тебе остаётся только смотреть и повторять Зачем мне это? Я устал смотреть, как амбициозные, талантливые ребята даже банально айфон не могут себе взять без кредита. Схема простая, как табуретка. Все, кто её уже получили, так говорят. Быть надо 100% Реалити бесплатное, просто переходи по ссылке, регистрируйся и смотри: Зарегистрироваться #реклама 16+ edu.likecentre.ru О рекламодателе

Дистанционный педагогический колледж. Выдаем 2 диплома! Поступление на базе 9 или 11 класса. Выдаем сразу 2 диплома. Нам не важны результаты экзаменов!. Успейте попасть на ближайий набор! Подать заявку #реклама distant-college.ru О рекламодателе

Экосистема React в 2023 году В 2023 году React исполнилось 10 лет, и экосистема продолжает развиваться благодаря постоянным усовершенствованиям и инновациям. Будучи одной из самых распространенных JavaScript-библиотек, React остается фаворитом среди разработчиков для создания динамичных и высокопроизводительных приложений. Однако при огромном количестве инструментов и библиотек, доступных в экосистеме React, выбор правильной комбинации для вашего проекта может оказаться непростой задачей. В этой статье мы рассмотрим наиболее важные библиотеки, которые широко используются и пользуются доверием разработчиков, и поможем вам принять обоснованное решение о выборе инструментов для вашего следующего проекта на React. https://www.builder.io/blog/react-js-in-2023 ✍️ @React_lib

⁉️ Как создавать веб-приложения быстро и просто, но при этом красивом и необычно? Современные реалии в IT требуют от разработчиков оптимизации временных издержек и уникальности готовых проектов одновременно. Как писать мобильные и ПК-приложения быстро, просто и красиво? 🦾 Узнаете на бесплатном открытом уроке «Обзор возможностей библиотеки компонентов Quasar с Vue» от OTUS. Преподаватель Михаил Кузнецов – Fullstack developer и тимлид в «Zalando», Germany. 📌 Занятие пройдёт 17 октября в 20:00 мск и будет приурочено к старту курса «Vue.js разработчик». В дальнейшем вы сможете приобрести полный курс в рассрочку на выгодных условиях. Это отличная возможность совершенно бесплатно протестировать формат обучения и задать преподавателю любые вопросы в режиме реального времени! 👉 Зарегистрируйтесь на событие прямо сейчас и мы напомним в день вебинара. Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

React reconciliation: как это работает и почему это должно нас волновать Каждый раз, когда мне кажется, что я знаю все о том, как React рендерит компоненты, Вселенная находит способ удивить меня. Такая невинная вещь, как простое утверждение if, может полностью перевернуть ваше сознание. Так случилось и в эту субботу, когда я случайно просматривал документацию по React, чтобы отложить то, что я должен был сделать в соответствии со списком дел на выходные, висящим у меня на стене. Очередной момент "подождите, это не может быть правильным" привел к тому, что еще один план на выходные исчез в пустоте, а за ним последовало еще одно глубокое исследование и статья. Кому вообще нужны эти ToDo? Они же не были важными, верно? https://dev.to/adevnadia/react-reconciliation-how-it-works-and-why-should-we-care-417e ✍️ @React_lib

Курс: Бизнес Аналитик. Первые 7 дней бесплатно! Получите бесплатный доступ к первым 14 урокам курса "Профессия Бизнес Аналитик". Попробовать #реклама 16+ skillbox.ru О рекламодателе

Самоучитель по React для начинающих ⚛️ 00:00:00 introduction 00:01:41 installation 00:02:48 new project 00:05:00 how to restart dev server 00:05:36 project folder explanation 00:08:13 App component 00:09:14 new Header component 00:13:30 new Footer component 00:16:32 new Food component 00:19:22 conclusion источник ✍️ @React_lib

Ответьте на 1 вопрос и книги ваши на 30 дней бесплатно! Доступ к Букмейту для вас и трех ваших близких бесплатно на 30 дней. Попробуйте! Узнать больше #реклама 16+ mrqz.me О рекламодателе

Типы React в TypeScript Я использую React, я использую TypeScript. В большинстве случаев TypeScript отлично справляется с выводом типов самостоятельно, но иногда, когда ему требуется добавить типы, я просто схожу с ума. Я расскажу о некоторых часто используемых типах для React, чтобы в будущем мы с вами больше не паниковали. https://jser.dev/2023-05-31-react-types-in-typescript/ ✍️ @React_lib

Курс «DevOps для эксплуатации и разработки» от Яндекса За 6 месяцев обучения освоите принципы DevOps и автоматизацию процесса разработки. Зарегистрироваться #реклама 16+ practicum.yandex.ru О рекламодателе

Понимание параллелизма в React Основной принцип параллелизма в React заключается в том, чтобы перестроить процесс рендеринга таким образом, чтобы во время рендеринга следующего представления текущее представление оставалось отзывчивым. https://www.bbss.dev/posts/react-concurrency/ ✍️ @React_lib

Бесплатные IT-курсы от Хекслета для новичков 20+ курсов по программированию и IT — бесплатно! Начните писать код и наполнять свое портфолио на GitHub прямо сейчас. Теория и практика в браузере, без установки приложений. Бонусом — дружное сообщество, а также полезные сервисы и гайды для новичков. Начните путь в IT вместе с Хекслетом! Перейти на сайт #реклама ru.hexlet.io О рекламодателе

Серверный компонент Grok React от Quizzes React Server Component - это новая архитектура React, представленная командой React в конце 2020 года. Она позволяет разработчикам рендерить компоненты на стороне сервера, тем самым повышая производительность и уменьшая размер кода на стороне клиента. Несмотря на то что этому нововведению уже более двух лет, оно все еще создает ряд новых проблем и вопросов. RSC - это, пожалуй, самая горячая тема в сообществе React, но многие пользователи React до сих пор недоумевают по этому поводу. https://betterprogramming.pub/grok-react-server-component-by-quizzes-df4417905bc4 ✍️ @React_lib

Новый высотный жилой комплекс ДОМ ДАУ в Москва-сити ДОМ ДАУ - новый премиальный проект в Москва-сити. Фиксируем цены до 31.10. Квартиры от 35 млн. р. Рассрочка 0% на 2 года. Скидка 3% при 100% оплате и ипотеке. Успейте забронировать! Получить предложение #реклама quiz.domdau.moscow О рекламодателе