Сегодня, спустя три дня работы над моим последним проектом здесь, в школе Flatiron, я сделал паузу, чтобы подумать о состоянии моего приложения. (И да, каламбур.) Как я организовал свои компоненты? Где я храню состояние? Как я передаю реквизиты между компонентами? Самое главное, смогу ли я лучше справляться с чем-либо из этого, чтобы подготовиться к относительно гладкому пути кодирования в течение следующих нескольких недель?
Поскольку сложно удержать в голове структуру всего моего приложения сразу, я понял, что это размышление пройдет гораздо более гладко, если у меня будет визуальное представление. Когда я потянулся за ручкой и бумагой, мне пришло в голову, что могут существовать инструменты получше. Я погуглил «схема ваших компонентов React» и был приятно удивлен, обнаружив в результатах два таких инструмента: React Monocle и React Sight. Они оба генерируют визуальные деревья, представляющие иерархию компонентов вашего приложения React, а также текущее состояние и реквизиты каждого компонента — именно то, на что я надеялся. React Monocle требует небольшой настройки: вам нужно сгенерировать файл пакета, а затем указать каталог, в котором этот файл находится. Поскольку React Sight — это расширение Google, для которого требуется только установка инструментов разработчика React, на которые я уже полагаюсь, я решил попробовать.
Важно отметить, что React Sight имеет простой, информативный и удобный веб-сайт с четкой и понятной документацией и отличной демонстрацией. После установки расширения Chrome я заработал и начал работать с визуальным представлением всего моего приложения React.
К сожалению, когда отображается основная часть моего приложения, визуальные эффекты становятся довольно маленькими и трудночитаемыми. Но у React Sight есть несколько способов сделать это немного лучше. Обратите внимание (если вы вообще можете разобрать слова), что это представление загромождено не только моими компонентами React, но и всеми узлами DOM. Для менее загроможденного представления я установил флажок «Скрыть DOM» в правом верхнем углу.
Это гораздо менее загроможденный взгляд на отношения между всеми компонентами в моем приложении. Но он включает в себя мои маршруты, которые меня сейчас не интересуют. Выбор «Скрыть маршрутизатор» делает его еще менее загроможденным.
Я могу не только видеть всю иерархию компонентов, но и видеть состояние и свойства каждого компонента, наведя курсор на узел компонента.
Кроме того, очень легко перемещаться по диаграмме, увеличивать и уменьшать масштаб, а также показывать или скрывать дочерние элементы узла, щелкая по нему.
Хорошо, теперь пришло время использовать этот инструмент. Позже я вернусь с новостями о том, как это помогло мне задуматься и изменить состояние моего приложения.
