Обновить
62.48

React Native *

фреймворк для разработки нативных приложений

Сначала показывать
Порог рейтинга
Уровень сложности

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

Уровень сложностиПростой
Время на прочтение9 мин
Охват и читатели8.2K

Это рецензия на русский перевод книги Fluent React: Build Fast, Performant, and Intuitive Web Applications автора Кумара Теджаса. Для тех разработчиков, кто следит за литературой по React, напомню, что в январе мы рецензировали на Хабре книгу по React 19 российского автора Виктора Дронова. Наверняка, будет интересно сравнить подходы авторов и набор тем, которые они освещают.

Читать далее

Как сделать мессенджер: GraphQL Subscriptions и Relay на практике

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели2.8K

Подписки в GraphQL позволяют клиенту подписаться на изменения данных на сервере. Например, в чате с их помощью можно получать уведомления о сообщениях, их удалении или изменении. В отличие от обычных запросов, подписки работают асинхронно, поддерживая постоянное соединение через WebSocket. В этом случае сервер может в любое время послать запрос клиенту. В то же время для обычных запросов(queries), чтобы увидеть изменение данных, клиенту нужно запрашивать их заново каждый раз. А ещё с помощью GraphQL Subscriptions и библиотеки Relay можно создать собственный мессенджер.

Читать далее

Приватный финансовый менеджер inCourse на React Native. Опыт разработки

Уровень сложностиСредний
Время на прочтение18 мин
Охват и читатели1.1K

История от задумки до запуска на Google Play приватного финансового менеджера inCourse для Android на React Native и TypeScript.

Хочу быть в курсе

Еxpo 52 + Tamagui. Настраиваем проект с нуля

Время на прочтение2 мин
Охват и читатели1.1K

Создаем React Native проект на Expo 52 с Tamagui с нуля. В этой статье я поэтапно показываю что я сделал.

Читать далее

Зачем нужен шаблон Render props в React?

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели10K

Не часто приходится встречать людей, которые понимают зачем он нужен и ещё реже попадаются проекты, в которых его используют. А шаблон-то очень полезный!

В этой статье вы поймёте как он устроен, зачем он нужен и на примерах научитесь его правильно применять.

Читать далее

Отбираем хлеб у нативных разработчиков: миграция с Kotlin/Swift на RN

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели9.7K

Меня зовут Александр Чернов, я фронтенд-разработчик в KODE и я использую React Native в разработке мобильных приложений уже более семи лет. Сейчас расскажу вам, как мы у нативных разработчиков хлеб отбирали.

Читать, как «перевозили» приложение

React Server Components и Next.js 13: новый шаг к оптимальному рендерингу

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели5.4K

Мир React долгое время делился на две «сферы»: серверный рендеринг (SSR) и клиентский рендеринг (CSR). Приложения обычно подгружали часть контента с сервера для быстрого старта, а затем загружали большой бандл JS для полного интерактивного опыта на клиенте. Однако это приводило к дублированию логики и дополнительной головной боли при оптимизации.

Сегодня громко обсуждаются React Server Components (RSC) — новый подход к рендерингу компонентов, при котором логика, которая не должна выполняться на клиенте, может быть полностью «вырезана» до отдачи готовой HTML-структуры. Это обещает уменьшить бандлы, улучшить производительность и упростить архитектуру.

Next.js 13 — фреймворк, который уже предлагает нативную поддержку RSC и новые возможности по маршрутизации, загрузке данных и оптимизации. Почему это важно и как начать?

Читать далее

Вышел React v19

Уровень сложностиПростой
Время на прочтение16 мин
Охват и читатели40K

React v19 теперь доступен на npm!

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

Читать далее

Гайд по кроссплатформенной разработке с использованием React Native

Время на прочтение7 мин
Охват и читатели6K

Начнем, пожалуй, с азов. Что есть кроссплатформенная разработка? Такая, которая не требует от вас знаний нативного кода и позволяет одному разработчику делать сразу два приложения. «Вау! Круто!» — скажет любой предприниматель, смекнув, что может нехило сэкономить. Но так ли это на самом деле? Давайте разберемся.

Лет 7 назад наш техлид разглядел в только что появившемся React Native (RN) огромный потенциал. Поэтому с его легкой руки мы начали делать кроссплатформенные приложения на нем, когда это еще не было мейнстримом.

