Изучение зависимостей компонентов внутри проекта React

#reactjs

Вопрос:

Существует ли какое-либо расширение VSCode, инструмент или подсказка для получения некоторого графика или отчета о внутренних зависимостях компонентов React внутри проекта React?

В частности, предположим, что я определил свой компонент <MyComponent .../> ; Я хочу знать, какие другие компоненты (всегда внутри моего проекта) включают его в качестве дочерних элементов, например <ParentComponent> ... <MyComponent .../> <ParentCOmponent> , и наоборот.

1. Я имею в виду, что вы можете выполнить глобальный поиск проекта (Cmd / Ctrl Shift F) и выполнить поиск <MyComponent /> , но я не знаю ни одного конкретного инструмента для построения графиков

Ответ №1:

1. Графический интерфейс

Одним из полезных инструментов для описания дерева компонентов или отладки является расширение React Developer Tools Chrome (вкладка Компоненты).

Скачать here:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

Скриншот дерева компонентов: