Таки сам постоянно пользуюсь.

https://ru.reactjs.org/docs/components-and-props.html Кстати очень хорошая документация, очень доступно все объясняют.

Всем привет! Сегодня закрыл две задачи и выкатил обновления (да, в задачах и уроках появились хлебные крошки на учебные разделы): https://freecode.academy/tasks/ckjpwt9sph8e10730jdzo7vs6 https://freecode.academy/tasks/ckk45dvgdmjfs0730tlgy9ndl В чем соль? В этих задачах указаны ссылки на коммит в гитхабе: https://github.com/freecode-academy/freecode.academy/commit/2c71ef5e200b02b287a540fa0623228bc8bc8ede В коммите, в свою очередь, обратные ссылки на задачи. И так я буду делать и в дальнейшем (и вам советую по возможности). Для чего это нужно? Если вы хотите развиваться, вам будет очень полезно выполнять code review, то есть просматривать изменения в коде и пытаться понять что для чего сделано и правильно ли сделано. А описание задачи должно как раз помогать в оценке для чего что делалось. Ну а на сайте (или на локальном проекте) можно посмотреть как этот код работает и поиграться с ним.

С топиком, видимо, неудачный пример я привел, потому что в таске вьюха - это функциональный компонент, а в топике классовые. Подробней о различиях между ними читай здесь: https://ru.reactjs.org/docs/components-and-props.html Если коротко, то у классовых компонентов несколько методов есть и в итоге конечная отрисовка выполняется в методе Component::render, а функциональные - это конечные функции, у которых нет условно дополнительных методов и они как будто и есть функция render, то есть они сами по себе через return возвращают то, что должно быть отрисовано на странице, а вся логика выполняется в них самих (и различных хуках, которые так же выполняются в них). Сразу обозначу, что сейчас я все пишу на функциональных, и вам советую. А где встретятся class-based - это просто legacy, то есть наследие, которое лень было переписывать :) Итак, тебе следует разобраться с жизненным циклом наших страниц. 1. Основа всего - GraphQL API. Так как данные мы забираем по API, то если мы не можем получить эти данные, то и вывести ничего не можем. Для того, чтобы выполнить GraphQL-запрос на API-сервер, нам надо этот самый запрос прописать (то есть query task {...} и т.п.). В классическом случае эти запросы прописывались непосредственно в аполло-запросах. Пример: https://www.apollographql.com/docs/react/data/queries/ Но это не круто. Представь, что один и тот же запрос выполняться будет в нескольких компонентах. Надо запросы уметь складывать куда-то так, чтобы можно было из разных мест дергать один и тот же. Но тут возникает и другая проблема: надо потом иметь возможность узнавать какие компоненты мы зааффектили, если изменили этот запрос, так как изменения могут быть критическими и надо бежать поправлять все компоненты, которые используют эти запросы. А еще нужна проверка, что эти запросы соответствуют схеме API-сервера, а то вдруг на сервере что-то поменялось и наши запросы сломанные. Вот для решения этих задач и написан скрипт, который вызывается yarn generate:types Этот скрипт обращается к API-серверу, тянет его схему и генерирует из него TypeScript типы https://raw.githubusercontent.com/freecode-academy/freecode.academy/master/src/modules/gql/generated/types.ts. В нем ты можешь найти в том числе и описание модели задачи. Среди всех полей можно найти как раз нужные нам startDate, endDate, startDatePlaning и endDatePlaning. То есть в принципе, если данные с сервера будут получены, то там и эти поля должны быть. Но на самом деле это зависит от того, какие поля на самом деле прописали в запросах. Так вот, вторая часть указанного скрипта - это пройтись по самому проекту, найти все написанные в нем GraphQL-запросы и сформировать уже для них типы и конечные аполло-запросы. В нашем случае запрос для страницы задачи написан здесь https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/pages/Tasks/Task/gql/task.graphql: (хотя и будет скорее всего в будущем перемещен в https://github.com/freecode-academy/freecode.academy/tree/master/src/gql) Обрати внимание на конструкцию ...task_. Троеточие - это указывает на то, что здесь надо вставить другой фрагмент, имя которому легион (нет, task_). Шутка про легион не спроста, таких вложений фрагментов может быть сколько угодно, но GraphQL следит за тем, чтобы они были корректны и составлены по правилам, иначе выдаст ошибку. Фрагмент task_ описан здесь: https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/gql/fragments/task.graphql Там, как ты видишь, есть вложения и других фрагментов. Но главное, там есть вложение ...TaskNoNesting. В этом фрагменте перечислены нужные нам поля, так что все ОК. 2.Вывод полученных данных на странице. В результате выполнения этого скрипта у нас появляются готовые функции для выполнения API-запросов, которые содержат в себе все прописанные нами поля. Конкретно для таски у нас вот хук-запрос: https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/modules/gql/generated/task.ts#L61-L63 То есть теперь, в любом нашем функциональном компоненте мы можем вызывать этот запрос и в ответ получать запрошенные данные. Что мы и делаем вот здесь: https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/pages/Tasks/Task/index.tsx#L32-L35 Надо понимать, что данные самого запрошеггого объекта - это не сам объект response, а его свойство data. Помимо data там есть и другие свойства, типа loading (флаг того, что запрос в процессе выполнения, errors и другие). См официальную документацию: https://www.apollographql.com/docs/react/data/queries/#result И вот полученный нами объект мы передаем во вьюху: https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/pages/Tasks/Task/index.tsx#L52 И там уже получаем свойства этого объекта, как то {task.name}, {task.status} и т.п. Вот и ты там можешь получить, к примеру, task.startDate и вывести в каком-либо виде. Только следи за ошибками тайпскрипта, потому что эти поля не строчные, а объекты Date. Вот как раз для этого и давал вьюху топика как пример. Смотри как там вывод сделан. то есть выполняет проверка на наличие значения, и если есть, выводится через форматирование компонентом moment. Думаю, это должно тебе пролить свет на выполнение задачи.