С тех пор фреймворк зарекомендовал себя как один из наиболее перспективных инструментов для разработки. Он был создан Facebook (Meta), чтобы писать нативные мобильные приложения для iOS и Android при помощи JavaScript.

Чтобы не быть голословными о его популярности, покозыряем именами: Facebook, Instagram, Bloomberg, Airbnb, Tesla, SoundCloud Pulse, UberEATS и Shopify написаны на React Native. Какие же у него сильные стороны?

Читать далее

Typescript для React

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели16K

Typescript - сложный язык, но большинству разработчиков не нужно знать все его тонкости, чтобы быть эффективными в своей работе.

Это то, что я считаю минимальным набором знаний по тайпскрипту для эффективной разработки продукта на React.

Основные принципы, которые мы здесь используем:

Типизируйте входные данные, предсказывай результат

Минимизируйте шум в кодовой базе

Ошибки должны отображаться как можно ближе к коду, который их вызвал

Читать далее

Стили, темы и адаптивная верстка в React Native

Уровень сложностиСредний
Время на прочтение14 мин
Охват и читатели8.1K

Из этой статьи вы узнаете, как эффективно организовать очень важную часть разработки на React Native - работу со стилями и ресурсами для создания адаптивных и доступных интерфейсов под три платформы: iOS, Android и Web, и нужны ли для этого библиотеки. Также в целом обсудим особенности верстки и проблемы производительности в рамках данного фреймворка.

Читать далее

Расширения VSCode для комфортной работы с проектами

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели93K

Для работы с проектами существует куча редакторов кода и IDE (VSCode, NeoVim, SublimeText, WebStorm и т.д.). В данный момент наиболее популярны VSCode и Webstorm и у каждого есть свои плюсы и минусы. Webstorm является примером прекрасного IDE от компании JetBrains, где многие вспомогательные модули идут “из коробки”. К сожалению, сейчас нет возможности легально получить доступ к этому продукту гражданам России, поэтому многим приходится искать альтернативу. Такой альтернативой вполне может стать Visual Studio Code от компании Microsoft, который имеет открытую кодовую базу, полностью бесплатный и гибко настраиваемый под ваши нужды. В данной статье мы рассмотрим пример настройки рабочего пространства VSCode для комфортной работы с нашими проектами. Я покажу вам, какими расширениями я пользуюсь для лучшего удобства и продуктивности. Эти расширения я использую давно и они хорошо зарекомендовали себя, но возможно некоторые из них могут не подойти под ваш стиль работы и написания кода. Итак, начнем!

Читать далее

Использование технологии iBeacon в React Native

Время на прочтение14 мин
Охват и читатели2.6K

В предыдущей статье мы рассказали про использование беакон-маяков и технологии BLE в приложениях на React Native c помощью библиотеки React Native BLE. Теперь перейдем к более совершенному подходу для работы с маяками, — разработаем нативный модуль на iOS.

Читать далее

Ближайшие события

Как использовать iBeacon и BLE в React Native?

Время на прочтение5 мин
Охват и читатели1.9K

В прошлой статье мы уже обсудили, чем полезны беакон-маячки и технология BLE для бизнеса. Сегодня перейдем к практике и рассмотрим, как именно можно использовать iBeacon и BLE в React Native, а именно с помощью библиотеки React Native BLE.

Читать далее

React Native полностью переделан

Время на прочтение3 мин
Охват и читатели27K

После 6 лет разработки команда React Native представила полностью переписанную архитектуру фреймворка (0.76) – самое значительное обновление с момента создания React Native. Это результат масштабной работы над улучшением производительности, стабильности и возможностей платформы.

Читать дальше →

Пошаговое руководство по предварительной подписи URL-адресов AWS S3 и получению защищенных изображений S3 в React Native

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели2.3K

В современных приложениях, особенно работающих с мультимедийным контентом, эффективное управление такими ресурсами, как изображения, имеет решающее значение для плавного пользовательского опыта. Amazon Simple Storage Service (S3) является популярным выбором.

Один из распространенных подходов к обеспечению безопасного доступа к ресурсам — использование предварительно подписанных URL-адресов. Эти URL-адреса предоставляют временный доступ к определенным ресурсам в корзине S3, позволяя контролировать доступ без ущерба для безопасности.

Хотя обычно предварительно подписанные URL-адреса генерируются на серверной стороне и предоставляются на фронтенд, бывают ситуации, когда необходимо обрабатывать предварительно подписанные URL-адреса непосредственно на фронтенде приложения React Native. Это может быть связано с различными причинами, такими как динамический контент, управление доступом для конкретных пользователей или необходимость тонкого управления доступом.

