React и TypeScript - как писать tsx чище?

[@D_o_m_i_n_u_S]

Привет 👋 Спасибо тебе за твой контент, без воды все по теме и не на коленке. Скупил все твои курсы на Udemy, качество и подача материала радует :)

[@PurpleSchool]

Спасибо! Рад, что курсы приносят пользу)

[@MrExcaliburYO]

1. Команда React не рекомендует использовать FC, начиная с 18 версии FC убрали даже из базового шаблона. 2. children в FC передается и так в неявном виде. 3. Если надо передать children, то есть PropsWithChildren или обычным способом из видео.

[@PurpleSchool]

Да, но если нужен children, то FC вполне можно использовать. В Props действительно можно было не передавать children в примере.

[@mirjalolkhudratov9210]

даже можно было так: function Component(props: IProps) {...

[@StrikerFeed]

Подтверждаю, уже в принципе не стоит давать тип компонентам.

[@sergei_sergeevu4]

@@PurpleSchool Похоже что в React 18, типах FC: children больше нет(

[@nabzhanik94]

Немного добавлю насчёт тернарников: если 1 условие, как в примере, то ок, но если после первого тернарника нужно делать ещё одну проверку, то тернарник это зло)

[@PurpleSchool]

Согласен.

[@nics51]

Круто! Для более красивого кода и чистейшего jsx можно использовать mobx классовые store и почти 90% логики писать там +оптимизация +чистота в коде перед return, и еще кстати, я считаю что лучше везде типизировать компоненты как ({}): Props чтобы не делать лишних импортов реакта. есть PropsWithChildren который можно передать в Fc но это наоборот получается хуже, два лишних импорта и длинная типизация. Так что подход без Fc думаю гораздо лаконичнее, напишите если я не прав. удачи и спасибо за видео!

[@drakeno5015]

Антон, классный видос! Интересный сетап мониторов, подскажите пожалуйста, это 27" у вас вертикально стоит? или это 24"

[@PurpleSchool]

Спасибо! Горизонтальный 32 широкоформатный, а сбоку 27 вертикальный)

[@pink-doublethink]

Спасибо тебе за качественный контент. Будет ли видео / курс про Agile?

[@PurpleSchool]

Да, планировал по Agile курс, но пока другие курсы в планах.

[@godforger]

Классный контент !!!

[@PurpleSchool]

Спасибо!

[@akichula]

Видео супер! Кстати, для типизации компонента с children можно использовать встроенный дженерик тип React.PropsWithChildren для того чтобы внутри интерфейса не прописывать children и реакт корректно обрабатывал входящие элементы

[@PurpleSchool]

Спасибо!

[@bizuha]

Если вообще children не прописывать, ошибки не будет, потому что пропсы обернуты в дженерик React.FC

[@akichula]

@@bizuha вообще лучше не использовать FC, есть интересные статьи по этой теме) Лучшим решением для типизации я нашел такое const Element = ({myProps}: ElementProps): JSX.Element => {}

[@artemfedotov30]

Антон привет! Спасибо тебе за то, что ты делаешь. на мапе постов я бы взял posts.length && вместо posts &&, так как пустой массив в приведении будет true

[@PurpleSchool]

Спасибо! Да, проверку на длину надо бы добавить

[@timebug85]

Так отрендерит 0, если будет пустой массив Тут, например, можно тернаркой: posts.length ? posts.map(...) : null Можно привести к булевому значению: !!posts.length && posts.map(...)

[@m.kolomoyets]

Спасибо тебе за контент!! Только есть один момент, пропс children можно самому не писать, а екстендить интерейс пропсов от PropsWithChildren из react. Лайк все равно)

[@PurpleSchool]

Верно, спасибо

[@КарлВернер-э4й]

Добрый день, подскажите пожалуйста какой терминал используете, и где можно посмотреть Ваш конфиг NeoVim (как я понимаю) ?

[@PurpleSchool]

Терминал - iTerm 2, а по neovim будет большое отдельное видео)

[@КарлВернер-э4й]

​@@PurpleSchool эти видео однозначно зайдут и будут просматриваемые, возможно не сразу но будут. К Vim'у должен придти каждый уважающий себя программист.

