React JS

🖥 Meals

это готовое веб-приложение на основе React, которое позволяет пользователям искать блюда и рецепты из обширной базы данных.

git clone https://github.com/kaleb110/meals-app.git
cd meals-app

▪ Github

@react_tg

У этой страницы "заело пластинку".

#страница404

https://codepen.io/Banny/pen/ZmXzMP

@react_tg

🖥 Совет по React: Используйте кастомный хук для управления состояниями массивов в ваших компонентах.

#react

@react_tg

🖥 Красивая анимация. У страницы дискотека! Не ищите её!

#страница404

https://codepen.io/jbanegas/pen/vJXMbj

@react_tg

Вакансия: Веб-разработчик для создания посадочных страниц (React + Node.js)

Маркетинговое агентство Uptrend.agency ищет опытного веб-разработчика для создания посадочных страниц. Мы ориентируемся к долгосрочному сотрудничеству, так как регулярно создаем новые лендинги.

❐ Основные требования:
- Технологический стэк: React и Node.js
- Наличие кейсов по реализованным проектам на React + Node.js.

❐ Обязанности:
- Разработка посадочных страниц на основе предоставленных дизайнов. Пример лендинга можно посмотреть здесь.
- Постоянное сотрудничество с командой для создания новых лендингов.

❐ Условия:
- Работа не разовая — планируется регулярное создание новых лендингов.
- Конкурентная оплата труда.

❐ Как подать заявку:
Если вас заинтересовала эта вакансия, пожалуйста, отправьте сообщение в личные сообщения с кейсами ваших работ и указанием стоимости услуг.

➜ Контакт: @madbboii

Будем рады видеть вас в нашей команде!

🖥 3D логотип React с использованием React Three Fiber

@react_tg

🖥 Очень удобная функция серверных компонентов React:

Вы можете кэшировать результат выборки данных или вычислений с помощью функции `cache`

@react_tg

⚛️ Как легко решить проблемы с повторным рендерингом в React с помощью composition

@react_tg

⭐️ Красивый эффект вращения границ рамки с надписью о ненайденной странице.

Примеры применения:
📌 ненайденная страница по продаже автозапчастей;
📌 ненайденная страница по продаже билетов на картинг или дрифт.

#страница404

https://codepen.io/comehope/pen/qYepNv

@react_tg

⚡️ Мощный нейропереводчик

Нейросеть Babelfish получила обновление, которое значительно улучшило распознавание речи — теперь она может в реальном времени переводить любое аудио на нужный вам язык.

▪ Github

@react_tg

🏗👷‍♂️ Крутая анимация для вашего проекта

Строители разработчики так и не достроили страницу, на которую вы хотели попасть.

#страница404 #анимация

https://codepen.io/l-mnh-the-flexboxer/pen/qBRVXwm

@react_tg

⚡️ Прелоадер, на котором буквы загрузчика пытаются догнать друг друга.

Примеры применения:
▪ загрузка страницы в электронной библиотеке;
▪ загрузка страницы интернет-магазина с канцелярскими товарами.

#прелоадер #ожидание #загрузка #js

https://codepen.io/arlinacode/pen/rrRoOQ

@react_tg

TDesign — Корпоративная дизайн система

Design - это комплексная корпоративная система проектирования, и библиотеки компонентов были реализованы для Vue, React и WeChat MiniProgram

TDesign хорошо подходит для создания приложений со сложным дизайном и возможностями кроссплатформенного, мультитехнологичного стека.

https://github.com/Tencent/tdesign

@react_tg

🖥 Синхронизация React с API браузера

@react_tg

⚡️ Полезный сервис CSS Grid Generator, который сгенерирует сетку и выдаст CSS-код.

Вам нужно только задать количество строк, колонок и расстояния между ними, далее рисуем расположение div-блоков в сетке.

https://cssgrid-generator.netlify.app/

@react_tg

⭕ Двигающиеся кольца прелоадера, которые раскрываются при взлёте.

Примеры применения:
▪ загрузка нового уровня в игре;
▪ загрузка результатов тестирования.

#прелоадер #ожидание #загрузка

https://codepen.io/izmaelmag/pen/XNJKZx

@react_tg

❗️Простой React Совет

Если вам нужно импортировать серверный компонент из клиентского компонента, передайте его как prop ❗

@reeact_tg

⚡️ Cypress — это современный инструмент для тестирования фронтенда, созданный для решения ключевых проблем, с которыми сталкиваются разработчики и специалисты по качеству при тестировании веб-приложений.

В отличие от Selenium, Cypress обеспечивает более быстрые, простые и надежные тесты. Он позволяет легко настраивать, писать, запускать и отлаживать различные типы тестов, включая сквозные, компонентные и модульные.

Подходит для любых приложений, работающих в браузере, и поддерживает тестирование в разных браузерах, обеспечивая стабильные результаты и эффективную интеграцию в CI-процессы.

npm install cypress --save-dev

▪Github

@react_tg

🖥 React Native Reanimated — низкоуровневая абстракция для API библиотеки Animated

— npx create-expo-app@latest my-app -e with-reanimated

React Native Reanimated предоставляет полную, низкоуровневую абстракцию для API библиотеки Animated, на основе которой можно построить более гибкий интерфейс, особенно когда речь идет о взаимодействии с помощью жестов.

🖥 GitHub
🟡 Доки
🟡 Посмотреть пример на Snack

@react_tg