+7 499 110-61-65

ReactJS/React Native-разработчик

Современная Frontend-разработка и создание мобильных приложений под iOS и Android на JavaScript.

Набор в группу закрыт

Обучение сотрудников

Длительность

4 месяца

Продолжительность

4 месяца, 4 академ. часа в неделю

Что даст вам этот курс

Сегодня уже необязательно иметь 3 команды разработчиков, чтобы поддерживать несколько разных проектов, например:
— веб-сайт на ReactJS и JS,
— iOS-приложение на Swift,
— Android-приложение на Java или Kotlin.

React JS вместе с React Native позволят одному специалисту создать многофункциональный сайт и на его базе разработать мобильные приложения для Android и iOS.

React Native был разработан компанией Facebook. На нём написаны мобильные приложения Facebook, Instagram, Skype, Uber Eats, Pinterest и многие другие.

Для кого этот курс

JavaScript-разработчики с навыками HTML/CSS.

Выпускной проект для портфолио

Вы разработаете веб-приложение, похожее на twitter на ReactJS и Redux. Затем перенесёте на мобильные устройства с использованием React Native и Redux.

Разработка фронтенда и мобильных приложений под Android и iOS на JavaScript

Создание фронтенда любой сложности на ReactJS, Flux, Redux

Портирование фронтенда под Android и iOS с помощью React Native

Углубленное изучение JavaScript

Преподаватели

Александр Коржиков

Dev IT Engineer ING Group (Нидерланды)

Разработчик JavaScript в международной финансовой корпорации ING, главный офис которой находится в Амстердаме. Занимается проектированием и поддержкой процессов web-разработки.

8 лет опыта разработки в основном в области Front End. Большую часть карьеры программировал на JavaScript, начиная c 2010 года — в компании «Альпари». После этого работал в стартапе Comindware, в «Тинькофф Банк» (Москва), в голландской IT-компании Backbase.

Получил степень специалиста в университете по специальности «Прикладная математика и кибернетика».

Александр
Коржиков

Vladimir
Ivanov

Андрей
Поляков

Юрий
Дворжецкий

Никита
Овчинников

Преподаватели

Александр Коржиков

Dev IT Engineer ING Group (Нидерланды)

Vladimir Ivanov

Development Lead (EPAM Systems)

Опытный разработчик мобильных приложений (Android, React Native) с сильными навыками руководства командой. Технический руководитель, менеджер проектов, специалист по облачным сервисам и архитектор решений с сертификатом Google Certified Cloud Architect.

Руководил несколькими проектами c нуля до публикации в качестве архитектора решений, менеджера проектов, Tech Lead'а. Интересуется современными мобильными платформами (iOS, cross platform). В коммерческой разработке с 2010 года.

Окончил факультет технической кибернетики в Санкт-Петербургском политехническом университете Петра Великого. Работал в Kaspersky Lab, EPAM Systems, Reksoft, Fonum Inc., Syncplicity.

Андрей Поляков

Ведущий мобильный разработчик в РокетБанк

Образование: МГТУ им. Баумана, факультет информатики и управления, кафедра «Компьютерные системы, вычислительные комплексы и сети».

Опыт работы: 4 года. Ключевые навыки: CSS3, ES6, Sass, React-Native, JavaScript, React, HTML5, Redux, Bootstrap.

Работал над мобильным приложением для My AYR и Card Share на React Native. На текущий момент работает ведущим мобильным разработчиком в Рокетбанке.

Юрий Дворжецкий

Luxoft Training Center

Тренер в Luxoft Training Center, ведущий разработчик, кандидат физико-математических наук.
Программирует с начальных классов.

Разрабатывает на разных платформах: большие и маленькие проекты, высоконагруженные и очень красивые, многим известные и совсем специфические.

Влюблён в элегантность и оригинальность JavaScript как классического, так и современного во всех его проявлениях.

Сейчас разрабатывает web-приложения c UI на React и Angular.

Никита Овчинников

