React.Js - это библиотека для построения пользовательских интерфейсов. По сути, React не считается фреймворком, как Ember, Angular и т. Д. React - это V в MVC. Он охватывает концепцию одностороннего потока данных / однонаправленного потока данных, в отличие от двусторонней привязки данных Angular. С моей точки зрения, изучение React легко по сравнению с Angular, потому что React использует ванильный JavaScript для создания реактивных пользовательских интерфейсов. Недавно они выпустили React Native, библиотеку для создания компонентов пользовательского интерфейса для мобильных приложений. Он доступен на платформах IOS и Android, поэтому стоит попробовать.
В качестве новичка я изучил React, изучив официальную документацию, и все же считаю себя новичком в React, и в этой статье я сосредоточусь на том, чтобы поделиться своим опытом изучения React как новичок.
Для начала React использует веб-компоненты, что в значительной степени является будущим Интернета. React дает нам возможность создавать собственные веб-компоненты с помощью ванильного JavaScript. Но определение веб-компонента с помощью JavaScript - это своего рода беспорядок, потому что мы привыкли к HTML. Компонент React, определенный с помощью JavaScript, выглядит так:
Определить даже простой компонент с помощью одного только JavaScript - сложная задача, поэтому React представил новый синтаксис под названием JSX, который похож на XML. JSX объединяет собственный синтаксис HTML с JavaScript, что дает нам лучший способ определения компонентов в React.
Вот шаблонный код для начала кодирования с помощью React.
Обратите внимание, что атрибут type тега script в строке 15 имеет значение text / babel, в более ранних версиях React это было text / jsx. . Поскольку babel набирает обороты как транспилятор, команда React выбрала babel для компиляции кода JSX в JavaScript.
Давайте познакомимся с некоторыми основными концепциями реакции на примере. Добавьте следующий фрагмент кода к приведенному выше шаблону.
Хорошо, давайте разберемся по порядку, чтобы выяснить, что случилось с приведенным выше кодом. После импорта библиотеки React с тегом сценария в приведенном выше стандартном коде мы можем использовать функцию createClass для создания компонентов React. Это принимает объект в качестве аргумента. Сосредоточьтесь на строке 19, где определяется компонент TwitterPoster. Здесь передается обратный вызов рендеринга, который отвечает за рендеринг компонента. В обратном вызове он должен возвращать определение настраиваемого компонента, обычно с собственным HTML или другим настраиваемым веб-компонентом. В компоненте TwitterPoster для определения компонента используется собственный HTML. Компонент TwitterHeader, TweetButton используют ту же структуру. Но компонент Tweet инкапсулирует компоненты TwitterHeader, TwitterPoster, TweetButton. При инкапсуляции пользовательских компонентов вместе в React вы должны использовать контейнер для инкапсуляции, иначе React выдаст ошибку.
В этом разделе мы сосредоточимся на свойствах, еще одной ключевой концепции React. Реквизит означает собственность. У каждого компонента есть реквизит. Реквизиты неизменны, их нельзя изменять любой ценой, иначе структура вашего приложения React развалится. Свойства передаются от родительских компонентов к дочерним компонентам.
Для отрисовки некоторых тегов дополнительно был включен компонент TwitterTags . Эти теги были жестко запрограммированы, но в реальных приложениях их можно получить с сервера с помощью запроса Ajax. Компонент Tweet имеет свойство tags. SuggestionTags передается в теги prop со специальным обозначением {}. Это специальное обозначение, используемое в React. Доступ к любому свойству внутри компонента осуществляется через this.props. имя-свойства. При доступе к свойству тегов компонент TwitterTags обрабатывается итеративно путем передачи каждого элемента в массиве offerTags в свойство twitterTags.
Теперь перейдем к состояниям. Состояния изменчивы в отличие от свойств. Вы можете делать с состояниями все, что хотите
Обратный вызов getInitialState вызывается только один раз в жизненном цикле компонента. Обычно его можно использовать для установки начальных состояний, как следует из названия. componentDidMount вызывается, когда компонент запущен и работает, и его также можно использовать для установки различных состояний. React API предоставляет функцию setState для изменения различных состояний, как в приведенном выше примере (строка 7). Доступ к любому состоянию, принадлежащему определенному компоненту, осуществляется через this.state. statename, и любое состояние может быть передано в опору.
Для простоты я удалил компонент TweetButton и инкапсулировал его в TweetPoster. Мы рассмотрим, что делать с нажатиями кнопок и элементами ввода.
Для ввода текста я подключил специальный обратный вызов для настройки состояния при изменении текста с помощью onChange. Для элемента кнопки onClick использовался для обработки нажатия кнопки с помощью другого обратного вызова. В рамках этого обратного вызова мы можем получить доступ к состоянию твита, таким образом, получить доступ к текущему значению текстового элемента. Используя JQuery, мы можем делать простые вызовы Ajax на сервер, чтобы опубликовать это.
Выводы
React - мощная библиотека для создания пользовательских веб-компонентов. Реактивные пользовательские интерфейсы можно легко настроить с помощью состояний и свойств React. Синтаксис JSX обеспечивает лучший способ создания пользовательских веб-компонентов.
