+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

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

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

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

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

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

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

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

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

Vladimir
Ivanov

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

Евгений
Евстропов

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

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

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

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

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

Luxoft Training Center

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

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

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

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

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.

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

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

Евгений Евстропов

Team Lead (Medici Living Group)

Живёт и работает в Германии, возглавляет команду Frontend-разработчиков в компании Medici Living Group.

Участвовал в создании различных приложений на React Native, Swift, Java и Xamarin.Forms с нуля и до production. Периодически делал contribution в различных open-source-библиотеках для React Native, примеры можно посмотреть по ссылкам на GitHub: Google Fit, Apple Healthkit.

Занимается программированием ещё со школьных лет: сначала это была лишь олимпиадная сфера, затем, на втором курсе университета, перешёл в научную среду и начал работать в Институте системного программирования. На 4-м курсе увлёкся мобильной разработкой и открыл для себя мир React Native. В течение 3 лет занимался аутсорсингом в составе небольшой интернациональной команды, создавая приложения на заказ.

Образование:
— Высшая школа экономики, «Инженер программного обеспечения»;
— University of Kaiserslautern, Germany, Computer Science.

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

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

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

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

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

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

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

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

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

Модуль 1

JavaScript

Модуль 2

React

Модуль 3

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

Модуль 4

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

Модуль 5

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

Модуль 6

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

Модуль 7

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

Подробная программа PDF 187 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.

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

1 Настройка react app

Цель: 1. Развернуть приложение с помощью CRA (по желанию) 2. Настроить кастомный webpack + babel проект (+2 балла) 3. Заставить работать TypeScript через babel (+1 бал) 4. Написать хелло ворлд (todo app или любое другое), сделать базовую верстку вашего приложения, поработать с JSX (+2 бал)

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

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

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

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

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

---

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

Тема 3: Higher-Order Components

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

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

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

1 react + redux

Цель: С помощью redux работаем с нашим приложением погоды. Стараемся использовать redux вместо react-state

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Лектор: Павел Одинцов

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

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

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

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

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

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

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

Лектор: vladimir ivanov

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

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

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

Лектор: Евгений Евстропов

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

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

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

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

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

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

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

Лектор: Павел Одинцов

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

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

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

Лектор: Евгений Евстропов

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

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

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

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

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

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

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

Лектор: Павел Одинцов

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

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

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

Лектор: Павел Одинцов

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

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

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

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

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

Лектор: Евгений Евстропов

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

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

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

Лектор: Евгений Евстропов

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

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

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

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

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

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

Лектор: Евгений Евстропов

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

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

Лектор: Евгений Евстропов

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

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

Лектор: Евгений Евстропов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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