RichText

Хорошая картинка. Только судя по всему, в данной логике основная локальная ветка - dev. Это далеко не всегда так. К примеру у нас - master (а гитхаб при создании новой репы предлагает по умолчанию ветку main). И если не имея ветки dev попытаться переключиться git checkout dev, получите ошибку. 

Так что здесь надо понимать под dev - основную ветку, которую вы получили при клонировании проекта.

Хорошая картинка. Только судя по всему, в данной логике основная локальная ветка - dev. Это далеко не всегда так. К примеру у нас - master (а гитхаб при создании новой репы предлагает по умолчанию ветку main). И если не имея ветки dev попытаться переключиться git checkout dev, получите ошибку. Так что здесь надо понимать под dev - основную ветку, которую вы получили при клонировании проекта.

Хорошая картинка. Только судя по всему, в данной л

Я задание выполнил, то есть оно рабочее.

Кстати, во многих задачах есть еще кнопка Помощь. Там тоже могут быть подсказки по сути.

Я задание выполнил, то есть оно рабочее. Кстати, во многих задачах есть еще кнопка Помощь. Там тоже могут быть подсказки по сути.

Я задание выполнил, то есть оно рабочее. Кстати, в

Сейчас посмотрю.

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

У тебя там сейчас отработало все так, как и должно было отработать. Если ты не понимаешь почему так происходит, а главное - пытаешься заставить код выполнять так, как ты этого хочешь, то займись корректировкой своего мышления. Ошибка многих начинающих в том, что они пытаются научиться магии, думая, что программировать - это заставлять машину делать то, что мы хотим. Это неправильно. Научиться программировать - это научиться понимать машину и понимать что произойдет, если сдеть то или иное, и главное - научиться понимать машину, почему происходит так, как происходит, а не так, как мы этого ожидали (то есть научиться фиксить баги в себе, а не в коде).

Сейчас твоя проблема все еще в том, что ты неправильно понимаешь выполнение useState. Пойми: useState всегда именно возвращает, а не устанавливает значение. Ты думаешь так: в первый раз она установит и потом вернет значение из стейта, а потом она будет сразу возвращать из стейта. Это неправильное восприятие. Хотя конечно же по сути именно так и происходит, но все же правильно понимать так: она сразу же вернет или значение из стейта (если оно есть), или значение, переданное по умолчанию (и присвоит это значение стейту, но так, что это не вызывает ререндеринга).

Для того, чтобы это понять, посмотри вот этот код: 

Выполни его в консоли браузера и попробуй оценить результат. А результат будет таков:

Обравти внимание, что state = undefined только в первый раз. Затем у нас всегда один и тот же объект стейта, только меняется его свойство.

В setState я прописал вызов через setTimeout, которое и позволяет симитировать работу нативного setState в том плане, что мы не получаем сразу измененного объекта стейта, то есть код далее выполняется все еще со старым значением стейта.

А второй setTimeout с двухсекундной задержкой имитирует повторный ререндеринг, в котором уже новое значение стейта, то есть хотя мы  и не вызываем в этом блоке setState, а получаем актуальное значение через useState, мы получаем именно новое значение. При этом я специально здесь сразу два вывода count сделал, чтобы показать тебе, что старая переменная count даже через 2 секунды содержала именно старое значение, после чего мы ей присвоили новое значение.

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

Кодепен не выводит их одновременно. Это же две разных строчки, то есть два отдельных вывода. Просто пауза между ними минимальная, так как в ответ на изменение стейта происходит сразу ререндеринг, и это срабатывает без твоего участия, то есть не приходится кликать кнопку для этого. У тебя там сейчас отработало все так, как и должно было отработать. Если ты не понимаешь почему так происходит, а главное - пытаешься заставить код выполнять так, как ты этого хочешь, то займись корректировкой своего мышления. Ошибка многих начинающих в том, что они пытаются научиться магии, думая, что программировать - это заставлять машину делать то, что мы хотим. Это неправильно. Научиться программировать - это научиться понимать машину и понимать что произойдет, если сдеть то или иное, и главное - научиться понимать машину, почему происходит так, как происходит, а не так, как мы этого ожидали (то есть научиться фиксить баги в себе, а не в коде). Сейчас твоя проблема все еще в том, что ты неправильно понимаешь выполнение useState. Пойми: useState всегда именно возвращает, а не устанавливает значение. Ты думаешь так: в первый раз она установит и потом вернет значение из стейта, а потом она будет сразу возвращать из стейта. Это неправильное восприятие. Хотя конечно же по сути именно так и происходит, но все же правильно понимать так: она сразу же вернет или значение из стейта (если оно есть), или значение, переданное по умолчанию (и присвоит это значение стейту, но так, что это не вызывает ререндеринга). Для того, чтобы это понять, посмотри вот этот код: Выполни его в консоли браузера и попробуй оценить результат. А результат будет таков: Обравти внимание, что state = undefined только в первый раз. Затем у нас всегда один и тот же объект стейта, только меняется его свойство. В setState я прописал вызов через setTimeout, которое и позволяет симитировать работу нативного setState в том плане, что мы не получаем сразу измененного объекта стейта, то есть код далее выполняется все еще со старым значением стейта. А второй setTimeout с двухсекундной задержкой имитирует повторный ререндеринг, в котором уже новое значение стейта, то есть хотя мы  и не вызываем в этом блоке setState, а получаем актуальное значение через useState, мы получаем именно новое значение. При этом я специально здесь сразу два вывода count сделал, чтобы показать тебе, что старая переменная count даже через 2 секунды содержала именно старое значение, после чего мы ей присвоили новое значение. Вот научись понимать эту логику и то, что код рендерера каждый раз выполняется от и до.

Кодепен не выводит их одновременно. Это же две раз

Магаз не запускается нужен ключ.

Copy the contents of .env.local.sample into a new file called .env.local

Put Your Stripe public api key in the /packages/shop/.env.local file's NEXT_PUBLIC_STRIPE_PUBLIC_KEY key.

Прочекал все открытые репо у всех .env.local в gitignore. Только покупать значит.

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

Image

Админка запускается. Магаз не запускается нужен ключ. Go to /packages/shop folder. Copy the contents of .env.local.sample into a new file called .env.local Put Your Stripe public api key in the /packages/shop/.env.local file's NEXT_PUBLIC_STRIPE_PUBLIC_KEY key. Прочекал все открытые репо у всех .env.local в gitignore. Только покупать значит. Но хотя бы код посмотрели, видно, что нормальный магаз.

