SPA-проект с темизацией на React и styled-components

[@mishanep]

Сыграю на опережении: тема в VS Code - CodeSandbox

[@cooq_]

или Atom one dark, если хочется похожую

[@michaelhamar3305]

Это задача примерно для какого уровня программиста junior/middle/ и тд?

[@mishanep]

@@michaelhamar3305 эти градации весьма условны и в каждой компании будут подразумевать разные требования. По хорошему junior, желающий разрабатывать SPA приложения на React должен уметь подобное написать. С другой стороны, не каждый джуниор пишет на Реакте.

[@michaelhamar3305]

@@mishanep ок,спрашиваю так как видел что знакомий middle такое писал

[@andTutin]

@@michaelhamar3305 беспонтовый проект, очень лёгкий , на новичка. практически 80% стилизация

[@vadim_romanov]

спасибо, хороший проект, лучше познакомился со styled components, а в ваших курсах по redux и typescript мы в него добавляем еще и redux и typescript))

[@НиколайХорошуля-д7о]

Михаил, большая благодарность Вам за проделанную работу, у вас талант преподавателя. Было бы круто если бы ещё курс по redux вышел!)

[@V4VFAloj7juAyQW]

Да, очень прошу курс по redux . Никак не могу с этим разобраться.

[@sno-oze]

Отличное видео, шикарное объяснение! Задания с frontendmentor - вот это прямо годно.

[@PerryCoxer]

Супер. Очень подробно, но не растянуто все объяснили. То что нужно для pet проекта!

[@eev9enn578]

Безумно благодарен что учишь людей бесплатно на KZbin. Такое дорогого стоит. Желаю процветания, и спасибо тебе что ты помогаешь новичкам в данной сфере. Спасибо!

[@ilaymorozoff4113]

Благодарим Михаил, топовый контент подъехал))

[@СергейРыженьков]

поставил бы 10 лайков если можно было, за тёмную тему наконец то, не выжигает глаза, так как смотрю ролики ночью

[@FamilyGames166]

Михаил, большое спасибо, писал около недели двухчасовой ролик, изучил кучу всего, спасибо!!!

[@cooq_]

Ребята пишите комменты, помогайте автору в продвижении. На русскоязычном ютубе мало достойных ребят, хорошо объясняющих реакт. Спасибо за видео)

[@Natalia-ph]

Супер видео, спасибо огромное! Пока только посмотрела, все доступно и понятно, теперь нужно браться за реализацию

[@karenm.944]

Большое спасибо за качественный контент! P.S. В конце видео не отображался флаг Андорры из-за того, что код этой страны - ad (он находиться в url на флаг страны). Если у пользователя установлен ADBlocker, то он просто заблокирует ответ сервера из-за того, что посчитает это рекламой)) Ситуация становиться ещё более интересной, если знать, что блокируется только SVG картинка, то есть, если запрашивать PNG, то все будет ок)) Удачи!

[@Nikita-fl2td]

Михаил, большое вам спасибо! Вы умеете сложные вещи объяснять простым языком. Благодаря вам не забросил изучение в дальний ящик, а продолжаю двигаться вперед. Давно хотел вас поблагодарить!

[@thegulpofenglish4131]

Михаил, сердечная благодарность за ваши труды. Хотелось бы видеть больше продвинутых уроков. Роста каналу, Вам - всех благ.

[@пиупиу-р6д]

понравилась подача материала, ролик до конца не досмотрела, но подписалась и купила ваш курс) удачи мне))

[@ИванВалучев-э5р]

Михаил, спасибо, все понятно и доходчиво! лайк, подписка))

[@DmitriiBeliaev-v5q]

Отличное видео, спасибо!

[@ДмитрийОлейник-л9о]

Видео полезное! Узнал много новой информации. При роутинге помогла серия соответствующих роликов. Круто обучаться на реальных проектах! Спасибо)

[@artemmolot2474]

Спасибо большое, Михаил. Столько полезных приемов.

[@andreymedkov795]

Отлично объясняешь. Приятно слушать!)

[@Алексей-и5д3в]

Огромное Вам спасибо за Ваш труд

[@ЛюбовьЛенская-и3ц]

Спасибо за такой интересный и понятный урок!

[@ВладиславМартинов-я2щ]

Спасибо всё очень круто, с такими темпами можно стать профи в реакте если смотреть ваши выпуски!

