ReactJS — JavaScript-библиотека, разработанная Facebook и выпущенная в 2013 году. Её используют многие крупные компании, такие как Yahoo и Netflix, для создания пользовательских интерфейсов. Примеры использования ReactJS представлены на официальном сайте. В этом курсе мы создадим собственные примеры и научимся работать с библиотекой.
Установка и первый запуск
Для работы с ReactJS необходимо скачать библиотеку или использовать CDN. Перейдите на сайт facebook.github.io/react. Сайт содержит примеры, например, ToDo-лист, позволяющий добавлять, изменять и удалять задачи. В курсе мы создадим подобный, но более функциональный список.
До появления ReactJS создание подобных интерфейсов было возможно, но ReactJS значительно упрощает этот процесс.
Для начала работы, нажмите «Get Started» и перейдите в раздел «Installation». Можно скачать готовый HTML-файл (с подключенными скриптами).
HTML-файл содержит три скрипта, необходимые для работы с ReactJS. Далее следует HTML-код и код ReactJS. Запустив файл, вы увидите надпись «Hello World». Изменение текста на «High» в коде ReactJS мгновенно отразится на странице. Это демонстрирует взаимодействие HTML и JavaScript в ReactJS.
Разбор кода и дальнейшие шаги
В последующих уроках мы подробно разберем компоненты ReactJS и взаимодействие HTML и JavaScript. Обратите внимание на сочетание HTML и JavaScript кода, и как изменение JavaScript кода мгновенно влияет на отображаемый HTML. Удаление или изменение фрагментов JavaScript кода приведет к неработоспособности приложения.
В этом уроке мы ознакомились с ReactJS, его назначением (работа с пользовательским интерфейсом) и выполнили установку. В последующих уроках начнём более глубокое изучение библиотеки.
Можно скачать все необходимые скрипты и добавить их в свой проект. Это полезно при медленном интернете, так как ускорит загрузку страницы. В следующем уроке будут использоваться локально скаченные файлы для ускорения работы.
Мы начали изучение ReactJS, установили библиотеку и увидели простой пример её работы. В следующих уроках мы углубимся в детали и создадим более сложные приложения.