Админка запускается. Магаз не запускается нужен кл

>> Насколько я понимаю там и фронт и бек вместе, так как это же сделано на nextJs и сделана связка с graphQl в том числе я так понял есть конектор для rest api и даже используетсяTypeScript

NextJS - это только движок веб-сервера. Он в базу данных никак не лезет. А как ты наверно понимаешь, данные должны храниться в базе данных.

GraphQL - это всего-лишь язык запросов (по большей степени). Он тоже про базу данных ничего не знает.

Rest API к GraphQL никакого отношения не имеет. То есть или одно или другое. Это они тебе такой маркетинговый ход дают: "юзай что хочешь!:)" (читай "***сь как хочешь и с чем хочешь"). 

А TypeScript - так вообще просто обертка поверх языка, помощник в IDE. Никакого участия в транспортировке данных не принимает.

А то, что ты что-то видишь в демке, какие-то там запросы, так знай, что есть такие вещи, как mock-сервера, как тот же msw. Если его заюзать, так ты в браузере даже в мониторе сети будешь видеть запросы, как настоящие, а на самом деле окажется, что это все имитация.

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

>> Насколько я понимаю там и фронт и бек вместе, так как это же сделано на nextJs и сделана связка с graphQl в том числе я так понял есть конектор для rest api и даже используетсяTypeScript NextJS - это только движок веб-сервера. Он в базу данных никак не лезет. А как ты наверно понимаешь, данные должны храниться в базе данных. GraphQL - это всего-лишь язык запросов (по большей степени). Он тоже про базу данных ничего не знает. Rest API к GraphQL никакого отношения не имеет. То есть или одно или другое. Это они тебе такой маркетинговый ход дают: "юзай что хочешь!:)" (читай "***сь как хочешь и с чем хочешь"). А TypeScript - так вообще просто обертка поверх языка, помощник в IDE. Никакого участия в транспортировке данных не принимает. А то, что ты что-то видишь в демке, какие-то там запросы, так знай, что есть такие вещи, как mock-сервера, как тот же msw. Если его заюзать, так ты в браузере даже в мониторе сети будешь видеть запросы, как настоящие, а на самом деле окажется, что это все имитация. В общем да, считаю, что эта идея мертвая, потому что это не формочку слепить, а интернет-магазин сделать. И даже если я сделаю, это все равно не будет проще, чем сейчас сделано здесь (а наверняка будет еще сложнее). Если бы все так просто было, то движком интернет-магазинов на JS было бы полно. А ты попробуй хоть пяток их найти... Их отсутствие как бы намекает...

>> Насколько я понимаю там и фронт и бек вместе, т

На всем сайте частенько встречается слово "Гнездо":) На самом деле это "Вложенность/Вложенный". Nested.

На всем сайте частенько встречается слово "Гнездо"

Вообщем ситуация следующая, пытаюсь встраивать в себя продвинутый алгоритм размещения на GitHub. Но постояно спотыкаюсь об один момент, вместо того, чтобы перед началом работы зайти и создать новый бранч залазию в старый бранч и начинаю вносить изменения там, потом вспоминаю, что нужно было создать новый бранч. Первый раз просто убил все изменения, а вчера сделал много изменений и попытался их перенести в новый бранч по следующему алгоритму: 

git stash 
git checkout master
git checkout -b "New_branch"
git stash apply

В итоге столкнулся с двумя проблемамами:

1. После того, как я спрятал изменения в git stash  и хотел переключиться на мастер получал ошибку:

error: Ваши локальные изменения в указанных файлах будут перезаписаны при переключении на состояние:

Сделайте коммит или спрячьте ваши изменения перед переключением веток.

Вобщем вроде спрятал, но начал вылазить .eslintcache, потом он еще много раз вылазил, победил его тоже сохранив в git stash, но потом он все равно выдовал везде ошибку, когда создал ветку он опять вылез здесь я уже воспользовался git reset --hard HEAD в новой ветке ибо достал он меня:)

2. В итоге когда я сделал git stash apply в новой ветке у меня VSC очень много файлов перекрасилось в фиолетовый цвет в одном файле вылетело сообщение типо подтвердите изменения я подтвердил во вкладке git в VSC все выделенные файлы фиолетовым были зачеркнуты, я их добавил нажав на плюс. Но в итоге оказалось, что помимо этих проблем он мне снес все css файлы, которые у меня были в проекте. Короче в итоге я решил сделать git pull и делать все изменения заново, потому-что все превратилось в какую-то кашу. 

Собственно вопрос вот в чем, как все-таки правильно поступать в таких случаях, если уже начал изменять в старой ветке, которую нужно было удалить и перенести эти изменения в новую ветку без потери кусков проекта. И можно ли как-то успокоить .eslintcache, чтобы он не лез во все щели в локальном репо, в .gitignor я его добавил, но как его подуспокоить локально не понимаю.

Вообщем ситуация следующая, пытаюсь встраивать в себя продвинутый алгоритм размещения на GitHub. Но постояно спотыкаюсь об один момент, вместо того, чтобы перед началом работы зайти и создать новый бранч залазию в старый бранч и начинаю вносить изменения там, потом вспоминаю, что нужно было создать новый бранч. Первый раз просто убил все изменения, а вчера сделал много изменений и попытался их перенести в новый бранч по следующему алгоритму: git stash 
git checkout master
git checkout -b "New_branch"
git stash apply В итоге столкнулся с двумя проблемамами: 1. После того, как я спрятал изменения в git stash  и хотел переключиться на мастер получал ошибку: error: Ваши локальные изменения в указанных файлах будут перезаписаны при переключении на состояние: .eslintcache Сделайте коммит или спрячьте ваши изменения перед переключением веток. Прерываю Вобщем вроде спрятал, но начал вылазить .eslintcache, потом он еще много раз вылазил, победил его тоже сохранив в git stash, но потом он все равно выдовал везде ошибку, когда создал ветку он опять вылез здесь я уже воспользовался git reset --hard HEAD в новой ветке ибо достал он меня:) 2. В итоге когда я сделал git stash apply в новой ветке у меня VSC очень много файлов перекрасилось в фиолетовый цвет в одном файле вылетело сообщение типо подтвердите изменения я подтвердил во вкладке git в VSC все выделенные файлы фиолетовым были зачеркнуты, я их добавил нажав на плюс. Но в итоге оказалось, что помимо этих проблем он мне снес все css файлы, которые у меня были в проекте. Короче в итоге я решил сделать git pull и делать все изменения заново, потому-что все превратилось в какую-то кашу. Собственно вопрос вот в чем, как все-таки правильно поступать в таких случаях, если уже начал изменять в старой ветке, которую нужно было удалить и перенести эти изменения в новую ветку без потери кусков проекта. И можно ли как-то успокоить .eslintcache, чтобы он не лез во все щели в локальном репо, в .gitignor я его добавил, но как его подуспокоить локально не понимаю.

Вообщем ситуация следующая, пытаюсь встраивать в с

Супер! По делу пока нечего)

Обзорное видео GraphQL-API на базе Prisma+Nexus+TypeScript+SQLite.

Обсуждение задания "Link to Internal Sections of a Page with Anchor Elements"

Реализация учебного проекта с нуля и подписка на комментарии в задачах

https://codepen.io/p1aton/pen/abBZppW

Ок. Проверим

Вот сейчас появилась идея обвешать весь твой код console.log, может будет более понятно, сейчас попробую. 

Вот сейчас появилась идея обвешать весь твой код c

Надо было юзать document.write(). Вот подробная статья на тему: http://alljs.ru/articles/document-write

В этой статье проблема данная не описывается, но природа ее мне ясна: ссылки, вписанные динамически, являются все еще частью родительского документа, потому и ссылка идет на саму страницу, а не внутри фрейма. А через frame.document.write() создается именно новый контент самого фрейма. 

Надо будет еще причесать и оттестировать и вылью коммит.

Победил :) Надо было юзать document.write(). Вот подробная статья на тему: http://alljs.ru/articles/document-write В этой статье проблема данная не описывается, но природа ее мне ясна: ссылки, вписанные динамически, являются все еще частью родительского документа, потому и ссылка идет на саму страницу, а не внутри фрейма. А через frame.document.write() создается именно новый контент самого фрейма. Надо будет еще причесать и оттестировать и вылью коммит. Спасибо за фидбэк!

Победил :) Надо было юзать document.write(). Вот п

Обсуждение задания "Nest an Anchor Element within a Paragraph"

Так я видел: готовлюсь к просмотру) 4 часа - это ни рау не шутки)

Так я видел: готовлюсь к просмотру) 4 часа - это н

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

