Любой хороший отладочный учебник для React.js

Интересно, может ли кто-нибудь предложить шаг за шагом начинающий учебник о том, как отлаживать приложение React.js? Я новичок в React, сейчас самое неприятное, что в консоли много ошибок, но я не знаю, как отследить их.

Ответ 1

Трудно описать общую стратегию для отладки "много ошибок", поэтому я проведу вас через процесс для отладки ошибок уровня компонента:

Установите расширение инструментальных средств React для вашего браузера по выбору:
- Chrome
- Firefox
Найдите компонент

Я рекомендую любой из этих путей:

2.а. Откройте React tab из ваших инструментов браузера dev и введите нижнюю строку поиска для поиска компонентов по имени.

2б. Откройте Elements tab, выберите элемент и вернитесь к React. Иерархия компонентов будет расширена до тех пор, пока компонент React не будет соответствовать DOM node, выбранному вами в Elements.
Проверьте состояние и реквизиты компонента, который ведет себя некорректно.

Если по какой-то причине вам не нравится устанавливать расширения браузера, вы можете бросить один или несколько операторов debugger; для установки точек останова, которые будут "приостанавливать" выполнение вашего приложения и позволяют вам проверять стек вызовов, область действия и ошибки в этих точках.

Ответ 2

React имеет собственный инструмент для отладки, установленный в хром-инструментах. Это самый подходящий инструмент на данный момент для отладки реагирующих приложений. Он позволяет добавлять точки останова, редактировать реквизиты в инструментах dev и видеть мгновенные результаты. Хороший учебник - это https://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html, который является официальным руководством по отладке React. Вы также можете загрузить расширение "React Developer Tools", в котором будут установлены зависимости от ваших инструментов разработчика в хроме.

Вы также можете использовать стандартный хром-отладчик без зависимости от React, который также хорошо работает. Хороший учебник для отладки в Chrome: https://developers.google.com/web/tools/javascript/index?hl=en

Основная проблема заключается в том, чтобы узнать, как добавить точку останова в свой код с помощью инструментов dev и узнать, как идентифицировать проблемы с помощью ответов, которые вы получаете от них. В последнем уроке вы действительно хорошо знаете, как это сделать.

Надеюсь, это поможет немного и счастливому кодированию!