React Tutorial: рефакторинг с CSS на Styled-JSX на примере Memory Game

[@ВладиславПузырев-ю8л]

Очень круто объясняешь, не понимаю почему у тебя так мало просмотров. Тема CSS-IN-JS все же немного огорчает разнообразием библиотек, не могу выбрать между styled-components и styled-jsx для Next.js, что лучше?

[@IvanKleshnin]

Спасибо. По просмотрам сложно сказать - KZbin почти не показывает наши видео в рекомендациях :( По библиотекам CSS-in-JS я бы начинал со Styled-JSX, на неё проще перейти с обычной вёрстки. Есть классы и всё привычнее выглядит.

[@jorgenUA]

Иван, сколько не вижу даже новых туториалов по Реакт: в 90% там рассказывают про Redux. Неужели эта технология всё ещё так популярна? Даже в требованиях на вакансию "фронта" его часто упоминают... Вроде как разработчики Реакт пропагандируют отход от таких библиотек... Наверное, стоит понять Redux или всё же это анахронизм? ( честно - не хочется себе голову забивать тоннами библиотек, которые потом не нужны, и так учить много чего )

[@IvanKleshnin]

Сам автор Redux давно сказал, что эта библиотека не нужна в современном React. Но у людей без образования (которые составляют большинство веб-разработчиков) очень догматическое мышление. Они боятся отойти на шаг влево или вправо от прошитой (старыми туториалами) схемы. Отсюда все эти const, ===, пробел перед слешем в (был такой баг в дремучей версии IE, исправлен давным-давно, но все упорно продолжают ставить пробел). Смотреть на это может быть забавно или страшно, в зависимости от склада ума наблюдателя. Технология ещё популярна, но я не могу её рекомендовать. Для простых и средне-сложных вещей достаточно контекста и хуков. Для сложных - Apollo Client, URQL. Redux не вписывается никуда имхо. Я сам, для трудоустройства, вообще не рассматривал бы компании, где используется Redux. Точно так же как компании, где педалируется "знание OOP". Ибо они потеряли нить происходящего.

[@jorgenUA]

@@IvanKleshnin спасибо, ответ - просто туториал к действиям, супер.

[@jorgen5462]

Лайк не глядя. Фуфла не выпускаешь.

[@dev_insider]

Как по мне стоило бы упомянуть что css in js сложно дебажить, проще понять какой класс подправить чем искать нужный файл. Было бы классно чтобы классы генерировались как в css modules, типо название компоненты + хеш: Ceell__jq4jm1

[@IvanKleshnin]

Сложность отладки зависит от реализации. Такие проблемы есть, но не везде. Это вопрос зрелости библиотек, а не ограничения подхода.

[@indigosay8272]

Как раз то, что нужно. Я на Реакте хочу писать контент, потому что делаю сайт по китайскому языку, а там будет сложная логика. Например, компонента китайского предложения будет принимать на себя китайское предложение, в котором слова разделены, и каждое слово будет объектом, у которого есть свойства написание иероглифами, значение в предложении (дословный перевод), значение как части речи, вхождение в структуры и так далее и тому подобное. Предложение будет анализироваться бэкендом, и дополнительно записываться в БД, потому что я ещё и словарь хочу сделать типа contextreverso, но с подробным языковым анализом предложений. Бэкенд будет вносить в БД статистику по каждому отдельному слову сколько раз оно применялось, какое имело перевод, какое имело дословный перевод, как чаще использовалось как так или иная часть речи и так далее. Но это занесение в память конечно же работает по специальному запросу администратора, а не каждый раз) А на фронте просто удобнее и красивее писать это в компоненты, а не html теги. Особенно удобно то, что не нужно JS прописывать отдельно перед закрывающим тегом body, а можно сразу внутри компоненты воткнуть:) Поэтому решил такую сложную логику сразу реализовывать на Реакте, а не html+js. Нормальная тактика?

[@IvanKleshnin]

Не уверен, что понял всю задумку (звучит непросто), но каких-то возражений при чтении не возникло. Возможно, вам пригодится www.npmjs.com/package/markdown-to-jsx

[@indigosay8272]

@@IvanKleshnin Спасибо! Я ещё буду делать на этом языковом сайте различные игры, в том числе memory card, да и вообще методику интервального повторения посредством карточек делать, которые будут копиться у каждого юзера отдельно. Игры разные будут, интерактива типа озвучки, анимаций написания тоже полно. Думаю, на Реакте сразу учиться делать. Если проект не принесёт удовлетворительную сумму, то хотя бы стану профи в Реакте) Короче говоря, полностью Реактером быть)

[@IvanKleshnin]

Звучит амбициозно, желаю удачи! Делайте на NextJS, а не на "чистом" React - сэкономите кучу времени.

[@indigosay8272]

@@IvanKleshnin Спасибо за поддержку и советы! Да, NextJS это следующий пункт в моём обучении. Сначала пройду курсов 20 по Реакту

[@lex5115]

А это правда, что css in js убивает -50% perfomance? Хотя, это скорее именно styled-components касается судя по бенчмаркам, что нашёл.

[@IvanKleshnin]

Думаю, что нет, звучит как полная ерунда. Одним числом это не замеришь, все случаи разные. Можем опираться на прецеденты - у Facebook переход на CSS-in-JS увеличил производительность загрузки на 25% (или около того - точное число не помню, можно нагуглить).

[@bigenough2122]

Кому нид автокомплит стилей и подстведка, ставте плагин. В webstorm называется "Styled Components & Styled JSX"

[@IvanKleshnin]

Да, хороший плагин. Мне казалось он стоит по дефолту, но не поручусь.

[@bigenough2122]

@@IvanKleshnin к сожалению нет. Ещё бы разобраться как при сохранении файла все красиво форматировалось

[@IvanKleshnin]

Будем давать рекламу на видео и потому есть вероятность "набега" казуальщиков. Дам ориентир по уровням сложности: 0 - НУЛЕВОЙ (казуальный интерес к IT) I - НАЧИНАЮЩИЙ (учит javascript и вёрстку) II - СРЕДНИЙ (учит React) III - ПРОДВИНУТЫЙ (учит ApolloClient, начало специализации) IV - ЭКСПЕРТ (специализация, технологии вторичны) Видео записано для уровней II и III, т.е. для тех, кто уже знает основы программирования и вёрстки. Если вы изучаете JavaScript, но не против скопипастить что-то не совсем понятное - ролик также может быть полезен. Желаю приятного просмотра ;) По уровням сложности детальнее тут: kzbin.info/www/bejne/rnvUeKawqbCLo5I

[@IvanKleshnin]

Ну при чём тут "характеристика"? Мне нужен был референс, влезающий в скобочки. Подставьте для себя любую продвинутую технологию, если не устраивает эта.

[@bigenough2122]

css in js подход интересный, не понятно как лучше медиа запросы прописывать

[@IvanKleshnin]

В большинстве реализаций всё так же, как в обычном CSS.

[@bigenough2122]

@@IvanKleshnin жаль что нельзя как scss вложенность делать. Или пока просто не привычно)

[@IvanKleshnin]

# Ресурсы Инстанс: react-intermediate-memory-game.vercel.app/ Репозиторий: github.com/ivan-kleshnin/memory-game-react-typescript ## Исходники ### Шаг 5 Начало: github.com/ivan-kleshnin/memory-game-react-typescript/tree/step3 Результат: github.com/ivan-kleshnin/memory-game-react-typescript/tree/step4