Кстати, если добавить здесь именно проект (пока правда только через старый сайт https://old.prisma-cms.com/projects/create ). Так вот, если добавить проект, в нем можно указать ссылку на репозиторий, и в нем же создавать задачки с просьбой о помощи, так же расписав что и как. Такой формат более удачный. Как мне видится.

По теме: ты совсем запутался и неправильно воспринимаешь происходящее, и неправильно называешь явления. 

> Примерно понял из уроков, что если после const поставить console.log('####: usePokemons', pokemons); для примера для хука useState он показывает, что передаю пустой объект

После const ты вообще не можешь поставить console.log (а правильней говорить не ставить, а писать). В данном случае пишешь не после const, а на следующей строке, и не за const, а за const [pokemons, setPokemons] = useState({}); И чтобы понимать что происходи дальше и вообще, тебе надо разобраться что происходит именно здесь, то есть в const [pokemons, setPokemons] = useState({});. И важно здесь понимать синхронное выполнение кода происходит или асинхронное? Потому что от этого зависит будет ли заблокировано дальнейшее выполнение кода пока не выполнится useState({}) или не будет.

Читай очень внимательно про синхронный и асинхронный javascript: https://developer.mozilla.org/ru/docs/Learn/JavaScript/Asynchronous/Introducing (включая вложенные ссылки).

Так вот, важно уяснить, что по умолчанию в JS все функции синхронные, то есть выполнение происходит последовательно, то есть результат выполнения функции возвращается только тогда, когда функция выполнится. Но тут есть подводный камень в том плане, что в качестве результата выполнения функции может быть возвращен, к примеру, объект Promise. То есть это хоть и результат выполнения данной функции, но реальный результат будет возвращен позже, к примеру, через вызов .then(...), или, если мы находимся внутри функции, объявленной с ключевым словом async, используем await.

Да, это все очень сложно, и материала не мало, но это важно выучить и понять. Про асинхронность спрашивают на любом собеседовании, и без этого знания, думаю, даже в джуны нигде не возьмут, потому что иначе не сможешь программировать вообще, вот прям как в этом примере не понимаешь, как что и когда выполняется.

Так вот, запомни: setState (в том числе через хук useState, равно как и другие хуки) выполняется асинхронно. Чтобы понять, вот такой пример посмотрим:

Вот смотри, здесь console.log выполняется не только за выполнением useState, но и за двумя блоками условия if. 

При чем очевидно, что первое условие if(count === 0) выполнится обязательно при первом же рендеринге компонента, ведь мы в useState указали начальное значение - 0.

По логике, раз условие выполнилось и вызвался setCount(1) еще до выполнения console.log, у нас count уже должен стать 1 и в console.log должно вывестись 1. Но это не так. На самом деле у нас выведется и 0, и 1, как будто console.log вызвалось два раза. Более того, console.log не как будто два раза вызовется, а реально два раза. Почему так? Потому что при каждом изменении входящих свойств props или изменении текущего состояния state, у нас выполняется ререндеринг компонента, то есть вся его логика render выполняется опять от начала и до конца. И что же у нас на самом деле здесь произошло?

1. У нас установилось стейт-значение count = 0 

2. У нас выполнилось условие сравнения значения и вызвался метод изменения состояни.

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

3. Второе условие у нас не выполнилось и вызов изменения состояния не произошел.

4. Мы дошли до вывода переменной count в консоль.

И вот здесь важно еще один момент учесть - замыкания. Дело не только в том, что у нас setState асинхронная, но и в том, что переменную count мы получили выше выполнения логики if-setState. При этом эта переменная со своим собственным значением, а не ссылка на какой-нибудь сторонний объект, так что с момента ее инициализации, ее значение не поменяется в течение всей ее жизни. А у нас она инициировалась со значением 0. Вот мы в консоль и получаем 0.

5. Выполнился окончательный рендеринг HTML-разметки.

6. Мы ведь помним, что у нас выполнилось первое условие count === 0 и вызов изменения состояния? Вот. Состояние изменилось и происходит ререндеринг, то есть повторное выполнение всей логики компонента. И вот там у нас уже count объявляется с новым значением - 1. И пошли по кругу от пункта 1.

Второй пункт у нас не выполняется. Третий тоже. К 4 пункту мы пришли без изменений со значением count = 1 и получаем в консоль вывод 1. Опять пункт 6, то есть рендеринг HTML. 

В данном случае мы сразу получили 2 рендеринга компонента, потому что сразу же по условию изменили его состояние. Теперь, чтобы счеткик пошел дальше, нам уже надо кликать кнопку, чтобы вызвать обновление стейта. Кликаем раз и получаем новый count = 2 в стейте. Опять проходим 6 этапов и опять у нас условия не выполняются, так что в консоль как есть выводится 2. Кликаем еще раз. Опять все 6 пунктов, только в п 3 у нас срабатывает условие count === 3. Как и в первом рендеринге, у нас выполнение не прерывается и в консоль выводится 3, но у нас изменился стейт и выполняется новый рендеринг с числом 4. На выходе мы получили в консоль все пять выводов 0 1 2 3 4 5.

Покликать можно здесь: https://codepen.io/fi1osof/pen/RwoapyR

Надеюсь ты освоишь данный материал и тебе станет понятней.

Олег, во-первых, хорошо бы выложить проект на гитхаб (тем более, что он учебный), чтобы проще было разбираться. Кстати, если добавить здесь именно проект (пока правда только через старый сайт https://old.prisma-cms.com/projects/create ). Так вот, если добавить проект, в нем можно указать ссылку на репозиторий, и в нем же создавать задачки с просьбой о помощи, так же расписав что и как. Такой формат более удачный. Как мне видится. Но это так, к слову. По теме: ты совсем запутался и неправильно воспринимаешь происходящее, и неправильно называешь явления. > Примерно понял из уроков, что если после const поставить console.log('####: usePokemons', pokemons); для примера для хука useState он показывает, что передаю пустой объект После const ты вообще не можешь поставить console.log (а правильней говорить не ставить, а писать). В данном случае пишешь не после const, а на следующей строке, и не за const, а за const [pokemons, setPokemons] = useState({}); И чтобы понимать что происходи дальше и вообще, тебе надо разобраться что происходит именно здесь, то есть в const [pokemons, setPokemons] = useState({});. И важно здесь понимать синхронное выполнение кода происходит или асинхронное? Потому что от этого зависит будет ли заблокировано дальнейшее выполнение кода пока не выполнится useState({}) или не будет. Читай очень внимательно про синхронный и асинхронный javascript: https://developer.mozilla.org/ru/docs/Learn/JavaScript/Asynchronous/Introducing (включая вложенные ссылки). Так вот, важно уяснить, что по умолчанию в JS все функции синхронные, то есть выполнение происходит последовательно, то есть результат выполнения функции возвращается только тогда, когда функция выполнится. Но тут есть подводный камень в том плане, что в качестве результата выполнения функции может быть возвращен, к примеру, объект Promise. То есть это хоть и результат выполнения данной функции, но реальный результат будет возвращен позже, к примеру, через вызов .then(...), или, если мы находимся внутри функции, объявленной с ключевым словом async, используем await. Да, это все очень сложно, и материала не мало, но это важно выучить и понять. Про асинхронность спрашивают на любом собеседовании, и без этого знания, думаю, даже в джуны нигде не возьмут, потому что иначе не сможешь программировать вообще, вот прям как в этом примере не понимаешь, как что и когда выполняется. Так вот, запомни: setState (в том числе через хук useState, равно как и другие хуки) выполняется асинхронно. Чтобы понять, вот такой пример посмотрим: Вот смотри, здесь console.log выполняется не только за выполнением useState, но и за двумя блоками условия if. При чем очевидно, что первое условие if(count === 0) выполнится обязательно при первом же рендеринге компонента, ведь мы в useState указали начальное значение - 0. По логике, раз условие выполнилось и вызвался setCount(1) еще до выполнения console.log, у нас count уже должен стать 1 и в console.log должно вывестись 1. Но это не так. На самом деле у нас выведется и 0, и 1, как будто console.log вызвалось два раза. Более того, console.log не как будто два раза вызовется, а реально два раза. Почему так? Потому что при каждом изменении входящих свойств props или изменении текущего состояния state, у нас выполняется ререндеринг компонента, то есть вся его логика render выполняется опять от начала и до конца. И что же у нас на самом деле здесь произошло? 1. У нас установилось стейт-значение count = 0 2. У нас выполнилось условие сравнения значения и вызвался метод изменения состояни. И вот здесь очень важно понимать, что мы только вызвали изменение состояни, но состояние у нас еще не поменялось. Более того, выполнение кода здесь не прервалось, так что мы идем дальше. 3. Второе условие у нас не выполнилось и вызов изменения состояния не произошел. 4. Мы дошли до вывода переменной count в консоль. И вот здесь важно еще один момент учесть - замыкания. Дело не только в том, что у нас setState асинхронная, но и в том, что переменную count мы получили выше выполнения логики if-setState. При этом эта переменная со своим собственным значением, а не ссылка на какой-нибудь сторонний объект, так что с момента ее инициализации, ее значение не поменяется в течение всей ее жизни. А у нас она инициировалась со значением 0. Вот мы в консоль и получаем 0. 5. Выполнился окончательный рендеринг HTML-разметки. 6. Мы ведь помним, что у нас выполнилось первое условие count === 0 и вызов изменения состояния? Вот. Состояние изменилось и происходит ререндеринг, то есть повторное выполнение всей логики компонента. И вот там у нас уже count объявляется с новым значением - 1. И пошли по кругу от пункта 1. Второй пункт у нас не выполняется. Третий тоже. К 4 пункту мы пришли без изменений со значением count = 1 и получаем в консоль вывод 1. Опять пункт 6, то есть рендеринг HTML. В данном случае мы сразу получили 2 рендеринга компонента, потому что сразу же по условию изменили его состояние. Теперь, чтобы счеткик пошел дальше, нам уже надо кликать кнопку, чтобы вызвать обновление стейта. Кликаем раз и получаем новый count = 2 в стейте. Опять проходим 6 этапов и опять у нас условия не выполняются, так что в консоль как есть выводится 2. Кликаем еще раз. Опять все 6 пунктов, только в п 3 у нас срабатывает условие count === 3. Как и в первом рендеринге, у нас выполнение не прерывается и в консоль выводится 3, но у нас изменился стейт и выполняется новый рендеринг с числом 4. На выходе мы получили в консоль все пять выводов 0 1 2 3 4 5. Покликать можно здесь: https://codepen.io/fi1osof/pen/RwoapyR Надеюсь ты освоишь данный материал и тебе станет понятней.

Олег, во-первых, хорошо бы выложить проект на гитх

Да, работает. Возможно ошибся)

Олег, неправильно делаешь (просто картинку прислал). Делай клон кодепен-проекта и присылай ссылку.

Олег, неправильно делаешь. Делай клон кодепен-прое

Комментарии в задачах и обновленный редактор в комментариях

>> Собственно вопрос вот в чем, как все-таки правильно поступать в таких случаях....

Независимо от того, какой у тебя случай возникает, ты никогда не сможешь поступить правильно, если не сделал перед этим git status. То есть в твоем случае скорее всего получилось следующее: после очередной операции у тебя гит-проект был измененным, то есть git status наверняка показывал изменения (вероятней всего как раз этой твоей .eslintcache). В таком случае попытка переключения как раз и обламывалась. 

Почему слетели css файлы? Они явно были в состоянии измененном или в текущем подготовленном коммите, который так и не удалось сохранить через git commit (то есть git add . сделал, а git commit нет (или не смог)). В таком случае git reset --hard удалит и эти файлы.

>> в .gitignor я его добавил, но как его подуспокоить локально не понимаю.

Если ты добавил .gitignor, то это не успокоит, потому что надо .gitignore:)

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