[@ВладиславМартинов-я2щ]

Будет круто если запишите ролик по созданию spa приложения используя React + Redux(toolkit)

[@dmaberlin]

Спасибо Миша! уроки и курсы супер!

[@dr_morpho]

Супер! Большое вам спасибо🤝)

[@ekuzovlev]

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

[@konglomora3230]

Спасибо за Ваш труд!!!

[@alexnixx]

Отличное видео) Пару недель назад сам делал это задание на фронтендменторе, после просмотра видео понимаю что местами заговнокодил) Наверное, даже хорошо, что после решения самому я наткнулся на это) Теперь даже немного стыдно и хочется все переписать) Спасибо за контент

[@ЕвгенийШут-о7н]

спасибо большое за видео, спасибо большое за темную тему))

[@АнатолийГорбов-о1ь]

Отличное видео! много полезных фишек! было бы круто дополнить это видео роликом как это все затипизировать потом на TS))

[@mishanep]

На моем курсе по TS (степик или юдеми) есть такой ролик :))

[@thekamol]

Спасибо большое вам, было очень полезьно!

[@ДмитрийТитов-ц4щ]

Спасибо, Михаил!

[@serjdenisov2114]

Большое спасибо за урок!

[@Denisqa-ke1xo]

Да, круто) теперь возвращаюсь к уроку курса по TypeScript)

[@vzvanov]

Круто и полезно!!!

[@Brunopt893]

Gracias por el vídeo y saludos desde Portugal :)

[@mishanep]

De nada. Y saludos desde Malaga :)

[@AlexGabber]

Спасибо большое, но кажется тут вопрос styled-components не раскрыт, к сожалению. Основной сок этого пакета в динамических стилях через пропсы. В любом случае лайк :) Обожаю Михаила Непомнящего. А я пойду дальше изучать как лучше всего применять styled-components в своей личной библиотечке, может наткнусь где-то на крутую практику

[@Alexander-tp6gy]

очень круто, большое спасибо, вот бы следующим видео добавить еще пагинацию, на канале и в платном курсе такого нет

[@mishanep]

В пагинации на самом деле нет ничего сложного. Здесь единственно надо решить кто за неё отвечает с точки зрения данных - фронтенд или бэкенд. Чаще бэкенд, а это значит, что rest api должен предоставлять соответствующий инструмент. С точки зрения spa роутинга это всего лишь дополнительный параметр.

[@CJIu3eHb]

1. Про теминг из styled-components вопрос уже был, но несмотря на претензии к производительности, я бы попробовал родной. Хотя вариант с css-переменными и установкой класса на body тоже интересен. 2. Закрашивание контейнера в селекте на темной теме (49:10) через css с выборкой по наличию аттрибута id выглядит костыльно. В react-select есть способы кастомизировать стили, судя по докам это наверняка возможно. Иначе будет минорное обновление какое-нибудь, верстку в котором внутри компонента изменят - и адьес. 3. "всегда были трудности с weight и height" А как же length? :) 4. Вызов фильтрации через useEffect (1:55:00) - тоже костыль. Все таки мьютить линтер надо только в крайних случаях., он часто намекает на странности в коде. Если все равно грузим страны только один раз за время жизни приложения - то лучше в App.js и грузить, а потом прокидывать в HomePage только countries.

[@AlejandroMatos]

Я рада, что мой проект помогает вам создать это руководство :)

[@mishanep]

Вот здесь поподробнее пожалуйста))

[@АлексейМастяница-ы4е]

Ну лучший,что тут ещё сказать )

[@Дмитрийсекрет-н7о]

Огромное спасибо ))

[@starlord311]

Жду от Вас проект с Redux

[@АнтонМирный-с5х]

Спасибо

[@from_brest2631]

Моща 👍

[@osad4enko]

Было бы прекрасно увидеть в Вашем исполнении: связка React с Express и Mongo - - пару примеров и правильным API на стороне сервера, без REST API на стороне фронтэнда...

[@cooq_]

По поводу подсветки синтаксиса в компонентах styled-components для vscode расширение "vscode-styled-components", для webstorm "Styled components & Styled jsx"

[@mishanep]

Попробую, спасибо.

[@mishanep]

Поставил рекомендованное расширение. Так намного удобнее, спасибо =)

[@cooq_]

@@mishanep Спасибо за контент :)

