Як побачити ваш стан React та реквізит у браузері

Якщо ви створюєте веб-програму за допомогою React, можливо, ви захочете побачити стан або властивості компонентів у режимі реального часу. Ось швидке рішення для Chrome та FireFox!

Інструменти розробника React

Встановіть розширення React Developer Tools для Chrome або FireFox. Це дозволяє перевірити ієрархію компонентів React в інструментах розробника - так само, як ви заглянули б у елементи DOM, консоль або мережу.

Перевірка реагуючих компонентів

  1. Відкрийте програму та огляньте сторінку за допомогою інструментів розробника (Command + Option + I).
  2. Виберіть React Developer Tools

3. Виберіть компонент у дереві, щоб побачити його стан та поточний реквізит.

Ви також можете вибрати елемент React безпосередньо зі сторінки, наводячи курсор на нього за допомогою інструменту виділення:

Модифікація держави

Якщо ви хочете оновити свій стан у браузері - ви можете! Змініть його, клацнувши та редагуючи атрибути стану на вкладці React. Це зробить рендеринг DOM, передаючи стан вниз через реквізит.

Щасливого кодування! ?