git rm --cached (если папка, то еще и флаг -r надо добавить и очень важно: путь не должен завершаться на слеш / ).

В общем, с гитом, даже не надейся, что уже скоро будет все точно понятно и не будет ошибок :) Так что всегда будь внимателен и обдумывай каждый шаг. Даже я, уже не первый год с ним работаю, иногда делаю ошибки. Пару месяцев назад вот тоже снес кучу изменений незакоммиченных. А git stash от тебя вот узнал :) (Всегда просто делал git checkout -b newBranch просто на горячую, все изменения уходили в новую ветку и там коммитились, а прошлая ветка забывала про это). А еще ведь есть черепик, ребейз и прочее мракобесие :)

>> Собственно вопрос вот в чем, как все-таки правильно поступать в таких случаях.... Независимо от того, какой у тебя случай возникает, ты никогда не сможешь поступить правильно, если не сделал перед этим git status. То есть в твоем случае скорее всего получилось следующее: после очередной операции у тебя гит-проект был измененным, то есть git status наверняка показывал изменения (вероятней всего как раз этой твоей .eslintcache). В таком случае попытка переключения как раз и обламывалась. Почему слетели css файлы? Они явно были в состоянии измененном или в текущем подготовленном коммите, который так и не удалось сохранить через git commit (то есть git add . сделал, а git commit нет (или не смог)). В таком случае git reset --hard удалит и эти файлы. >> в .gitignor я его добавил, но как его подуспокоить локально не понимаю. Если ты добавил .gitignor, то это не успокоит, потому что надо .gitignore:) Но даже если ты добавил .gitignore и даже правильно прописал игнор, это не поможет, если папка или файл уже отслеживаются. Надо вычистить из кеша гита. git rm --cached (если папка, то еще и флаг -r надо добавить и очень важно: путь не должен завершаться на слеш / ). https://git-scm.com/docs/git-rm В общем, с гитом, даже не надейся, что уже скоро будет все точно понятно и не будет ошибок :) Так что всегда будь внимателен и обдумывай каждый шаг. Даже я, уже не первый год с ним работаю, иногда делаю ошибки. Пару месяцев назад вот тоже снес кучу изменений незакоммиченных. А git stash от тебя вот узнал :) (Всегда просто делал git checkout -b newBranch просто на горячую, все изменения уходили в новую ветку и там коммитились, а прошлая ветка забывала про это). А еще ведь есть черепик, ребейз и прочее мракобесие :)

>> Собственно вопрос вот в чем, как все-таки прави

ППКС )

>> Если бы ты смог немного переписать свой пример под этот сервис

Нет, не буду. Это получится медвежья услуга. Ведь нельзя просто так переписать с сохранением функционала реакта. Мы ведь в реакте пишем мало, а под капотом происходит много. Поэтому мне придется, во-первых, написать больше кода (а тогда и материала для изучения у тебя возникнет больше, и сложнее будет освоить). Во-вторых, ты не сможешь мыслить в стиле реакта. Тебе надо осваивать именно в реакте, чтобы мыслить в реакте, потому что там другая парадигма. Так что осваивай то, что есть.

А вообще, тебе наверно поможет лучшее освоение классовых компонентов, потому что очевидно, что ты не понимаешь, что есть объект стейта (в классах он через this.state), и что при выполнении setState() происходит обновление этого объекта. И что такое поведение функций называется "Побочный эффект", когда функция вызывается не для того, чтобы что-то вернуть, а чтобы что-то изменить. 

>> Если бы ты смог немного переписать свой пример под этот сервис Нет, не буду. Это получится медвежья услуга. Ведь нельзя просто так переписать с сохранением функционала реакта. Мы ведь в реакте пишем мало, а под капотом происходит много. Поэтому мне придется, во-первых, написать больше кода (а тогда и материала для изучения у тебя возникнет больше, и сложнее будет освоить). Во-вторых, ты не сможешь мыслить в стиле реакта. Тебе надо осваивать именно в реакте, чтобы мыслить в реакте, потому что там другая парадигма. Так что осваивай то, что есть. А вообще, тебе наверно поможет лучшее освоение классовых компонентов, потому что очевидно, что ты не понимаешь, что есть объект стейта (в классах он через this.state), и что при выполнении setState() происходит обновление этого объекта. И что такое поведение функций называется "Побочный эффект", когда функция вызывается не для того, чтобы что-то вернуть, а чтобы что-то изменить.

>> Если бы ты смог немного переписать свой пример

Can I use this template For Next Js learning or GraphQL learning ? 

Yes,  You can use this template for your Learning process. The coding  structure is made easy for our customers. We also provided some built in  components to our customers for easy understanding