[@leshiq4214]

пфф, я делаю такое на завтрак! ))) Довольно типовая задача, на самом деле. Для новичков норм, полезно/интересно.

[@mishanep]

Что происходит в основной приём пищи?

[@280282roger]

@@mishanep ОЗУ заканчивается =))))))))))))))

[@etemax]

спасибо за контент! если сравнивать с реальными задачами на работе, то уровень 4 advanced там примерно такой же будет?)

[@mishanep]

Реальные задачи обычно более декомпозированы. То есть не бывает задачи типа "создай всё приложение целиком". Обыкновенно есть бизнес-требования, заказчик хочет какую-то фичу реализовать. Дизайнеры рисуют - лиды декомпозируют на подзадачи и далее от простого к сложному. Где-то UI компонентик сверстать, где-то над логикой поработать. Ну плюс часто еще и тесты написать ко всему этому. Касаемо уровней сложности, здесь сильно от компании или проекта зависит. Бывает так что миддл при смене работы ранжируется джуном, бывает и наоброт.

[@etemax]

@@mishanep понял, спасибо за развернутый ответ!

[@J_artem]

🙏👏

[@mr.zxzxzxz3816]

спасибо за труд 👍👍👍

[@ds7629]

"Линтер не должен нам портить жизнь... ", наш девиз по жизни

[@alisher_akot]

Отличное видео) сделай пожалуйста pwa приложение погода

[@mishanep]

Почему именно погода? :)

[@alisher_akot]

@@mishanep мне, как новичку интересно было бы посмотреть, как изменяется фон при изменении погоды и другие функционалы приложении

[@aaaaaaaaaaaaaaaaa8296]

а чем заменить useHistory когда у меня версия react-router-dom v6? посмотрел несколько видосов и в stackoverflow тоже, нашел только что заменяется этот хук useNavigate, но вот в Details компоненте пропсов нету. помогите если кто знает как пропсы получить

[@AlexStr-h9t]

используй useParams() в Details

[@krasovsky1]

Отличное видео. Действительно ли так критично использование не родной темизации от SC?

[@mishanep]

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

[@DmitriyDev]

Спасибо за крутой урок) Скажите а в реальных проектах для каждого компонента нужно создавать папку? Или можно как вы делать?

[@mishanep]

Зависит от проекта. Но чаще всего да - папка. В папке, помимо компонета, тесты к нему, стили, истории для StoryBook, хэлперы и кастомные хуки когда требуется, иногда моки.

[@andriitkach6775]

Мега крутой контент! Спасибочки!! Мы все были бы очень благодарны за такой проектик в комбинации с TS. Запишите в TodoList пожалуйста.

[@gingashie]

Можно я поправлю, у многих на утюбе слышу как Theme читают как Зим, но на самом деле читается Фим. у буквосочетания TH два звука: звонкий (грубо говорят З) и глухой (Ф), вот в слове Theme именно глухой звук, который слышится как Ф или Т когда язык между зубами. Но это конечно не так важно, поэтому спасибо большое за такие подробные уроки, лично мне они уже очень много дали и помогли в работе.

[@mishanep]

Мой опыт заигрывания с теми или иными английскими словами в плане произношения довольно забавный. Любое произношение всегда находит недовольных =) Я помню, камнем преткновения долгое время был character, когда я преподавал детям создание игр на Unity. В каждой группе находился ребенок, пытавшийся поправить меня, даже когда я стал произносить корректно =) Поэтому с вашего позволения просто продолжу произносить как мне привычно, и как моё ухо регулярно слышит на англоязычных ресурсах. Впрочем, соглашусь, что иной раз произношение, далекое от нативного, может подпортить всю картину. В любом случае, рад что мои видео оказались для вас полезными =)

[@druf5962]

Спс за видео. В данном ролике смена темы происходит через styled-components, если хочу использовать обычный css, какой лучше подход использовать? Делать общие css data атрибуты, передавать через пропсы, контекст или еще какой вариант? На сколько styled-components актуален в больших проектах?

[@mishanep]

Я встречал комбинированные подходы использования styled-components и css-переменных. Что-то подобное, в частности, используют современные ui фреймворки, вроде той же chakra ui. Самый простой вариант css темизации - вешать текущую тему на body и менять значения css-переменных. На больших проектах styled-components имеет место быть, особенно удобно с точки зрения ленивой подгрузки стилей вместе со страницами/компонентами.

