Abr@X@bra.ru
Курс по React JS #2. Средства разработчика
Курс по React JS #2. Средства разработчика

Курс по React JS #2. Средства разработчика

02.04.2017
806

Продолжаем изучать React JS. В этом посте я расскажу как установить и настроить средства разработчика, чтобы процесс разработки был еще удобнее.

Установка средства разработчика React

После запуска приложения в консоли появилось сообщение от разработчиков.  


В котором они рекомендуют установить средства разработчика React и использовать web сервер.

В сообщение имеется ссылка, перейдем по ней. Далее промотаем страницу вниз до раздела установка. Средства разработчика доступны для браузеров Google Chrome и Mozila Firefox. Так как я использую хром я нажму на первую ссылку.

Далее необходимо нажать на кнопку установить.


Расширение успешно установлено, справа в углу появилось новая иконка React JS.



Перейдем обратно в приложение, обновим страницу и ничего не изменилось. Дело в том, чтобы React Devtools заработало, необходимо запустить приложение через web-сервер.

Если у вас имеется web-сервер можете использовать его. Я рекомендую установить очень простой web-сервер с помощью npm, модуль называется http server.

Установка  web-сервера

Чтобы его установить я перейду в редактор кода и открою терминал. В окне терминала набираем команду:

npm i -g http-server

если вы являетесь пользователям Mac OS тогда нужно добавить:

sudo npm i -g http-server

После чего жмем Enter и должен начаться процесс установки.


Http server установлен. Далее открою новое окно терминала, находясь в рабочей директории, я наберу команду:

http-server

Web-сервер запустился, далее перейдем в браузер. И в адресной строке набираем адрес - http://localhost:8080/

Теперь откроем средства разработчика браузера. C право появилась новая вкладка React.


В этой вкладке вы можете видеть html ну или что-то похоже на html, так как вместо слова class используется слово className.


Точно также как мы указали при создание React элементов. Если я наведу на какой либо элемент то в окне браузера соответствующий элемент будет подсвечен.  


Точно также как при использовании вкладки Elements. Также справа имеется еще одно окошко. Если я выберу какой нибудь элемент слева, допустим пусть это будет изображение, то в окошке появится информация про этот элемент.

В данном случае у элемента img имеется свойство src, которое мы указали при создание элемента. Если я кликну по div, то у него имеются два свойство, это children - дети, состоящий из массива из трех элементов. Соответственно это изображение, заголовок и параграф. И свойство className которое мы указали при создание элемента.

На данный момент вам наверное не совсем понятно, что это за html подобие слева и что это за свойство справа. В следующих уроках мы совсем этим разберемся и в этом нам помогут средства разработчика React, которое мы часто будем использовать в дальнейшем, так что я рекомендую их установить.

Чтобы не пропустить следующих выпусков по урокам React js и быть в курсе всех последних новостей, подписывайся на мои аккаунты в соцсетях, все ссылки на них ты сможешь найти у меня на сайте.




React JS
Читайте также:
Курс по React JS #1. Пилотный выпуск. Привет React!

Курс по React JS #1. Пилотный выпуск. Привет React!

В этом посте расскажу как написать первое простое приложение на React js.
Читать
Управление продажами в Битрикс24 CRM

Управление продажами в Битрикс24 CRM

В данном посте, хочу поговорить о том как правильно управлять продажами в CRM Битрикс24. Рассказать, что такое лид ...
Читать
Разработка → React в браузерах и на мобильных платформах

Разработка → React в браузерах и на мобильных платформах

За последние несколько лет индустрия создания программного обеспечения развивается просто безумными темпами. И особенно ...
Читать
Источник: codedojo