В их FAQ написано: Can I use this template For Next Js learning or GraphQL learning ? Yes,  You can use this template for your Learning process. The coding  structure is made easy for our customers. We also provided some built in  components to our customers for easy understanding

В их FAQ написано: Can I use this template For Nex

непонятный перевод задания с английского

HtmlTag

Олег, на будущее: не присылай в предложения ничего, на что нет исходников :)

ContentEditor

Комментарий к топику Практическое обучение на основе интернет-магазина

Не за что!

Хороший cheat sheet от гита https://education.github.com/git-cheat-sheet-education.pdf

Хороший cheat sheet от гита https://education.gith

А теперь просто попробуй все это запустить локально.

А теперь просто попробуй все это запустить локальн

Стоит он не так много можно и купить. Вопрос не в этом, вопрос в предложеном формате обучения. Насколько я понимаю там и фронт и бек вместе, так как это же сделано на nextJs и сделана связка с graphQl в том числе я так понял есть конектор для rest api и даже используетсяTypeScript, как ты любишьi.

Даже если он в поряде и в целом годится, для полноценной реализации придется дописывать бэк.

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

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

Стоит он не так много можно и купить. Вопрос не в этом, вопрос в предложеном формате обучения. Насколько я понимаю там и фронт и бек вместе, так как это же сделано на nextJs и сделана связка с graphQl в том числе я так понял есть конектор для rest api и даже используетсяTypeScript, как ты любишьi. Даже если он в поряде и в целом годится, для полноценной реализации придется дописывать бэк. Что там нужно дописывать? Мы с тобой, как раз и обсуждали, что nextJs - это фраймворк, который позволяет работать в том числе и с беком из фронта. Плюс если ты посмотришь внимательно там есть админка на тех же технологиях, плюс чекаут, каталог, верстка, авторизация и все остальное получается это по сути готовый магазин на nextJs насколько я понимаю. Вопрос не в том, чтобы взять его и полностью переписать, а в том чтобы взять простую болванку и понять, как она работает. Короче я предложил ты думай интересно или нет, если считаешь, что идея мертвая значит забыли.

Стоит он не так много можно и купить. Вопрос не в

Комментарий к топику Мануал по работе с GIT

Очень детально расписал, теперь более понятно, но не все конечно буду изучать синхронный и асинхронный javascript. 

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

Для того чтобы получить первоначальное состояние useState({}); написал console.log('####: useStatePokemons', pokemons); после получения состояния.

Для того чтобы получить snapshot в аргументе setPokemons написал console.log('####: useEffectPokemon', snapshot.val()); после изменения состояния.

В итоге получил такой вывод в консоли (картинка внизу):

1. На первом рендеринге он отбразил текущее состояние useState пустой объект, который я туда положил. 

2. При первом же рендеринге, после текущего состояния, он так же увидел измененное состояние, которое пришло через setState.

3. После того, как DOM обновился он уже выполнил useEffect и сделал новый рендеринг.

Правильно понял или все-таки не совсем?

И что мне все таки делать с этой функцей?  Как получить состояние карточки при клике в console.log я его уже куда только не засовывал он нигде не работает . 

Очень детально расписал, теперь более понятно, но не все конечно буду изучать синхронный и асинхронный javascript. Теперь на примере моего кода, попробую воспроизвести, что понял. Для того чтобы получить первоначальное состояние useState({}); написал console.log('####: useStatePokemons', pokemons); после получения состояния. Для того чтобы получить snapshot в аргументе setPokemons написал console.log('####: useEffectPokemon', snapshot.val()); после изменения состояния. В итоге получил такой вывод в консоли (картинка внизу): 1. На первом рендеринге он отбразил текущее состояние useState пустой объект, который я туда положил. 2. При первом же рендеринге, после текущего состояния, он так же увидел измененное состояние, которое пришло через setState. 3. После того, как DOM обновился он уже выполнил useEffect и сделал новый рендеринг. Правильно понял или все-таки не совсем? И что мне все таки делать с этой функцей?  Как получить состояние карточки при клике в console.log я его уже куда только не засовывал он нигде не работает .

Очень детально расписал, теперь более понятно, но

Супер! Очень правильное решение!

Бывает. Видимо просто вкладка была ранее открыта. Без перезагрузки страницы у нас тут пока нет хотзамены скриптов

Бывает. Видимо просто вкладка была ранее открыта.

А так, по делу, там видос 4-часовой уже выложен :)

Нечего или ничего? :) А так, по делу, там видос 4-часовой уже выложен :)

Нечего или ничего? :) А так, по делу, там видос 4-

Это не существенно, но в задании не обязательно переводить  с английского «Фотографии кошки» на «Перейти к нижнему» , иначе при запуске тестов идет поиск  "Jump to Bottom" и получается ошибка. В принципе во всех заданиях так. 

Это не существенно, но в задании не обязательно пе

В этом репо есть папка server, если правильно понимаю конектор к MySql https://github.com/happyfisherod/pickbazar

https://github.com/samakovuluk/pickbazar https://github.com/offsecdev/PickBazar https://github.com/prettydev/pickbazar В этом репо есть папка server, если правильно понимаю конектор к MySql https://github.com/happyfisherod/pickbazar

https://github.com/samakovuluk/pickbazar https://g

Я не затягиваю мне нужно его доделать там немного осталось, чтобы переносить готовое решение. Плюс ты мне мозг взорвал асинхроностью, вчера весь день изучал асинхроность, промисы, замыкание, контекст и.тд., но пока так и непонял, как работает твой пример. Нашел вот такой сервис, который демнострирует, как работает event loop http://latentflip.com/loupe/ ,  примерно понятно, но твой пример не получается там посмотреть, там редактор немного по другому работает, чем на codepen.io в return ругается на кнопку ее нужно в html выносить, а как ее вернуть там не понимаю. Если бы ты смог немного переписать свой пример под этот сервис было бы очень круто, потому-что сейчас сцуко не получается понять, как все-таки работает твой пример. 

Я не затягиваю мне нужно его доделать там немного

Проверил, да работает. Большое спасибо) и спасибо за подробное пояснение сути проблемы. Это очень важно в начале.

Проверил, да работает. Большое спасибо)

Учимся понимать машину и асинхронно взрываем себе мозг :)

Итак, в бар входит в ковбой и требует выпивку - это объявление, декларация намерений.