[@MaksTrueman]

@@mishanep "Самый простой вариант css темизации - вешать текущую тему на body и менять значения css-переменных." Получается, в таком подходе можно и без styled-components обойтись? Хочу на scss сделать. Там переменные также будут работать?)))) импорты только надо будет сделать, как понимаю.

[@АрчибальтГугенов]

Добрый день. Понимаю, что нет строгих правил, но можно ли создавать для каждого реакт компонента отдельный файл со стилизованными компонентами. А если есть переиспользуемые стилизованные компоненты, то закинуть их в общий файл для всего приложения. Получается, у каждого реакт компонента в папочке свой файл со стилями. И один общий для всего приложения. Или же есть более удобный способ? Как вы обычно делаете?

[@koshgosh3081]

Как вы считаете, что использовать с реактом для стилизации? Я здесь посмотрел изучил tailwind, Михаил, был бы рад увидеть ваш ответ)

[@mishanep]

Я чаще использую scss модули, либо готовую ui библиотеку, вроде chakra-ui.

[@koshgosh3081]

@@mishanep Спасибо! Попробуем)

[@e_viskhan]

18:05 - насчет того, что styled-components и обычные css переменные плохо сочетаются, - у меня в webstorm подсказки как для css, так и для переменных из файла css, подсказывает прямо все.

[@dyaroman1241]

Спасибо за видео. Один момент не дает покоя, почему переменная для скругления называется ‘radii’, а не ‘radius’ например? Или это была опечатка которая стала частью кода?

[@mishanep]

Приветствую. Нет, это не опечатка) это скорее привычка, выросшая из работы с конкретными инструментами, в том числе самописными. Если начать ковырять принципы работы с темизацией такой библиотеки как Chakra UI, или изучить подход styled-systems, то там вы тоже встретите radii. Скажем так, это общая практика.

[@alexnixx]

Подскажите, занимаюсь разработкай магазина. Делаю страницу с фильтрацией. По бренду, по категории, цене и тд тп. По вашему мнению, как "правильно" поступать в данной ситуации: 1. При изменении какого либо параметра (та же категория) мне заново делать запрос api на получения фильтрованного списка товаров. 2. По всему списку товаров, которые я уже получил, перебирать как вы в данном примере через filter & includes. Очень интересно ваше мнение, потому что на данном этапе мои понимания "что лучше", "что быстрее", "что ПРАВИЛЬНО". недостаточны. По этому и мечусь. Конечно, когда товаров, условно, 10 шт. - разницы никакой нет. Но если допустим, их будет 200 - что будет быстрее, здесь уже не понятно)

[@mishanep]

Здесь надо отталкиваться от API, с которым вы работаете. Если, допустим, у вас сотни позиций, а получаете вы их постранично, то надо делать новый запрос на каждый выбранный фильтр (посмотрите, как яндекс.маркет, например, работает). Если вы сразу получили все товары, то смысла запрашивать их повторно нет. Фильтруйте их на фронте.

[@alexnixx]

@@mishanep Спасибо большое!)

[@AnonimUA]

в react routet v6 немогу передать пропс match в компонент Details. Посоветуете решение?

[@AnonimUA]

разобрался - с помощью useParams()

[@ЕвгенийШут-о7н]

У меня одного UseEffect при первом рендере не срабатывает из-за чего countries не получает data и ломается приложение (1:22:15 на видео)? Может где-то реакт обновился кроме react-router-dom?

[@ShoTHIk]

Там countries поменялся на filteredCountries. Последний массив появляется(наполняется странами) только тогда, когда срабатывает функция onSearch={handleSearch}, которая передана из компонента ХоумПейдж в компонент Контрол. А срабатывает она, соответственно , при фильтрации стран (которые уже есть в массиве countries но ещё не передались в отфильтрованный массив filteredCountries). Может кто знает как это пофиксить?

[@denmccormik7654]

@@ShoTHIk добавить еще один useEffect, как на последних минутах видео

[@dietmarvogt7455]

Вопрос по переключению темы, а именно использование document. Если я правильно понимаю, при использовании document мы попадаем внутрь виртуального DOM, который контролирует React и без его ведома вносим новые элементы, что может со временем негативно отразиться в работе приложения. Если это так, то как тогда лучше решить подобную задачу?