Окончил Волгоградский государственный технический университет по специальности «Автоматизированные системы обработки информации и управления». Увлёкся программированием ещё в студенческие годы (в 2010 году) и остановиться так и не смог. В коммерческой разработке с 2012 года.
Работал с проектами разного масштаба, прошёл путь от Junior до Senior. С 2016 года — старший инженер-программист в EPAM Systems, с 2018 по май 2019 — технический руководитель по разработке софта в Skywind Group.
Участвовал в международном проекте компании Ericsson, занимался web-программированием и собственными проектами.
Является специалистом по архитектуре веб-приложений, хорошо знает JS/NodeJS, Mongo, MySQL, фреймворки Express, Koa2, React, AngularJS. Уверен, что в программировании всё приходит с практикой.

Для прохождения программы необходимы:
— знания HTML/CSS,
— опыт работы с JavaScript,
— знания основ работы браузера и браузерного API,
— базовые навыки работы с Git.

Наличие компьютера под управлением MacOS будет плюсом, но не является обязательным требованием для участия в курсе.

Подробная программа PDF 184 kb

Программа обучения

Модуль 1

JavaScript

Модуль 2

React

Модуль 3

Первые шаги в React Native

Модуль 4

Запросы на сервер, React Native + Redux

Модуль 5

React.Native: навигация, хранение сессии, анимация

Модуль 6

React.Native: работа с фотографиями и публикация

Модуль 7

Проектная работа

Подробная программа PDF 184 kb

JavaScript

Мы рассмотрим основные возможности современного и традиционного JavaScript, стандарт EcmaScript 6+, Templates, асинхронные паттерны Promise, Async Await, переменные, замыкания, функции, наследование и классы. Разберем особенности браузерного API и спецификаций Web Components на примере библиотеки Lit-HTML. Обсудим главные принципы и возможности Node.js, а также NPM для управления зависимостями и автоматизации задач. Мы научимся использовать Test-Driven Development при решении практических задач.

Тема 1: Введение в курс Modern JavaScript Frameworks

участники смогут:
— познакомиться с преподавателем и программой курса, понять, как она построена, и какие полезные навыки они получат;
— вспомнить основные возможности языка JavaScript;
— применять техники языка, которые помогут при изучении фреймворков.

Домашние задания: 1

1 Написать функцию суммирования значений

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

sum(1)(2)(3)....(n)() === 1 + 2 + 3 + ... + n

Тема 2: Возможности современного JavaScript

участники смогут:
— решать специфичные для браузерной разработки задачи на языке JavaScript;
— освоить и вспомнить теорию, которая будет базисом для последующих уроков;
— попрактиковаться с технологиями AJAX, WebSocket, Promise.

Домашние задания: 1

1 promiseReduce — работа с асинхронными функциями

Цель: Написать функцию: promiseReduce(asyncFunctions, reduce, initialValue) asyncFunctions — массив асинхронных функций, возвращающих промис. reduce(memo, value) — функция, которая будет вызвана для каждого успешно завершившегося промиса. initialValue — стартовое значение для функции reduce. promiseReduce последовательно вызывает переданные асинхронные функции и выполняет reduce-функцию сразу при получении результата до вызова следующей асинхронной функции. Функция promiseReduce должна возвращать промис с конечным результатом.

Тема 3: JavaScript — работа с браузером

участники смогут:
— решать специфичные для браузерной разработки задачи на языке JavaScript;
— работать с Chrome Dev Tools.

Домашние задания: 1

1 getPath — поиск уникального селектора

Написать алгоритм и функцию `getPath()`, находяющую уникальный css-селектор для элемента в документе.
Уникальный селектор может быть использован `document.querySelector()` и возвращать исходный элемент.
`document.querySelectorAll()`, вызванный с этим селектором, не должен находить никаких элементов, кроме исходного.

```javascript
$0 // HTMLElement
getPath($0) // => "..."
```

Тема 4: Web Components

участники смогут:
— ориентироваться в веб-спецификациях Custom Elements и Shadow DOM;
— создавать custom elements, используя встроенные браузерные возможности.

Тема 5: Lit-HTML и Polymer

участники смогут:
— понимать принципы Polymer;
— разбираться в стандарте HTML Template;
— использовать особенности Lit-HTML для создания приложений.

Домашние задания: 1

1 Custom Elements Tree

С помощью Custom Elements создать приложение для показа дерева с помощью компонентов my-tree и my-leaf. Компоненты должны получать данные о структуре поддерева от родительского элемента. Используйте Shadow DOM при отрисовке компонент. Можно также использовать для реализации Lit-Element, Lit-HTML или Polymer.

Пример структуры