Бармен спрашивает - чем будешь платить: деньгами, отдашь пистолет или  отработаешь мытьем посуды? - Я заплачу, - отвечает ковбой, - у меня  есть деньги. - Это определение типа данных.

Тогда плати 5 баксов и получай выпивку - Ковбой платит и веселье начинается - Это инициализация, присвоение начального значения, запуск процесса в работу.

Инициализируем переменую state со значением undefined. Машина сохраняет ее в памяти со значением undefined.

Инициализируем функцию useState в аргуаментах ждем парметр defaultValue с условием, если state === undefined присвой state пустой обьект в который положи ключ field со значением defaultValue. Машина видит, что мы инициализировали функцию useState со значением state = undefined.

Инициализируем функцию setState в аргуаментах ждем парметр value в теле функции вызываем функцию setTimeout, которой в объект state записываем значение ключ field со значением value. Данная функция отправляется в стек, но так как внутри функции setState, находится функция setTimeout, которая не является частью JavaScript движка, а является Web API браузера как дополнительный функционал она отправляется в Web API. Далее Web API браузера запускает таймер в 2000ms, оставляя на фоне setTimeout().

Следующая строка в нашем скрипте это console.log("state", state); , отправленное в стек и выкинутое оттуда после выполнения. Это получается наш первый выкинутый в консоль результат в данный момент наш state = undefined, поэтому получаем:

Инициализируем переменую count и делаем вызов функции useState(со значением 5) и присваеваем результат перемной count. В аргументе defaultValue функция useState теперь хранится значение 5. Теперь в функции у нас идет проверка условий if(state === undefined), так как state у нас по прежнему undefined условие true, поэтому оно выполняется дальше создаем пустой объект state = {};, переходим к следуещему условию создаем в объекте ключ field со значением defaultValue получается field: 5, так как мы вызвали функцию useState и положили в defaultValue = 5. Теперь return нам возвращает Return value 5.

Здесь тоже мне не свосем понятно, когда функция useState попадает в стек при вызове, как сейчас или при инициализации она сразу попадает в стек и жет своего выполнения?

Следующая строка в нашем скрипте это console.log("count 1", count); , отправляется в стек и выкидывается оттуда после выполнения. В результате мы получаем наш второй вывод в консоль. 

На этом месте все, я уже ничего не понимаю на самом деле, что происходит. Во-первых где наша функция setState со своим setTimeout она здесь вообще в процесе участвует или мы про нее вообще забыли?

Откуда при инициализации функции setState появился count со значением undefined (откуда он вообще count этот берется)?

В этом шаге мы получаем в консоль лог count из инициализированной переменой var count = useState(5); или он к нам все-таки прилетает из функции setState?

Учимся понимать машину и асинхронно взрываем себе мозг :) Итак, в бар входит в ковбой и требует выпивку - это объявление, декларация намерений. Бармен спрашивает - чем будешь платить: деньгами, отдашь пистолет или  отработаешь мытьем посуды? - Я заплачу, - отвечает ковбой, - у меня  есть деньги. - Это определение типа данных. Тогда плати 5 баксов и получай выпивку - Ковбой платит и веселье начинается - Это инициализация, присвоение начального значения, запуск процесса в работу. Шаг 1. Инициализируем переменую state со значением undefined. Машина сохраняет ее в памяти со значением undefined. Шаг 2. Инициализируем функцию useState в аргуаментах ждем парметр defaultValue с условием, если state === undefined присвой state пустой обьект в который положи ключ field со значением defaultValue. Машина видит, что мы инициализировали функцию useState со значением state = undefined. Шаг 3. Инициализируем функцию setState в аргуаментах ждем парметр value в теле функции вызываем функцию setTimeout, которой в объект state записываем значение ключ field со значением value. Данная функция отправляется в стек, но так как внутри функции setState, находится функция setTimeout, которая не является частью JavaScript движка, а является Web API браузера как дополнительный функционал она отправляется в Web API. Далее Web API браузера запускает таймер в 2000ms, оставляя на фоне setTimeout(). Шаг 4. Следующая строка в нашем скрипте это console.log("state", state); , отправленное в стек и выкинутое оттуда после выполнения. Это получается наш первый выкинутый в консоль результат в данный момент наш state = undefined, поэтому получаем: 1. "state" undefined Шаг 5. Инициализируем переменую count и делаем вызов функции useState(со значением 5) и присваеваем результат перемной count. В аргументе defaultValue функция useState теперь хранится значение 5. Теперь в функции у нас идет проверка условий if(state === undefined), так как state у нас по прежнему undefined условие true, поэтому оно выполняется дальше создаем пустой объект state = {};, переходим к следуещему условию создаем в объекте ключ field со значением defaultValue получается field: 5, так как мы вызвали функцию useState и положили в defaultValue = 5. Теперь return нам возвращает Return value 5. Здесь тоже мне не свосем понятно, когда функция useState попадает в стек при вызове, как сейчас или при инициализации она сразу попадает в стек и жет своего выполнения? Шаг 6. Следующая строка в нашем скрипте это console.log("count 1", count); , отправляется в стек и выкидывается оттуда после выполнения. В результате мы получаем наш второй вывод в консоль. 2. "count 1" 5 На этом месте все, я уже ничего не понимаю на самом деле, что происходит. Во-первых где наша функция setState со своим setTimeout она здесь вообще в процесе участвует или мы про нее вообще забыли? Откуда при инициализации функции setState появился count со значением undefined (откуда он вообще count этот берется)? В этом шаге мы получаем в консоль лог count из инициализированной переменой var count = useState(5); или он к нам все-таки прилетает из функции setState?

Учимся понимать машину и асинхронно взрываем себе

Супер! Как раз плаваю в гите) Спасибо, Олег!

> Для того чтобы получить первоначальное состояние useState({}); 

Уходи от такой формулировки. Это неправильная формулировка. Правильная такая: Для того чтобы получить состояние useState({}); 

Никогда не думай первоначальное это состояние или нет. Всегда думай - это текущее состояние. Не думай, что useState что-то устанавливает. Она, конечно, устанавливает, но только при первом вызове. То есть в последующие она не будет ничего устанавливать, а всегда (как и в первый раз) возвращать массив с двумя элементами. 1 - состояние. 2 - метод для установки нового состояния. Ты, конечно, можешь смотреть на то, что передал в useState, чтобы понимать, что туда будет установлено по умолчанию, но всегда должен думать только обо дном - что ты в итоге получишь из состояния. Так правильно думать в случае с реактом.