[@mishanep]

Приветствую. document - это браузерный DOM, React для работы использует свой виртуальный, на базе которого потом обновляет браузерный. Но React-приложение обычно живет в контексте какого-то DOM-узла, например div#app, и ничего не знает про остальную структуру документа. В примере из видео мы обращаемся через document к body, с которым React никак не взаимодействует. Поэтому здесь всё ок. Антипаттерном было бы обращаться через document к каким-либо узлам, находящимся под управлением Реакта.

[@Dioni-h5q]

Я уверен, данное видео даст мне много знаний, но хочется прям кричать в голос для всех авторов... Хотелось бы видеть действительно правильный проект, а не " я сделаю все тут, для простоты и скорости ". Конечно, огромное спасибо и за этот материал)

[@mishanep]

Правильный проект - это иной хронометраж. Я видел западные авторы делали что-то такое в формате платных курсов с таймингом 12+ часов. И всё равно без тестов, без TypeScript. Да и спросом такой формат не слишком пользуется. Поэтому да, упрощаем, в попытке донести какое-то ограниченное количество идей.

[@poiu7185]

Здравствуйте,я первый.Вы лучший!!!!

[@АлексейИванов-ш4н1у]

Для тех кто делает в 2023... если не работает команда NPM START 1- удалить package-lock.json и modules если вообще есть 2- переустановить dependencies ---- WINDOWS (rd /s /q "node_modules" del package-lock.json del -f yarn.lock npm cache clean --force npm install) ----- MAC (rm -rf node_modules rm -f package-lock.json rm -f yarn.lock npm cache clean --force npm install)

[@michaelhamar3305]

Это задача примерно для какого уровня программиста junior/middle/ и тд?

[@kitsunaana9783]

Стажер/Junior, зависит от компании, уровни, это всего лишь условная градация

[@darkstyle7000]

Михаил, объясните пожалуйста почему на 59:35 - вы задаете для key={el.title} , а не индекс массива или же id

[@mishanep]

Приветствую! Для массива info делается перебор элементов через встроенный метод map. Для каждой итерации в переменную el попадает один элемент массива (т.е. объект со своими ключами). Поэтому индекс массива нам не нужен. Имея переменную el, мы напрямую обращаемся к свойствам объекта.

[@osad4enko]

create-react-app use only для уроков? в повседневной работе webpack ?

[@mishanep]

Create-react-app под капотом использует тот же webpack. Есть специальный скрипт, чтобы извлечь настройки сборщика и работать с ними напрямую. Но подход будет зависеть от проекта. Мне попадались разные варианты - и полностью с нуля сборка на webpack, и create-react-app в том же виде, что в данном проекте, и в "разобранном" состоянии с доп настройками, и с дополнительными либами, через которые можно "подкрутить" настройки базового шаблона. Сейчас популярность набирает сборщик vite (у меня по нему недавно было видео), на котором можно еще быстрее стартовать пет-проект.

[@alexeybudai8511]

Если кто-то пишет на typescript и не работает normalize.css, то добавте import в index.tsx, перед импортом index.css.И кстати если использовать webstorm, то он подскзывает название переменных css в styleComponents P.s Будут ли пхожие видосы на typescript и redux? Спасибо за видос

[@mishanep]

Следующий проект в плейлисте с redux, насколько помню. Думаю со временем и ts появится. Пока я всё ещё не уверен в направлении практических видео, какими они должны быть.

[@alexeybudai8511]

@@mishanep Ну если учитывать что такие ролики будут смотреть новички делать их и складывать себе на гит хаб, то думаю в таких роликах лучше объяснять как рабоатют те или иные популярные технологии, котрые будут интересны работадателю и с которыми вы работали, а что уже писать это уже не так важно,как по мне хоть интернет-магазин,хоть какой-нибудь туду лист. И если есть возможность добавить какую-то градацию по сложности.И вот что заметил, что таких гайдов много и они как бы масштабнее,но их возраст в большинсве больше года что для библиотек довольно много, лучше пусть проекты будут маленькими,но актуальными.

[@ekaterinam6363]

Подскажите, можно ли такие проекты добавлять к себе в портфолио или это считается плагиатом?

[@mishanep]

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

[@vladimirplyukhin5234]