{
"id": 1,
"items": [{
"id": 2,
"items": [{ "id": 3 }]
}]
}

Тема 6: Введение в Node — пакетный менеджер NPM и возможности package.json

участники смогут:
— запускать приложения на платформе Node;
— писать и запускать тесты для серверного JavaScript;
— работать с пакетным менеджером NPM;
— управлять зависимостями и автоматизировать задачи с помощью package.json.

Домашние задания: 1

1 Реализовать скрипт request для тестирования веб-сервера

Создать локальный веб сервер `server`, отвечающий на запросы каждые 100ms.

Создать скрипт `request`, принимающий на вход:
— количество запросов `N`;
— тип запросов — параллельный или последовательный

Скрипт `request` должен отправлять `N` последовательных или параллельных `HTTP`-запросов к локальному серверу `server.`

Тема 7: Test Driven Development с JavaScript

темы занятия:
— обзор фреймворков и библиотек для тестирования;
— техники тестирования;
— Behavior Driven Development;
— разбор примеров.

React

Мы подробно изучим стэк технологий React. Рассмотрим особенности синтаксической шаблонизации JSX, особенности передачи данных и хранения состояния с помощью state и props. Разберем свойства компонентного подхода для декомпозиции React-приложений, жизненный цикл и типы компонент, например, High-Order Components. Изучим шаблон проектирования Flux и его реализацию на примере библиотеки Redux. Будем настраивать и оптимизировать приложения с Server-Side Rendering.

Тема 1: Основы React и JSX

участники смогут:
— настроить себе окружение для работы с React и использовать его;
— понимать и применять синтаксис JSX;
— создавать простые приложения на React.

24 октября, 20:00 — 21:30

Лектор: Никита Овчинников

Тема 2: Компоненты React — Lifecycle React-компонент — state и props

участники смогут:
— разрабатывать полноценные React-компоненты в различных стилях;
— корректно использовать state и props.

29 октября, 20:00 — 21:30

Лектор: Никита Овчинников

Домашние задания: 1

1 Создать структуру приложения погоды

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

---

Создать структуру приложения, создать компоненты контейнеры.

Тема 3: Higher-Order Components

31 октября, 20:00 — 21:30

Лектор: Никита Овчинников

Тема 4: Состояние приложения — Flux и Redux

участники смогут:
— отличать основные понятия однонаправленной архитектуры Flux;
— ориентироваться и использовать возможности redux — создавать actions, reducers, а также применять redux в связке в React.

7 ноября, 20:00 — 21:30

Лектор: Никита Овчинников

Тема 5: Routing в React — оптимизация приложения

участники смогут:
— создавать систему routing для React-приложений, использовать библиотеку react-router;
— использовать специальные возможности библиотеки для оптимизации отрисовки.

11 ноября, 20:00 — 21:30

Лектор: Никита Овчинников

Домашние задания: 1

1 Routing для приложения погоды

Реализовать компонент фильтра и поиска городов.
Данные по городам сохранять в браузерном хранилище.
Добавить страницу погоды по конкретному городу.
При переходе на нее должен меняться url, показываться информация на несколько дней вперед.

Тема 6: Подготовка React-приложения к Production, Best Practices

участники смогут:
— эффективно разрабатывать приложения на React, учитывая последние тенденции в разработке front-end;
— использовать Advanced React;
— применять на практике Best Practices-разработки на React.

Также разберем:
— сборщики — Webpack, Parcel;
— аспекты Server-Side Rendering.

14 ноября, 20:00 — 21:30

Лектор: Никита Овчинников

Первые шаги в React Native

Вы научитесь создавать одностраничное приложение на чистом React Native. После трёх первых занятий студенты смогут развернуть проект и создать простое одностраничное приложение.

Тема 1: Базовые компоненты

темы занятия:
— возможности и ограничения React.Native;
— настройка окружения;
— разбор структуры проекта;
— React Class, State, жизненные циклы (краткое повторение);
— базовые компоненты React Native “из коробки” и примеры их использования.

18 ноября, 20:00 — 21:30

Тема 2: Дебаггинг и вёрстка

темы занятия:
— методы и изменение состояния компонента;
— дебаггинг в консоли Google Chrome и React Native Debugger;
— вёрстка и стили;
— шрифты и иконки.

21 ноября, 20:00 — 21:30

Тема 3: Создание одностраничного приложения

