Часть № 7: React — библиотека JavaScript для создания пользовательских интерфейсов
- React — это библиотека Javascript для создания пользовательских интерфейсов.
- React не является полнофункциональным JavaScript-фреймворком.
- React имеет большое сообщество, которое вносит множество полезных библиотек в экосистему React.
Мотивация создания реакции
React не использует шаблоны.
Традиционно пользовательские интерфейсы веб-приложений создаются с использованием шаблонов или директив HTML. Эти шаблоны определяют полный набор абстракций, которые вам разрешено использовать для создания пользовательского интерфейса.
React по-другому подходит к созданию пользовательских интерфейсов, разбивая их на компоненты. React использует настоящий полнофункциональный язык программирования для рендеринга представлений, что мы считаем преимуществом перед шаблонами по нескольким причинам:
- JavaScript – это гибкий и мощный язык программирования с возможностью создания абстракций. Это невероятно важно в больших приложениях.
- Объединяя вашу разметку с соответствующей логикой представления, React фактически может сделать представления легче расширять и поддерживать.
- Благодаря внедрению понимания разметки и контента в JavaScript, отсутствует ручная конкатенация строк и, следовательно, остается меньше места для XSS-уязвимостей.
Подробнее читайте в записи блога Зачем мы создали React? от 05 июня 2013 г. автором Пит Хант.
📚 Определите словарный запас
JSX может напоминать вам язык шаблонов, но он обладает всеми возможностями JavaScript. JSX создает элементы React. JSX в деталях
элемент — это простой объект, описывающий то, что вы хотите отобразить на экране, с точки зрения узлов DOM или других компонентов. Элементы могут содержать другие элементы в своих свойствах. Создание элемента React дешево. После того, как элемент создан, он никогда не мутирует.
Реагировать.Компонент
component может быть объявлен несколькими различными способами. Это может быть класс с методом render(). В качестве альтернативы, в простых случаях, его можно определить как функцию. В любом случае он принимает свойства в качестве входных данных и возвращает дерево элементов в качестве выходных данных.
Свойства класса
defaultProps можно определить как свойство самого класса компонента, чтобы установить реквизиты по умолчанию для класса. Это используется для неопределенных реквизитов, но не для нулевых реквизитов.
Свойства экземпляра
Props (что означает свойства) — это обычно используемые термины для входного аргумента объекта компонента. Вот почему люди говорят, что реквизит в React передается от родителей к детям в одном направлении.
Состояние содержит данные, относящиеся к компоненту, которые могут меняться со временем. Состояние определяется пользователем и должно быть простым объектом JavaScript.
