React Native Debugger? Reactotron!
Part 1/3

Фуф, наконец более-менее разобрался с инструментами дебаггинга.

Оказалось что на последних версиях RN, redux-toolkit никак не хочет работать с react-native-debugger и ему подобными инструментам.

Пробовал разные варианты, но коннекта нет, данных не видно. Может быть с CLI ситуация выглядит иначе.

Почитав соседние чаты и немного погуглив, узнал что до версии 0.73+ по умолчанию в проектах использовался Flipper (не юзал)

Поэтому сегодня пишу о том, как приконектить Reactotron. Я все еще мучаю свой первый проект на expo, так что возможно при использовании CLI будут какие-то отличия. Вроде как по отзывам это очень неплохой инструмент, да и дока у них хорошая (и смешная)

Redux is a library for managing global state. It's

pretty damn awesome

.

*And everyone knows when you

combine two great things

, you get a super-awesome thing.

Except for toothpaste & orange juice

. Keep those separate.*

React Native Debugger? Reactotron!
Part 2/3

Итак, погнали!

1. Качаем приложение Reactotron.app с офф сайта

2. Ставим в проект

npm i --save-dev reactotron-react-native

или

npm i --save-dev reactotron-react-native

3. Создаем файл ReactotronConfig.js в корне проекта (ну или где удобно хранить)

Мой файл выглядит так:

import Reactotron from "reactotron-react-native";

const reactotron = Reactotron

.configure({ name: 'LitList App' })

.connect()

export default reactotron

4. Далее идем в App.js или index.js и в начало файла добавляем

if (DEV) {
import("Ваш путь до файла ReactotronConfig.js").then(() => console.log("Reactotron Configured"));
}

Ну и на этом по дефолту все, и как говорит офф дока

HOUSTON, WE HAVE A CONNECTION!

React Native Debugger? Reactotron!
Part 3/3

В доке можно найти примеры подключения различных модулей. Мне же необходимо было только Redux

Для этого:

Ставим

npm install --save-dev reactotron-redux

в проект.

В свой ранее созданный файл ReactotronConfig.js дописываем

import { reactotronRedux } from 'reactotron-redux'

и

.use(reactotronRedux())

А вот дальше интересно 🧐. У меня используется Redux-Toolkit и в доке сказано что в свой файл store.js нужно добавить

enhancers: DEV ? [Reactotron.createEnhancer!()] : [],

Но если так сделать, мы сразу же получим ошибку

enhancers field must be a callback

В итоге делаем так как в коде ниже и все готово

enhancers: (getDefaultEnhancers) => {
return getDefaultEnhancers({
autoBatch: {},
}).concat(reactotron.createEnhancer())
}

При изменении стейта, видим изменения и в окне Reactotron! ✌️

Отпишите в комменты, кто какие использует инструменты для отладки своих приложений? Вдруг есть что-то проще и легче

ps/ console.log() не предлагать 🤡

пятничный мем 🙃

Всем привет! Тут оказывается пару дней назад выкатили React Native for VisionOS😳😳😳

Ссылка на статью одного из контрибьютеров rn 👇

https://www.callstack.com/blog/announcing-react-native-for-apple-vision-pro

Кто что думает? Нам оно надо или это уже перебор?

Я как минимум попробую завести что-то на эмуляторе just for fun 👀

просто напоминаю 😏 залетайте, кому кайф

Ну чтож, по итогам голосования, большинству было интересно почитать про Storybook, так что держите...

Storybook! 📱💻

Это что за покемон?

Это инструмент, который помогает разработчикам создавать, тестировать и документировать UI компоненты независимо от основного приложения.

А в чем же основной профит?

1. Есть возможность сразу визуально тестировать и настраивать компоненты (состояния, пропсы и тд)

2. Создавать и поддерживать документацию к вашему UI. Очень полезно как мне кажется, для проектов любого размера

3. Отлаживать компоненты в изоляции от основного приложения.

4. Легко передавать компоненты между разработчиками или проектами.

⚡️Вы прикиньте, написали вы UI компонент, добавили к нему описание (в отдельных файлах которые индексирует SB)
и все, он уже в общей UI библиотеке, с понятным описанием и предсказуемым поведением.
Другой разработчик из команды взял этот компонент и использует где необходимо, не ломая себе голову, а есть ли он в проекте вообще.

Шик, блеск, вы великолепны я щитаю!

пятничный мем, будущее близко

Дамы и господа, приглашаю всех в чатик

https://news.1rj.ru/str/+ZBdY2WKGczUwOTli

Оффтоп не оффтоп, пофиг) просто пообщаться

Ребят, вы меня все спрашиваетe про мой опыт.

Если говорить про самое первое знакомство с "программированием", то это было когда у меня появился комп и случайно попалась книжка из серии «Пишем свой сайт на HTML и CSS». Тогда что-то попробовал сделать, даже какое-то время страница была на Ya.Narod

Потом техникум и универ, где писали уже на плюсах (терпеть не мог) и потом был опыт написания приложения для диплома на Android. Простенький файловый менеджер. Забавно, что до сих пор apk лежит на трешбоксе

После универа попал в банк, занимался поддержкой колл-центра, писал CRM на C# и внутренний портал на Bitrix. Параллельно фрилансил, подрабатывал в студии на различных проектах. Так с того момента и увяз в бэкэнде и битриксе.

Работал на всех возможных CMS, было больно, но опыт интересный. Лидил в командах, ревьюил коллег.

Последние года 2-3, больше занимаюсь фронтом - Vue, React, etc. Оказалось, мне приятнее работать с фронтом, сразу видно результат и прогресс. Но есть конечно свои нюансы)

Part 1/2

Ну и вот решил пойти дальше, раз React худо бедно знаю, почему бы не пойти в RN?

Собственно поэтому и решил завести этот канал, у которого есть несколько целей:

1. Канал дает мотивацию не бросить изучение (такое уже было)

2. Есть желание собрать хоть и небольшое, но комьюнити людей, которым это тоже интересно (вместе разбираться и делиться опытом)

3. Разрабатывать простые, но полезные приложения для себя и других

4. Найти работу в этом направлении. why not?

Part 2/2

как же у меня подгорает от ограничения тг по количеству символов в посте...хоть премиум покупай 🤬

это я дебажу код

пятничный мем 🤡

всем привет! советую один из дружеских чатов, про все вокруг реакта ☺️

https://news.1rj.ru/str/react_web_native_jobs_devs

Всем привет 🏎

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

И тут я решил, почему бы не сделать приложение, в котором все это будет под рукой 🤔

Пока план такой:

1. Расписание гонок (с учетом часового пояса на устройстве)

2. Турнирная таблица по пилотам и конструкторам

3. Push-уведомления о предстоящих гонках

4. Результаты прошедших гонок (очки, бэст лап и другие данные)

Сейчас быстро набросал структуру, сделал пару экранов и компонентов

Проект лежит тут и будет обновляться https://github.com/mbhusty/f1-app

Напишите в коменты, есть ли тут фанаты F1, возможно есть еще какие-то идеи или предложения

Light out!!! 🏁

Ёмое, нахрен блин!

Вас тут уже писят ❤️‍🔥

Спасибо всем и каждому, что вы тут 🫂

Лол, кто-то сразу ливнул 😞