> Для того чтобы получить snapshot в аргументе setPokemons написал console.log('####: useEffectPokemon', snapshot.val()); после изменения состояния.

Опять неправильно. Вообще все неправильно.

Нельзя получить что-то в аргументе. Можно только передать в качестве аргумента, и можно получить из аргумента. А получить в аргументе - это бессмыслица. Получить можно в функции. И вот теперь разберись что у тебя в аргументах, кто передал эти аргументы и что ты делаешь с полученными аргументами.

А теперь самое главное: а кто тебе сказал, что handleClickCard обязательно вызывается? Ты смотрел исходный код PokemonCard? Там вообще ожидается свойство onCardClick? Оно там вообще обрабатывается? Или по какой такой логике ты считаешь, что любое передаваемое свойство обязательно доложно как-то обрабатывается?

Еще раз: прикладывай ссылку на проект. Кусок кода, вырванный из контекста - то же самое, что и предложение, вырванное из контекста.

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

1. Create React App - это вот прям только для обучения. Боевые проекты на нем не следует делать. Если ты взял проект со стороны, то ОК. Если ты делаешь сам с нуля и взял его вместо того, чтобы взять https://github.com/prisma-cms/nextjs, то совсем не ОК. 

Забудь, что ты когда-то это видел. Не используй никогда и нигде. Я видел уже много людей, которые думали, что так норм. А потом открывали для себя styled-components и прозревали. Не учись тому, что не нужно и чему есть более правильные альтернативы.

3. Переставая писать в .js, пиши в .tsx

Если бы ты использовал TypeScript, то он бы тебе подсказал, что ты передаешь то, чего от тебя не ждут вообще, и сэкономил бы много времени.

Еще раз: не учи React + JavaScript, учи сразу React + TypeScript. Вопрос в нескольких днях. Но ты сразу встанешь на более правильный путь. 

Вот тебе домашнее задание: Возьми теперь https://github.com/prisma-cms/nextjs и перенеси туда свой проект, сразу на TS. Можешь прям создать здесь проект и там вопросы задавай и задачи ставь. Я ближайшие часа три здесь еще буду, так что сразу смогу сопроводить. Вот перенесешь туда и сразу ощутишь разницу. И начнешь учиться в правильном ключе.

> Для того чтобы получить первоначальное состояние useState({}); Уходи от такой формулировки. Это неправильная формулировка. Правильная такая: Для того чтобы получить состояние useState({}); Никогда не думай первоначальное это состояние или нет. Всегда думай - это текущее состояние. Не думай, что useState что-то устанавливает. Она, конечно, устанавливает, но только при первом вызове. То есть в последующие она не будет ничего устанавливать, а всегда (как и в первый раз) возвращать массив с двумя элементами. 1 - состояние. 2 - метод для установки нового состояния. Ты, конечно, можешь смотреть на то, что передал в useState, чтобы понимать, что туда будет установлено по умолчанию, но всегда должен думать только обо дном - что ты в итоге получишь из состояния. Так правильно думать в случае с реактом. > Для того чтобы получить snapshot в аргументе setPokemons написал console.log('####: useEffectPokemon', snapshot.val()); после изменения состояния. Опять неправильно. Вообще все неправильно. Нельзя получить что-то в аргументе. Можно только передать в качестве аргумента, и можно получить из аргумента. А получить в аргументе - это бессмыслица. Получить можно в функции. И вот теперь разберись что у тебя в аргументах, кто передал эти аргументы и что ты делаешь с полученными аргументами. А теперь самое главное: а кто тебе сказал, что handleClickCard обязательно вызывается? Ты смотрел исходный код PokemonCard? Там вообще ожидается свойство onCardClick? Оно там вообще обрабатывается? Или по какой такой логике ты считаешь, что любое передаваемое свойство обязательно доложно как-то обрабатывается? Еще раз: прикладывай ссылку на проект. Кусок кода, вырванный из контекста - то же самое, что и предложение, вырванное из контекста. И, посмотрев код твоего проекта учебного, могу сказать следующее: учебный проект - это конечно же хорошо. На нем интересней учиться. Но учишься ты совсем не тому, чему следует. 1. Create React App - это вот прям только для обучения. Боевые проекты на нем не следует делать. Если ты взял проект со стороны, то ОК. Если ты делаешь сам с нуля и взял его вместо того, чтобы взять https://github.com/prisma-cms/nextjs, то совсем не ОК. 2. Забудь, что ты когда-то это видел. Не используй никогда и нигде. Я видел уже много людей, которые думали, что так норм. А потом открывали для себя styled-components и прозревали. Не учись тому, что не нужно и чему есть более правильные альтернативы. 3. Переставая писать в .js, пиши в .tsx Если бы ты использовал TypeScript, то он бы тебе подсказал, что ты передаешь то, чего от тебя не ждут вообще, и сэкономил бы много времени. Еще раз: не учи React + JavaScript, учи сразу React + TypeScript. Вопрос в нескольких днях. Но ты сразу встанешь на более правильный путь. Вот тебе домашнее задание: Возьми теперь https://github.com/prisma-cms/nextjs и перенеси туда свой проект, сразу на TS. Можешь прям создать здесь проект и там вопросы задавай и задачи ставь. Я ближайшие часа три здесь еще буду, так что сразу смогу сопроводить. Вот перенесешь туда и сразу ощутишь разницу. И начнешь учиться в правильном ключе.

> Для того чтобы получить первоначальное состояние

Нужно просто создать текст + ссылка. По типа   "cat photos" - это ссылка, а текст рядом  "View more"  "Смотри больше". В задании надо писать все на английском, иначе тесты не пройдут.  Вот так нужно сделать View more cat photos 

Обсуждение задания "Nest an Anchor Element within a Paragraph"

Обсуждение задания "Turn an Image into a Link"

Обсуждение задания "Link to Internal Sections of a Page with Anchor Elements"

Обзорное видео GraphQL-API на базе Prisma+Nexus+TypeScript+SQLite.

Реализация учебного проекта с нуля и подписка на комментарии в задачах

Вопрос про console.log в функциях и хуках

Практическое обучение на основе интернет-магазина

Мануал по работе с GIT

Комментарии в задачах и обновленный редактор в комментариях

Поиск в документе всех элементов с position: absolute | fixed