тема занятия — создание простого одностраничного приложения (создание поста Instagram).

25 ноября, 20:00 — 21:30

Домашние задания: 1

1 Создать своё приложение ToDo-app

Запросы на сервер, React Native + Redux

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

Тема 1: Подключаем Redux

темы занятия:
— разбор домашнего задания;
— подключение Redux;
— дебаггинг с Redux Logger;
— экран “Новый Пост” на Redux.

5 декабря, 20:00 — 21:30

Тема 2: Запросы на сервер

темы занятия:
— подключение axios;
— асинхронные функции, redux-thunk;
— получение списка постов;
— пагинация списка постов, infinite scroll.

9 декабря, 20:00 — 21:30

Домашние задания: 1

1 Подключить Redux к ToDo-app, хранить список на сервере

React.Native: навигация, хранение сессии, анимация

Вы научитесь строить навигацию, интуитивно привычную пользователям мобильных приложений. Сохранять данные между сессиями. Понимать принципы построения анимации. Использовать React Navigation для переходов между экранами. Также изучите основы работы с анимацией.

Тема 1: Навигация и AsyncStorage

темы занятия:
— написание экрана авторизации;
— навигация React Navigation;
— запрос на авторизацию, сохранение токена в AsyncStorage;
— использование токена для запросов, заголовки запросов.

12 декабря, 20:00 — 21:30

Тема 2: Анимация

темы занятия:
— gif-изображения;
— анимация, Performance Monitor;
— вибрация и звук.

16 декабря, 20:00 — 21:30

Домашние задания: 1

1 Анимированное удаление пунктов ToDo, добавление экрана “Подробнее” с использованием stackNavigation

React.Native: работа с фотографиями и публикация

Вы научитесь получать разрешение пользователя на доступ к файлам и камере, работать с фотографиями на устройстве и делать фото из приложения.
Студенты будут уметь работать с разрешениями, получать фото из галереи и работать с камерой. Также рассмотрим Unit- и End2End-тестирование приложения.

Тема 1: Получение фото из галереи

темы занятия:
— разрешения;
— получение и отображение фото из галереи;
— выбор фото и отправка на сервер;
— отображение своих постов.

19 декабря, 20:00 — 21:30

Тема 2: Работа с камерой

темы занятия:
— отображение окна с камерой, настройки;
— захват и сохранение фото.

23 декабря, 20:00 — 21:30

Домашние задания: 1

1 Экран информации о пользователе, загрузка аватара

Тема 3: Тестирование

темы занятия:
— обсуждение домашнего задания;
— доработки;
— тестирование.

26 декабря, 20:00 — 21:30

Тема 4: Публикация

темы занятия:
— отличия release- и debug-версий;
— иконка и splash-screen;
— генерация уникальной подписи;
— сборка и подпись приложения;
— заполнение информации о приложении;
— публикация;
— полезные материалы и библиотеки.

30 декабря, 20:00 — 21:30

Домашние задания: 1

1 Покрыть приложение тестами и опубликовать

Проектная работа

После последнего занятия студенты смогут опубликовать своё приложение в маркете.

Тема 1: Консультация по проекту

9 января, 20:00 — 21:30

Тема 2: Консультация по проекту

20 января, 20:00 — 21:30

Тема 3: Защита проектов

30 января, 20:00 — 21:30

Домашние задания: 1

1 Сдать ссылку на репозиторий курсового проекта. В репозитории обязательно должен быть заполнен файл Readme.md с описанием проекта

Прошедшие открытые вебинары по курсу

Открытый вебинар — это настоящее занятие в режиме он-лайн с преподавателем курса, которое позволяет посмотреть, как проходит процесс обучения. В ходе занятия слушатели имеют возможность задать вопросы и получить знания по реальным практическим кейсам.

Никита Овчинников

19 сентября в 20:00

Ваш сертификат

Сертификат №0001

Константин Константинопольский

Успешно закончил курс «ReactJS/React Native-разработчик»
Выполнено практических заданий: 16 из 16

Общество с ограниченной ответственностью “Отус Онлайн-Образование”

Город:
Москва

Генеральный директор ООО “Отус Онлайн-Образование”
Виталий Чибриков

Лицензия на осуществление образовательной деятельности
№ 039825 от 28 декабря 2018г.

Сертификат №0001

Константин Константинопольский