Официально прошло шесть недель в учебном лагере по программной инженерии Flatiron School. После трех первых недель ванильного Javascript введите React.js! Прежде чем я перейду к теме своего блога, я поделюсь некоторыми основами React.
Как я узнал за последние несколько недель, React — это библиотека Javascript, которая позволяет разработчикам создавать структурированные фрагменты повторно используемого кода, называемые компонентами. Согласно Документации React, компоненты очень похожи на функции в Javascript. Они принимают произвольные входные данные или реквизиты и возвращают элементы React, которые сообщают приложению, что отображать на экране. Но уникальные компоненты позволяют отображаемым данным изменяться с течением времени, управляя состоянием.
Кроме того, я хотел бы обсудить один из самых удобных инструментов React-разработчика — React DevTools! Функционируя как расширение для браузера, DevTools — это средство для отладки и изучения приложения React изнутри браузера.
Расширение браузера добавляет два варианта в DevTools браузера, компоненты и профилировщик. Вкладка компонентов позволяет просматривать и редактировать корень React и подкомпоненты в приложении. Кроме того, разработчик может выбрать визуализированный компонент и увидеть текущие реквизиты и состояние компонента.
Я считаю раздел компонентов наиболее ценным, потому что я могу отслеживать состояние своих переменных при повторном рендеринге компонентов. По общему признанию, это требует некоторого времени, чтобы привыкнуть, но это намного эффективнее и изощреннее, чем полагаться на операторы console.log для обнаружения неприятных ошибок состояния! Также полезно увидеть структуру зависимостей компонентов со значениями свойств, чтобы убедиться, что я передаю правильные свойства.
Другое дополнение, профилировщик, доступно только для приложений, созданных с помощью React 16.5 и более поздних версий. Однако, согласно документации React, его основное назначение — сбор информации о времени каждого визуализируемого компонента для выявления узких мест производительности в приложениях React.
И, наконец, одна из моих любимых особенностей расширения React DevTools — это то, что оно светится, когда что-либо, отображаемое в браузере, было создано с помощью React. Это заставило меня осознать, насколько широко распространена эта библиотека, и вдохновило меня продолжить работу с ней. Как всегда, спасибо за чтение!
