Загрузите бета-версию React Studio с www.reactstudio.com
Задания компонента
Согласно официальной документации Facebook по React, «компоненты позволяют разделить пользовательский интерфейс на независимые, многоразовые части и рассматривать каждую часть отдельно».
Компоненты - это фундаментальные строительные блоки приложения React. Они могут быть маленькими, как кнопка с двумя состояниями, или большими, как весь экран, заполненный контентом. Они часто состоят друг из друга, поэтому важно, чтобы ваши компоненты были как можно более независимыми.
Если вы хотите узнать больше о том, как создавать компоненты на JavaScript, вся информация находится на сайте документации Facebook React:
Https://facebook.github.io/react/docs/react-component.html
Но давайте констатируем очевидное - вы читаете это, потому что не хотите писать компоненты непосредственно в коде JavaScript!
Действительно, в качестве визуальных строительных блоков компоненты React идеально подходят для разработки графически, а не непосредственно в коде. React Studio позволяет вам делать именно это, и теперь мы покажем вам, как это работает.
Используйте векторную графику
В общем, вы хотите использовать в своих компонентах векторную графику, а не растровую графику (например, изображения PNG). Использование векторов позволяет легко масштабировать ваш компонент для различных размеров экрана и плотности пикселей. Также легче редактировать содержимое вашего компонента для разных состояний, когда у вас все в векторах, а не в фиксированных растровых изображениях.
В React Studio есть необходимые инструменты для рисования векторных фигур, поэтому вы можете делать большинство вещей прямо в его интерфейсе. Однако в этом нет необходимости!
У нас также есть мощный плагин импорта для Sketch. В этом уроке я использую простую графику по этому пути.
Вот простой документ Sketch с одной монтажной областью:
Показанный здесь компонент является индикатором онлайн-статуса. Мы можем использовать этот компонент в списке, чтобы показать, когда конкретный пользователь находится в сети, а также в этом случае отобразить некоторую контактную информацию.
Чтобы перенести эту графику в React Studio, загляните в меню плагинов в Sketch:
В React Studio перенесенный компонент будет выглядеть так:
Опять же, такую графику мы могли бы легко нарисовать и в React Studio, но я действительно хотел показать вам плагин Sketch! Это работает и для гораздо более сложных дизайнов. (Вы даже можете указать такие вещи, как, должны ли элементы выводиться на передний план или группы потоков прокрутки в React Studio.)
Теперь, когда у нас есть графика, давайте перейдем к определению поведения компонента.
Свойства компонента
Большинство компонентов не статичны, а динамичны. Другими словами, содержимое компонента должно измениться в ответ на внешние команды.
Свойства (также называемые «реквизитами») - это способ React передачи данных в компонент извне. Чтобы эффективно использовать React Studio, вам нужно немного знать о свойствах и о том, как они передаются внутри приложения React, которое вы создаете.
Для этого компонента «индикатор онлайн-статуса» явно есть как минимум два свойства:
- Статус онлайн / офлайн
- Контактная информация пользователя (отображается только в сети)
Свойство онлайн-статуса должно влиять на три элемента:
- Цвет круга
- Текстовое содержание большого ярлыка («Пользователь в сети»)
- Видимость метки с контактной информацией
Давайте посмотрим, как определить их в React Studio.
Мы можем начать с контактной информации, потому что она проста: метка просто показывает значение свойства с именем «contactInfo».
Выберите элемент, щелкните вкладку «Данные» в инспекторе и введите имя свойства в поле «Текст» в разделе «Взять значение из свойства»:
Это все!
Теперь имя свойства отображается в верхнем левом углу области редактирования холста. Также есть тонкая синяя линия, которая связывает имя свойства с элементами, которые его используют:
Это позволяет легко увидеть, какие свойства фактически используются вашим компонентом. (Если вы дизайнер и передадите этот компонент программисту, он / она оценит эту информацию!)
Затем мы хотим, чтобы этот компонент реагировал на статус пользователя в сети. Мы могли бы сделать это таким же образом, используя свойства текста / цвета для графики и текста (вместе с некоторыми небольшими скриптами для выбора текстового содержимого) ... Но есть более простой и удобный для дизайнера способ.
состояния
React Studio имеет интерфейс в стиле временной шкалы, который позволяет визуально определять различные состояния для одного компонента. В этом случае нам просто нужно два состояния: онлайн и офлайн.
Нажмите кнопку «Добавить состояние» над списком элементов. В правой части списка появится новое состояние:
Этот интерфейс намеренно похож на то, что вы можете найти в приложении для редактирования видео.
Каждый элемент похож на «дорожку» видео, и вы можете вырезать или расширить элементы, чтобы они заполняли несколько состояний или вообще не отображались в одном состоянии. (Прямо над списком элементов есть инструменты «стрелка» и «лезвие», которые можно использовать для этих операций редактирования.)
В этом случае мы могли бы использовать первое состояние для представления «офлайн», а второе состояние «онлайн».
Второе состояние фактически полностью готово, поэтому мы хотим отредактировать только первое состояние. Выберите элемент «Пользователь в сети» в состоянии 1. В области редактирования дважды щелкните элемент, чтобы отредактировать его содержимое, и измените текст на «Пользователь в автономном режиме».
Затем дважды щелкните зеленый кружок. Это переведет вас в режим редактирования формы, где вы можете изменить векторную графику. Измените цвет заливки круга на красный:
Нажмите «Назад», чтобы вернуться к списку элементов.
Наконец, щелкните элемент контактной информации (номер телефона) в области редактирования и нажмите Backspace, чтобы удалить его, потому что мы не хотим отображать эту информацию, когда пользователь не в сети.
Теперь вы должны увидеть следующее:
Наши два государства теперь готовы.
В качестве последнего шага к тому, чтобы сделать этот компонент более удобным для использования в коде, вы можете переименовать элементы. Щелкните имя элемента, чтобы изменить его имя. Вы могли бы назвать их примерно так:
Создание экземпляров компонентов
Теперь, когда у нас есть компонент, мы можем использовать его где угодно: в другом компоненте или на экране навигации. (По правде говоря, экраны - это просто компоненты, которые имеют особый статус внутри React Studio, чтобы вы могли упростить навигацию. Поэтому нет разницы, используете ли вы компонент внутри экрана или другой компонент.)
Откройте экран и перетащите компонент из его блока Project Map (где написано «перетащите отсюда») в область редактирования экрана:
Вы только что создали «экземпляр компонента». Вы можете думать о самом компоненте как о чертеже: это не совсем сама вещь, а просто планы, которые вы можете использовать для создания физических экземпляров вещи.
В этом случае экземпляр был создан перетаскиванием. Это всего лишь один экземпляр, который вы можете настроить. (В другом типичном случае использования экземпляры компонентов будут созданы элементом списка, который повторяет компонент столько раз, сколько имеется «строк» данных. В этом руководстве вам этого не будет показано, но вы можете посмотреть в поле «Элементы», чтобы найдите элемент List.)
Выберите экземпляр компонента и посмотрите на Инспектор справа. Вы увидите параметры, которые можно настроить для этого компонента:
Компонент еще не был переименован, поэтому он по-прежнему называется «Компонент 1».
Щелкните поле выбора «Состояние активного компонента» и выберите «Состояние 2». Экземпляр компонента теперь будет отображать онлайн-состояние.
Затем попробуйте ввести что-нибудь в поле «contactInfo». Вы увидите, что текстовое содержание экземпляра компонента изменится соответствующим образом.
Поздравляем, вы только что создали настоящий компонент React со свойствами!
Предварительный просмотр кода
Если вы программист (или работаете с одним из них), возможно, вы захотите посмотреть, как выглядит код React JavaScript для этого компонента. Вы можете экспортировать весь проект, но есть более простой способ.
Вернитесь к самому компоненту (дважды щелкните его на карте проекта). Затем нажмите «Code Glance» на панели инструментов приложения. Откроется редактор JavaScript, который покажет вам точный код, который будет экспортирован.
Компонент UI
Ранее мы видели пользовательский интерфейс для экземпляра компонента - просто текстовое поле для свойства «contactInfo». Это было автоматически сгенерировано, когда мы добавили свойство.
Этот пользовательский интерфейс достаточно хорош для свойства contactInfo, но для других свойств нам может потребоваться что-то более сложное. Например, если бы у нас было свойство с именем «backgroundColor», мы, вероятно, хотели бы, чтобы пользовательский интерфейс был палитрой цветов. Или мы могли бы добавить некоторый поясняющий текст, чтобы человек, который использует наш компонент, позже знал, что означают эти свойства.
В таких ситуациях вы можете легко переопределить автоматический пользовательский интерфейс компонента и спроектировать его самостоятельно. Выберите компонент на карте проекта и снимите флажок «Автоматически создавать из свойств»:
Затем вы можете нажать «Изменить», чтобы вручную изменить определение пользовательского интерфейса.
Загрузите бета-версию React Studio с www.reactstudio.com
