Коллеги, сейчас делаю апп по видео-курсу с Udemy. В этом

аппе (expenses tracker), в самом верхнем компоненте присутствует 2 компонента - NewExpense и Expenses. В NewExpense - логика по созданию newExpense, а в Expenses представление (в каждом из этих компонентов несколько дочерних также).

Мой вопрос - правильно ли я понял, что мы стараемся отделать те блоки, которые отвечают за создание данные, и те блоки, которые отвечают за представление данных?

Вот скрин - https://i.imgur.com/nFlD6Vi.png

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

Ну это разные сущности ведь. - кнопка создания компонента - И компонент который выводит список. У NewExpense же тоже есть своё представление . Кнопка или что-то такое . Так что мы разделаем разные сущности

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

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

И когда я проектирую апп, то я пока только начал делать красные рамки с указанием того, какие отображаемые элементы dom пойдут в какие компоненты. Логично ли, указать на дизайне, стрелочками процессы? Вот такие делаю дизы- https://www.figma.com/file/MPqj5O28DyAOxl4lHFJdwD/Project-4.-Goals-Setter?node-id=0%3A1

ну да, я просто копирайтер по профессии. И в копирайтинге мы стараемс запихнуть как больше смысла в один абзац, а здесь наоборот. Круто, что я это понял своей головой. Спасибо за совет!

Как вы видели, я спросил про отображение функций на дизе, но мне сложно понятЬ, как это сделать. Можете ли показать скрины примеров из своей практики?

Не совсем понял вопрос, как описать функциональность компонентов в дизайне?

Ну вообще, обычно функциональность описывается словами в ТЗ. Если вы про модели данных, их хранение и т.п., то зависит от того, что используете для хранения стейта

Если это просто тестовое задание, для обучения, то можно все данные хранить, например, в объекте в компоненте Гоалс и пробрасывать в дочерние компоненты

так и делаю

ну тогда все верно, юсСтейт в гоалс

да, у меня по факту был закумуфлированный вопрос - как показать себе, до какого компонента я поднимаю введенные данные - просто я сейчас планирую сделать еще один компонент Home, перенести из Appa туда данные, а в App подвесить router и top-nav... Теперь вроде понял, что нужно просто стрелочками нарисовать движение данных, чтобы я понимал, что я делаю. Просто я вчера начал этот апп делать, а сегодня уже не могу вспомнить, как работают потоки данных - только начинаю... Картинка со стрелочками поможет быстро вспомнить.

вот такое сделал, всего 1 час работаы - https://www.figma.com/file/JTDWv1UcG7g8S41aE0ECD0/Project-4.-Goals-Setter---Logics-Map?node-id=0%3A1