Михаил, добрый день. Слушайте, сейчас useHistory не функционирует в новой версии, если я правильно понимаю. То есть нужно как-то работать через useParams в настройках роутинга, чтобы отображать инфо по клику на карточку страны?

[@vladimirplyukhin5234]

Добавил хук useParams в компонент Details и вроде заработало. Спасибо заранее, вы очень достойный преподаватель! P. S. Посмотрел ваш мини курс про обновлённый react-router-dom

[@dmaberlin]

@@vladimirplyukhin5234 расскажи, как именно ты юзал useParams?

[@vladimirplyukhin5234]

@@dmaberlin Привет мен, я уже не помню и если честно, сейчас даже нет времени пробежаться глазами по репе и вспомнить, но я помню что все моменты я решил с помощью видео Михаила и документации. Удачи тебе!

[@alexidino]

Ребят, подскажите есть у кого проблема с restcountries, почти всегда недоступен, заметил со многими rest api такое. В Казахстане грузит, это блочат получается, очень плохо.

[@DmitriyDev]

да в Казахстане многие сайты не доступны

[@doitbetter7687]

Мхаил, спасибо, офигенный урок получился! У меня вопрос, если в объекте присутсвует другой объект у которого меняется назнаение как в данном проекте с currencies и languages произошло(изменилась структура API), как распаковать это все?) струкутура такая: currencies:{ EUR: {name: 'Euro', symbol: 'E'} } и вот это слово EUR периодически меняется на какое-либо другое =( Спасибо!

[@doitbetter7687]

Разобралась, 😂 сделала через Object.entries(currencies) Object.values(languages) функции 😅

[@mishanep]

Здорово, что разобрались. Вообще в реальных проектах структура api не должна меняться. У неё могут быть разные версии, это да. Но на конкретную версию структура всегда одна. Это называется контрактом между фронтом и бэком. И обе стороны должны его соблюдать.

[@Pavlenko_M_]

Спасибо за совет, мне при выводе currencies помог Object.values(), Вы меня очень выручили! Михаил, Вам тоже большое спасибо за уроки, они часто тяжелые для меня, но очень эффективные :)

[@Sobanim]

с тайпскриптом бы и было бы топ)

[@mishanep]

Есть и с тайпскриптом)) На курсе по тайпскприту))

[@ГлебКодрик-ж5ж]

Скажи пж какие плагины устанавливаешь для vs code я все подобрать норм не могу а у тебя по виду крутой

[@mishanep]

Их много, на самом деле. У меня есть видео про мои настройки vs code. Может что-то конкретное интересует?

[@ГлебКодрик-ж5ж]

@@mishanep да в принципе визуал не нравится , очень много плагинов ставил и как то не очень , а у тебя зашло, я конкретно про компоненты как div выглядит и т . Д

[@mishanep]

За визуал в первую очередь отвечает тема. У меня основная тема - CodeSandbox, тема для иконок Material Icons. Для оформления разноцветных скобок используется Color Pair Colorizer 2. Остальные все плагины за функциональность отвечают.

[@velikorossnationalist4259]

У меня ошибка почему-то выходит. Полностью повторяю как Вы говорите в коде, даже скопировал часть кода из гитхаба и вставил у себя в редакторе. На 01-05-50 минуте. Там такая ошибка (их две) Encountered two children with the same key, `[object Object]`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted - the behavior is unsupported and could change in a future version. --------- и еще ------ Error: Objects are not valid as a React child (found: object with keys {common, official, nativeName}). If you meant to render a collection of children, use an array instead. Проблема похоже где-то здесь: {countries.map((c) => { const countryInfo = { img: c.flags.png, name: c.name, info: [ { title: 'Population', description: c.population.toLocaleString(), }, { title: 'Region', description: c.region, }, { title: 'Capital', description: c.capital, }, ], }; return ( ); })}

[@mishanep]

Object.Object говорит о том, что вы что-то не то передаёте на проп key. Вам нужна строка, вместо объекта

[@velikorossnationalist4259]