[@Danny-uc6kx]

не совсем согласен по поводу тернарного оператора. он имеет место быть если разметка внутри него занимает две строки, но даже в этом случае нужно искать где у тебя ? а где начинается уже часть с :, в случае когда мы делаем проверку data && и !data && немного проще для понимания, и не приходится искать других частей кода как с тернарником

[@redhook777]

Спасибо за видео. А что нам даёт тип FC? Можно же просто типизировать пропсы

[@PurpleSchool]

Он дополняет Children.

[@oleksandrtolstoi5468]

А почему вы не используете дефолтный импорт и index.ts файл в ваших компонентах?

[@PurpleSchool]

index.ts есть в компонентах, а дефолтный экспорт мне не очень нравиться, так как при импорте можно назвать сходу как угодно этот дефолтный импорт и начинается путаница и нужно за эти следить на код ревью.

[@kekkek5516]

Ждал видосик про AstroNvim :( Все равно лайк

[@PurpleSchool]

Скоро будет) Подожди немного)

[@dymovcom42]

Спасибо за видео. А как лучше делать при использовании styledComponents, сохранять стилизованные компоненты в файле с основным компонентом или выносить каждый стилизованный компонент в отдельный файл и хранить их рядом с файлом основного компонента? Мне кажется, если держать все эти мини-компоненты в одном файле снижается читаемость)

[@PurpleSchool]

Я бы выносил отдельно. Если файл больше 100 - 120 строк его уже читать становится сложнее.

[@MrZuven]

А не проще тип(интерфейс) писать в том же файле выше функции? Зачем плодить лишний файл?

[@PurpleSchool]

Чем меньше файл, тем проще затем поддерживать код

[@caesarqwerty]

го туториал по настройке nvim как у тебя

[@PurpleSchool]

Будет через 1 видео)

[@seryozhamangushev9638]

Почему FC, дополнительный импорт как минимум

[@vitmih380]

Это React 16?

[@PurpleSchool]

17 вроде в обоих проектах, которые я показывал.

[@uladzimirf7577]

Webstorm или vscode чем не угодили?

[@PurpleSchool]

Я иногда использую VSCode, но мне удобнее и приятнее работать в nvim, особенно когда сидишь в потоке и пишешь код. Я сделаю обзор текущий конфигурации и почему я его выбрал.

[@bizuha]

Хорошей практикой считается оборачивание методов в функциональных компонентах в useCallback. В данном примере можно было бы сделать через возвращение функции const copyNotifications = useCallback((code: string, productId: number) => () => { ... }, [deps]); И затем использовать в компоненте onClick={copyNotifications(code, product)}

[@verzsut6744]

Ну либо использовать react-afc и забыть про useCallback и useRef (там конечно есть чем другим мозг позабавить, ведь везде есть свои минусы)

[@donelkotcornieh897]

Как писать tsx чище. Типизируйте. Да ладно? А я typescript просто так подключил. Очень странные совет про вынос компонентов в контексте компонентного подхода реакта. Сомнительное видео для преджунов, которые прыгают сразу на реакт с тайпскриптом (почему-то). Ибо в остальных случаях то, что говорится в видео, бесполезно и очевидно Видео ради видео ради монетизации (10 минут).

[@PurpleSchool]

Монетизации на KZbin у меня не подключена. В совет про типизацию основывается на код ревью проектов, где при использовании TypeScript неверно типизируют компоненты или совсем не типизируют.

[@ГеннадийБекасов-ь5ю]

Angular.

[@PurpleSchool]

Будет в будущем

[@ГеннадийБекасов-ь5ю]

@@PurpleSchool да не. Я о том, что если хочется писать фронт чище, нужно использовать ангулар)

[@redhook777]

@@ГеннадийБекасов-ь5ю но гораздо многословнее

[@ГеннадийБекасов-ь5ю]

@@redhook777 просто многословнее, без "гораздо". Вообще, чистый код всегда многословнее его отрефакторенного предка. Иногда и гораздо, но это вообще не аргумент.

[@burya4ok]

Чет бред несеш, сколько лет то опыта?