React Native: Learn & Practice

Изучите React Native с помощью кратких объяснений, практических примеров кода и небольших заданий. Пройдите 148 уроков в 10 модулях, откройте пример в песочнице и измените его, чтобы понять, как работает интерфейс.

Четкий путь от основ к практике

Начните с текста, представлений, переменных, компонентов, изображений и стилей. Затем перейдите к макетам Flexbox, формам, текстовым полям ввода, кнопкам, сенсорному взаимодействию, прокрутке и спискам. В последующих модулях будут представлены хуки, многоразовые компоненты, управление состоянием, концепции производительности, адаптивные макеты и практические проекты.

Прочтите идею перед редактированием

Каждый урок включает в себя цель, простой обзор, ключевые идеи, код, практические советы, небольшое задание и вопросы для самопроверки. Посмотрите пример вместе с его объяснением, а затем откройте редактируемую версию, когда будете готовы экспериментировать. Метки «Начинающий», «Средний» и «Практика» помогут вам понять, к какому уровню относится каждая тема в курсе.

Попробуйте свои изменения

Используйте встроенный редактор JavaScript и JSX для настройки текста, значений, стилей и поведения компонентов. Подсветка синтаксиса и номера строк упрощают понимание примеров. Функции «Отменить» и «Повторить» помогут вам изучить изменения, а «Сбросить код» восстановит исходный пример. Нажмите «Запустить приложение», чтобы открыть предварительный просмотр в приложении, а затем вернитесь к редактированию для следующей попытки.

Изучите полезные шаблоны

Изучите управляемые поля ввода, проверку форм, видимость паролей, счетчики символов, фильтрацию списков, выбираемые элементы и пустые состояния. Попрактикуйтесь со счетчиками, таймерами, часами в реальном времени, конвертером температуры, калькулятором чаевых, карточками, аккордеоном, простыми вкладками и мини-списком дел. Это учебные примеры, которые позволяют вам изучить, как небольшие части интерфейса взаимодействуют друг с другом.

Найдите нужный урок

Ищите уроки по названиям или сужайте библиотеку по модулям. Переключайтесь между всеми уроками, уроками в процессе, сохраненными избранными и завершенными уроками. Используйте элементы управления «Предыдущий» и «Следующий» или пролистывайте уроки. При открытии урока из отфильтрованной библиотеки навигация следует за выбранными темами, позволяя вам оставаться в рамках выбранных вами разделов.

Отслеживайте свой прогресс обучения

Добавляйте уроки в закладки для повторного просмотра и отмечайте их как завершенные, когда будете готовы. На главном экране отображается прогресс курса, количество завершенных и сохраненных уроков, а также серия повторного изучения. Возобновите последний урок или перейдите к следующей незавершенной теме. Прогресс и закладки сохраняются локально на вашем устройстве.

Вернитесь к своим экспериментам

Запуск примера сохраняет его код как локальный черновик для этого урока. Откройте Playground снова, чтобы восстановить черновик, или сбросьте его, чтобы вернуться к исходному коду. Это упрощает возвращение к идее после перерыва без замены исходного материала.

Выберите удобный внешний вид

Выберите светлый режим, темный режим или системную тему для интерфейса обучения. Прочитайте концепцию, изучите ее код, внесите одно целенаправленное изменение и используйте задание для отработки его применения.

Разработано для студентов, начинающих, интересующихся программированием, и разработчиков, изучающих концепции мобильных интерфейсов. Примеры запускаются в веб-режиме предварительного просмотра; API и поведение, специфичные для конкретной платформы, могут отличаться от нативного приложения. Приложение содержит рекламу. Независимое образовательное приложение; не связано с проектом React Native и не одобрено им.