@@mishanep увы но передаю все то что-вы в видео говорите...((

[@markusha5630]

у кого будут проблемы в виде "TypeError: inputValue.match is not a function" при запросах, удаляйте расширение dev tools и заново устанавливаете

[@markusha5630]

после кода на 1:05:43 у меня возникает 2к ошибок и я не могу найти ответа на них, в чем проблема не пойму, вот пример одной из них : react-dom.development.js:86 Warning: Encountered two children with the same key, `[object Object]`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted - the behavior is unsupported and could change in a future version. Предупреждение: обнаружены два дочерних элемента с одним и тем же ключом `[object Object]`. Ключи должны быть уникальными, чтобы компоненты сохраняли свою идентичность при обновлениях. Неуникальные ключи могут привести к дублированию и/или пропуску дочерних элементов - такое поведение не поддерживается и может измениться в будущей версии. хелп плз

[@markusha5630]

короче от ошибок избавился поместив все в массив с объектами, а в качестве ключа предал index, но теперь проблема в том, что ничего не приходит от сервера,.... почему так сложно, почему нельзя просто

[@markusha5630]

короче от сервера все приходит, но не отрисовывает

[@mishanep]

Дебажить надо, смотреть какие данные у вас имеются на конкретных этапах разработки. Попробуйте посмотреть мое видео по дебаггингу реакт-приложения, возможно поможет разобраться и в вашем вопросе kzbin.info/www/bejne/q6ermKBmjdhqsMk

[@markusha5630]

@@mishanep первый раз мне автор отвечает, приятно)) оказывается данные с сервера приходят, но они не отрисовываются, то есть в консооль выводит, а на карточках пусто, как мне объяснил товарищ, проблема в том , что они приходят после отрисовки и не попадают в рендер, пока еще не решил проблему

[@aleksandrmayboroda85]

Код компонента CustomSelect со стилизацией по документации: !!! ***Импорты могут отличаться от ваших import styled from 'styled-components' import Select from 'react-select' const CustomSelect = styled(Select).attrs({ styles: { control: (provided) => ({ ...provided, backgroundColor: 'var(--colors-ui-base)', color: 'var(--colors-text)', borderRadius: 'var(--radii)', padding: '0.25rem', border: 'none', boxShadow: 'var(--shadow)', height: '50px', }), option: (provided, state) => ({ ...provided, cursor: 'poiner', color: 'var(--colors-text)', backgroundColor: state.isSelected ? 'var(--colors-bg)' : 'var(--colors-ui-base)', }), singleValue: (provided) => ({ ...provided, color: 'var(--colors-text)', paddingLeft: '0.25rem' }), menu: (provided) => ({ ...provided, backgroundColor: 'var(--colors-ui-base)', boxShadow: 'var(--shadow)', borderRadius: 'var(--radii)', }), container: (provided) => ({ ...provided, width: '100%', "@media(min-width: 767px)": { width: '200px', } }) } })`` export default CustomSelect

[@denmccormik7654]

только не понял почему в первом случае - var а во втором - нет const HeaderEl = styled.header` box-shadow: var(--shadow); background-color: (--colors-ui-base); `;

[@mishanep]

Там тож должен быть var. В строке писать css без подсветки - иногда чревато подобными ошибками =)

[@denmccormik7654]

@@mishanep Вас понял, спасибо за уроки. Попал к вам через Router и очень понравилось. Сегодня прошел собес и получил работу.

[@DmitriyDev]

Начинающему стоит смотреть?

[@mishanep]

Начинающий - понятие растяжимое =) Если есть базовое понимание в создании React-приложений, состояний, жизненного цикла, передачи компонентов, а также роутинга, то стоит. Если базы Реакта еще нет, то лучше сначала освоить ее.

[@markusha5630]

Что такое attrs()??

[@markusha5630]

а наверно понял: применяется только к тем тегам, у которых есть какие либо атрибуты(но не точно))))

[@HowManyShrimps-g7z]

ох, как же я не люблю styled-components, большая вероятность совершить грамматическую ошибку, а компилятор ничего не выдаст :(

[@Volodymyr-vq5fm]

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

[@den3212]

Прикольно, год назад выдел такой же проект, только другой подход kzbin.info/www/bejne/rKi9paB-iMZshbs

[@Артем-в9э9щ]

Если честно, я уже начиная со style-guide ничего не понял, какие-то непонятные вещи, переменные, лучшеб просто на реакте делали + sass

[@kitsunaana9783]

Значит, тебе было рановато такое делать

[@denispilyutin4843]

Спасибо , украл пару фишек)

[@v.demchenko]

Это худшее что я использовал в реакте. Styled Components... Не хорошие люди его создали. Что за синтаксис..

[@bogdankozlovskiy715]

Огромное спасибо )) за контент