В этом руководстве мы шаг за шагом рассмотрим процесс предварительной подписи URL-адресов AWS S3 в приложении React Native.

Хотя документация AWS предоставляет исчерпывающие инструкции по предварительно подписанным URL-адресам, она может не предлагать конкретных инструкций по интеграции этой функциональности в приложение React Native. Документация AWS по предварительно подписанным URL-адресам

Давайте углубимся в то, как это сделать в нашем приложении React Native.

Предварительные условия

Учетная запись AWS: Вам нужна учетная запись AWS для доступа к сервисам Amazon S3. Если у вас ее нет, вы можете зарегистрироваться здесь.

Читать далее

Интеграция Unity кода в React Native. Часть 2

Время на прочтение15 мин
Охват и читатели413

Всем привет! На связи снова команда dev.family. Мы продолжаем разбирать тему интеграции Unity-проекта в приложение, написанное на React Native.

В предыдущей серии…

Мы начали с того, что поместили игру на Unity в наше приложение. Как это было, можно почитать в предыдущей статье. Но пока части кода не взаимодействуют друг с другом, значит, работа не закончена. У нас есть кнопка «Save Result». Под нее было бы неплохо написать логику, чтобы показать, что у нас получилось.

Спойлер: этим и не только займемся прямо сейчас.

Что будет дальше

Во второй части статьи мы возьмем текущую связку React Native + Unity и сделаем так, чтобы одна часть кода могла получать и обрабатывать сообщения с другой. И наоборот.

Продолжаем наше Unity-journey!

Предупреждение

В материалах статьи мы разобрали процессы работы над тестовым приложением. Это не панацея и не четкое указание, как именно нужно писать код. Но оно классно сработало для нас, и мы будем рады, если вдохновим вас на решение схожих задач в разработке.

Читать далее

Интеграция Unity кода в React Native

Время на прочтение7 мин
Охват и читатели1.3K

Всем привет! На связи снова команда dev.family с весьма необычной темой. В этот раз поговорим об играх. А именно, как интегрировать Unity в React Native.

На самом деле, это очевидно, что на React Native игру не напишешь. Оно и не надо. Движков, позволяющих разрабатывать игры под разные платформы и операционных системы, будь то iOS или Android, macOS или Windows, — огромное множество. Есть среди Unity и Unreal Engine. Сегодня мы посмотрим, как использовать первый из них в кросс-платформенных мобильных приложениях.

Думаю, не стоит говорить, что сделать полноценно игру на Unity удобнее. Зачем тогда вообще нужна эта странная и непонятная интеграция?

Начнем с того, что игры могут иметь обширное меню и различный функционал. Допустим, встроенный мессенджер, большие настройки, — те же гильдии внутри игры и тд. Речь не идет об AAA играх по типу Genshin, а, скорее, о маленьких инди или подобных, где всю игру можно сделать отдельным приложением, а сами механики и сцены скинуть на юнити. Также юнити хорош не только в создании игр, но и использовании таких технологий как VR или AR, где можно использовать сцены, различные модели, коллизии этих моделей и другое. Тут схожая ситуация с той, где у нас есть отдельное приложение и мы делаем переход на экран с Unity проектом.

Читать далее

Интеграция SwiftUI и Realm в React Native на новой архитектуре

Уровень сложностиСложный
Время на прочтение13 мин
Охват и читатели1.6K

В данной статье мы разберём процесс создания React Native приложения для iOS с использованием SwiftUI и Realm на основе новой архитектуры. Особое внимание уделим основным шагам интеграции Turbo Modules и Fabric, а также тому, как эти инструменты повышают производительность и упрощают взаимодействие с нативным кодом.

Читать далее

Создаем Telegram WebApp. Часть II: установка Telegram mini-app

Время на прочтение5 мин
Охват и читатели8.7K

Привет! Это снова команда dev.family. Мы продолжаем эксперимент по созданию приложения на React Native, которое будет работать как Telegram Web App.В предыдущей серии мы рассказали про особенности разработки веб-приложения на React Native с использованием react-native-web и моментах, в которых отходили от документации (весь код и детали процесса вы найдете в первой части);

Теперь перейдем к установке самого веб-приложения в Telegram-бот.

Читать далее