Короче, что могу сказать, со структорой по видео вроде немного разобрался. По задаче, смотрю вьюху топика, если правильно понимаю нам нужно вывести такой же стейт во вьюхе задачи: onChangeState = (data: EditorComponentProps['_dirty']) => { this.updateObject(data) return data } Но что-то совсем не могу понять, как осуществляется вывод во вьюхе топика в гридах и в коде я не вижу совсем вывода даты. И если честно не совсем понимаю, как работают компоненты в реакте вроде добавляется, как тег компонент, а у тебя одни переменные с ретурном. И не совсем понимаю, почему ты скинул для примера именно вьюху топику, там где он создается, а не саму страницу топика где сам вывод?

Тогда тебе сюда: https://nextjs.org/docs/getting-started и сюда: https://github.com/vercel/next.js/tree/canary/examples и сюда: https://ru.reactjs.org/ и сюда: https://styled-components.com/ и сюда: https://graphql.org/ и вот сюда: https://www.apollographql.com/ и еще вот сюда: https://expressjs.com/ru/ И это далеко не все ресурсы, в которых ты боле менее должен ориентироваться, если хочешь знать проект в целом. Хотя бы чуть-чуть... Олег, у нас нет здесь задачи научить делать проекты с нуля От и До. В современных реалиях это почти нереально (сорри за каламбур). Задача состоит в том, чтобы каждый более менее освоил какое-то направление (или направления). Каждый по потельности самостоятельно какой-то боле менее крупный проект не сможет сделать, но вместе - вполне. То есть цель проекта - научить и объединить, а так же обеспечить платными задачами. Правильное обозначение целей - уже плюс к вероятности успешного результата.

Вообще на будущее, если планируется обучение на реально проекте. Было бы неплохо начать с того, как все ты эти технологии собрал в кучу react+nextJs+typeScript+GraphQl и начать прям самим собирать это все в кучу, чтобы было понятно откуда куда все прилетает, если конечно это возможно)

https://freecode.academy/topics/obzornoe-video-po-@prisma-cms/nextjs Там все максимально подробно, От и До. В чем-то отличия будут, но общие правила будут все теже самые. В задаче я ссылки дал на файл, в котором работать и на файл-пример. Этого тебе достаточно для выполнения задачи. Сначала сделай хотя бы просто выбор. С оформлением (стилями и т.п.) будем бороться позже.

Такой вопрос. В react есть файл App, куда мы привязываем все страницы, если так корректно высказываться. Короче смысл в чем, есть ли какая-нибудь статья где описана структура твоего проекта. По папкам и файлам к примеру: Здесь react Здесь nextJs Здесь CSS Здесь typeScript Здесь JS что- то вроде этого?

Смотри выше ответ. Поменять описание настроек нужно. Иначе не только я буду так запускаться. Уже поправил. Скоро выкачу в гит. >> Получается на этой же странице нужно вывести и где конкретно ее нужно вывести? Да, на этой. На твое усмотрение. Пока задача - освоить технические моменты. Потом постепенно и красоту будем наводить.