В этом уроке я собираюсь продемонстрировать, как использовать архитектуру компонентов в стиле встроенного UI. Вы можете найти готовый исходный код на моем репозитории. Отказ
Дизайн Audiobooks был создан Дэвид Фелипе V и изначально разведен из Codinginger41.
Что такое стиль компонента?
В реактивных реактивных объектах JavaScript используются для создания стиля, которая является непростой задачей, запутанным и очень трудно понять для начинающих, стильные компоненты позволяют писать фактический код CSS для стиля ваших компонентов.
Стильные компоненты позволяют писать фактические CSS в вашем JavaScript. Это означает, что вы можете использовать все особенности использования CSS, которые вы используете и любят, в том числе (но, безусловно, не ограничиваясь) средствами массовой информации, все псевдоселекторы, вложенные и т. Д.
Компонент стиля удаляет отображение между компонентами и стилями. Это означает, что, когда вы определяете свои стили, вы на самом деле создаете нормальный элемент реагирования, который прикреплен к нему ваши стили.
Преимущества использования стилизованного элемента в стиле на основе JavaScript
Автоматические критические CSS: Стильные компоненты отслеживают, какие компоненты отображаются на странице и вводит их стили и ничего, полностью полностью автоматически. В сочетании с разделением кода это означает, что ваши пользователи загружают наименьшее количество необходимого кода.
Нет Наименование класса Ошибки: Стильные компоненты генерируют уникальные имена классов для ваших стилей. Вам никогда не нужно беспокоиться о дублировании, перекрытии или неправительственциях.
Простой удаление CSS: Может быть трудно знать, используется ли имя класса где-то в вашей кодовой базе. Стильные компоненты позволяют очевидно, поскольку каждый билет привязан к конкретному компоненту. Если компонент не используется (какой инструмент может обнаружить) и удаляется, все его стили удаляются с ним.
Простой динамический стиль: Адаптация стайлинга компонента на основе его реквизитов или глобальной темы просто и интуитивно понятна без необходимости вручную управлять десятками классов.
Безболезненное обслуживание: Вам никогда не нужно охотиться на разных файлах, чтобы найти стайлинг, влияющий на ваш компонент, поэтому обслуживание – это кусок пирога, независимо от того, насколько велика ваша кодовая база.
Автоматический префикс поставщика: Напишите свои CSS к текущему стандарту и позволяют стилизованные компоненты обрабатывать остальные.
Я не буду тратить много времени, объяснив, как использовать компонент стиля, скорее, я собираюсь научить вас, как применить знания для построения удивительного пользовательского интерфейса.
Что мы будем строить?
Audiobook это приложение, которое позволяет вам поток аудиозаписи авторов. Готовое приложение имеет; FireBase для аутентификации, хранения и толкает уведомление. Redux для государственного управления Адаптивный макет для iPad, Android и разных разновидностей IOS Layout Но с целью этой статьи мы собираемся использовать данные издевательства для того, чтобы урок простых урок.
Если вы начинающий, который никогда не создавал приложение, то вам повезет. Приложение прототипирования в эти дни намного проще, чем раньше. С EXPO вы можете сделать потрясающие вещи за меньшее время. После этой статьи вы должны быть в состоянии добавить проект в ваш портфолио.
Начало работы Если вы не установили EXPO-CLI на вашем терминале, запустите следующую команду. NPM Установить -G EXPO-CLI Инициализировать новый проект Экспо init Audiobook Нажмите клавишу Enter, чтобы выбрать> Пустые Написать Audiobook Для имени и нажмите Enter
Используйте пряжу для установки зависимостей? Y Как только пакет закончил установку CD Audiobook и Запуск пряжи
Есть 3 способа открыть приложение 1 Нажмите I, чтобы открыть симулятор IOS 2 Нажмите A для Android 3 Сканировать QR-код, чтобы открыть на своем фактическом устройстве
Если у вас есть установка полной, поздравляю.
Если у вас есть проблемы с настройками, вы можете забронировать бесплатный сеанс со мной здесь, и я помогу вам решить проблему.
Добавление файлов запуска Теперь, когда мы настроили проект, нам нужно установить зависимости и добавить файлы запуска. Файл запуска экономит время и увеличивает производительность для реагирования нативных проектов.
Откройте свой проект в редакторе кода
Удалить свой Активы Папка Скачать запуск здесь
Скопировать Активы , Компоненты , данные , навигация , Экраны , Utils папка к вашему проекту.
Установите навигацию на навигацию и стиль
пряжа добавляет реактивные навигационные стиль компоненты
После установки зависимостей замените app.js из папки загрузки загрузки на ваш. Теперь вы должны иметь это
Экраны – HomeScreen
Стильный компонент Давайте использовать CSS и теги для создания пользовательских и многоразовых компонентов. Это дает разработчику предвидению для визуализации каждого атомного пространства и размера.
Заменить Homescreen.js с Домашний экран
Затем замените ImageList.js с Воображение
Теперь мы сделаем с HomeScreen
Экран – книжный экран
Заменить Bookscreen.js с Книжный экран
Музыкальная функциональность
Музыка
Нажмите на кнопку воспроизведения, чтобы воспроизвести музыку
Если вы достигли этого этапа, поздравляю
Вы можете найти готовый исходный код на моем репозитории.
Что мы будем строить дальше? Мы будем строить Gigstar, внештатное приложение GIG, где каждый может опубликовать и найти концерцию в окружающей среде. Мы широко используем новую базу данных FireBase под названием Cloud Firestore для хранения данных.
Облако FireStore – это гибкая, масштабируемая база данных для мобильных, веб-разработки сервера с Firebase и Google Cloud Platform. Как база данных Realtime Firebase, она сохраняет ваши данные синхронизированными с помощью клиентских приложений через слушателей Realtime и предлагает автономную поддержку для мобильных устройств и веб, поэтому вы можете создавать отзывчивые приложения, которые работают независимо от сети сети или подключения к сети.
С Cloud Firestore вы можете делать выразительные запросы, обновления в реальном времени, в автономном режиме поддержки и толкающие уведомления. Я не могу дождаться, чтобы быть сделано.
Наконец, React Native является одним из самых популярных технологий в 2019 году из-за большой доли мобильной доли рынка, в качестве собственного разработчика REACT вы пишете один раз и создаете как на iOS, так и на платформе Android.
I offer long term mentorship on my page if you want to learn and build native apps with react native.
Вот то, что я учу больше всего моего доклада. Основы JavaScript Слифовые компоненты Реквизит и значок Статические данные и петли Анимация Redux Сеть Экраны и навигация Адаптация для разных устройств Жесты База данных Firebase
Спасибо за чтение 😄 Пожалуйста, 👏 Если вам понравилась эта статья. Если у вас вообще есть какие-либо вопросы, не стесняйтесь комментировать ниже, и я отвечу как можно скорее!