React js обучение

Курс по React

Этот онлайн-курс посвящён профессиональной разработке веб-приложений с помощью React.

Набор на этот курс открывается каждые 3 недели.

Вы можете запросить уведомление.

О курсе

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

Постепенно мы разберем особенности построения SPA с использованием React, будем использовать сторонние компоненты и библиотеки для создания бизнес-логики. Вы в деталях узнаете классическую для React-приложений архитектуру: Unidirectional dataflow, и научитесь строить ее с использованием современной и наиболее популярной реализацией – Redux.js.

Курс состоит из 4-х блоков:

Детали программы смотрите далее.

Как организовано обучение?

Курс идёт около 1 месяца.

До начала обучения: вводные материалы

Перед курсом мы попросим вас посмотреть видео-лекции по основам React. Они довольно простые, чтобы на первом занятии вы уже что-то знали.

Мы также будем использовать систему Git/GitHub для обмена исходным кодом, так делает большинство проектов. Для тех, кому это в новинку — дадим крэш-курс и поможем разобраться.

Онлайн-занятия с преподавателем 2 раза в неделю

Занятие проходит в формате вебинара. Запись занятия доступна через 15 минут после окончания. Вы также сохраняете доступ к записям после окончания курса.

Домашние задания, обратная связь по ним

Ваши решения присылаете преподавателю, он проверяет качество кода, использование правильных шаблонов проектирования, даёт обратную связь. К ряду заданий прилагаются тесты, которые частично позволяют проверить правильность решения самому.

Между занятиями доступен групповой чат для общения и вопросов преподавателю.

Курсовой проект

На этом курсе мы делаем курсовой проект: сервис заказа еды из разных ресторанов. Большую часть кода для проекта вы напишете сами.

Результат

Вы знаете, понимаете и умеете использовать основные идеи React.

Компонентный подход и архитектура одностороннего потока данных(Redux) – ваше второе «Я».

Вы умеете строить как многоразовые компоненты так и SPA с помощью React.

Вы знаете в каком направлении развиваться и на какие элементы инфраструктуры React стоит обратить внимание.

Программа курса

Блок 1

Знакомство с React и его экосистемой.

В этом блоке мы начнем с того, на чем остановились в скринкасте по Реакт. Научимся писать простые компоненты и узнаем, в чем принципиальное отличие React.js от других популярных фреймворков. Создадим первые компоненты, используя декларативный подход, познакомимся с экосистемой, научимся использовать сторонние компоненты и работать с формами.

• Разбираем как работает create-react-app.
• Глубже знакомимся с Реактом, Virtual DOM, JSX.
• Разбираем React Hooks, их отличия от стейта и lifecycle методов.
• Разберем примеры тестирования компонент с помощью Jest и Enzyme.
• Подключаем стили с css modules.
• Учимся переиспользовать код с помощью наследования, декораторов и кастомных хуков.
• Связь с DOM: keys & refs.
• Подключаем сторонние компоненты.

Блок 2

Построение приложений с React: Redux.js

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

• Особенности Redux.js: функциональный подход, Redux dev tools.
• Store как иммутабельный объект: Redux + Immutable.js.
• Настраиваем синхронный поток с Redux, переиспользуем созданные ранее компоненты.
• React-redux для связи компонентов с логикой.
• Мемоизированные селекторы reselect.
• Side-effects в Redux: создание и использование Middlewares.
• Получение данных от сервера.
• Асинхронные экшены с redux-thunk

Блок 3

React для SPA: react-router и продвинутые API Реакта

Разработка single-page applications – одно из основных направлений фронтэнда. Мы разберем, как строить их, используя React. Научимся использовать react-router и продвинутые элементы API React.JS.

• Зачем нужен роутинг и как он устроен, проектируем структуру приложения.
• Разбираем react-router v5.
• Настраиваем вложенные роуты.
• Выбираем и настаиваем history для нашего приложения.
• Объединяем react-router и Redux.
• Учимся обрабатывать серверные ошибки и декларативно управлять роутером.
• Используем context – еще один механизм передачи данных.
• Обзор Advanced API react-router.
• Используем props.children для композиции компонентов.
• Анимации в React, CSSTransitionGroup.

Блок 4

Куда развиваться дальше

На этот момент вы уже знаете все, что необходимо, для разработки React приложений. Но на этом рано останавливаться, вокруг Реакта выросла огромная экосистема. Мы обзорно пройдемся по основным возможностям для развития, разным платформам, библиотекам и вспомогательным инструментам. + Будет возможность разобрать интересующие именно вас вопросы.

• Работа с формами: redux-form, final-form, formik.
• Что ждать от React 17.
• React Native и React VR.
• GraphQL + Relay/Apollo.
• MobX vs Redux.
• Разные подходы к сайд-эффектам: redux-thunk, redux-loop, redux-saga, redux-observable.

Предварительные требования

• Знание JavaScript, включая ООП, классы.
• Интернет 256kb/s или быстрее для видео.

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

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

С 2017 года руковожу Front-end гильдией в Киевском R&D центре Wix. Наш основной стек – это React, и у нас он используется в нескольких десятках проектов, с очень разной инфраструктурой. Мы создаем на его основе от библиотек базовых компонент, до сложных приложений с серверным рендерингом и ленивой загрузкой.

Знаю с десяток языков, но в последнее время активно пишу только на JavaScript.

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

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

С 2007 работаю веб-разработчиком. C 2014 пишу проекты разного масштаба используя React и его экосистему.

Один из первых разработчиков Zoomdata – системы визуализации больших данных в реальном времени, которой пользуются крупнейшие бизнесы в США.

Сейчас работаю в Wix.com, разрабатываю новую версию конструктора сайтов, которым пользуются сотни миллионов пользователей.

Так же принимал участие в проектировании open source библиотеки stylable.io для инкапсуляции стилей в React-компоненты.

Программирование люблю с детства. Свой первый сайт создал в далеком 2002 году. С 2007 плотно работал с базами данных. С 2014 профессионально занялся web-разработкой.

C React работаю начиная с версии v0.13 – с 2015 года. Занимаюсь различного рода менторством с 2017 года. Часто провожу небольшие доклады внутри компаний на тему React-Redux стека. Участвую в open-source проектах.

С 2018 года работаю в R&D центре компании Wix. 90% проектов, с которым здесь работаю – построены на базе React-Redux стека. Часть из них на TypeScript. Провожу лекции по Redux для новичков Wix. Участвую как в небольших проектах (с 2-3 разработчиками), так и в проектах на 50-70 разработчиков и знаю что такое «масштабирование» не понаслышке.

Что говорят о курсе участники

Мы занимаемся обучением с 2007 года. За это время у нас обучились тысячи разработчиков из разных стран и компаний.

Все отзывы являются честными. Мы не модерируем их.

Самые важные уроки, которые я вынес за год работы с React

Дата публикации: 2018-07-06

От автора: начинать с новой технологии может быть довольно хлопотно. Вы обычно окружаете себя морем учебников и статей, за которыми следуют миллионы личных мнений. И каждый утверждает, что они нашли «правильный и совершенный путь». Это оставляет нам дискуссию о том, будет ли наш выбранный учебник пустой тратой времени или нет.

Прежде чем погрузиться в океан, мы должны понять основные концепции технологии. Затем нам нужно разработать технологический подход. Если мы начинаем изучать React, нам сначала нужно подумать об этом. Только позже мы можем начать смешивать различные мышления в что-то одно.

В этой статье мы расскажем про некоторые важные для изучения React уроки, которые я узнал об этом мышлении из моего личного опыта. Мы будем работать в течение дня и ночи с личными проектами и даже с темой, которую я дал на местном мероприятии JavaScript.

React развивается, поэтому вы должны быть в курсе событий

Если вы помните начальное объявление версии 16.3.0, вы помните, как все были возбуждены. Вот некоторые из изменений и улучшений, которые мы получили:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Официальный Context API

Component Lifecycle Changes

Команда React Core и все участники делают большую работу, пытаясь улучшить технологию, которую все мы обожаем. А в версии 16.4.0 мы получили Pointer Events.

Дальнейшие изменения, безусловно, придут, и это всего лишь вопрос времени: Async Rendering, Caching, v. 17.0.0 и многие другие, еще не известные.

Поэтому, если вы хотите быть наверху, вы должны быть в курсе событий, происходящих в сообществе.

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

Не бойтесь разбить свой код на маленькие куски

Реакция основана на компонентах. Поэтому вы должны использовать эту концепцию и не бояться разделить большие куски на более мелкие.

Иногда простой компонент может быть сделан из 4-5 строк кода, а в некоторых случаях это совершенно нормально.

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

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

В приведенном выше примере свойства являются статическими. Таким образом, у нас может быть чистый компонент, который отвечает за сообщение об ошибке сайта Not Found и не более того.

Кроме того, если вам не нравятся классы CSS как имена классов во всем мире, я бы рекомендовал использовать стилизованные компоненты. Это может улучшить удобочитаемость.

Если вы боитесь создавать больше компонентов из-за загрязнения ваших папок с файлами, переосмыслите, как вы структурируете свой код. Я использую фрактальную структуру, и это потрясающе.

Не придерживайтесь основ — продвигайтесь вперед

Иногда вы можете подумать, что вы не понимаете чего-то достаточно, чтобы перейти к передовым материалам. Но часто вы не должны слишком беспокоиться об этом — возьмите вызов и убедитесь, что вы ошибаетесь.

Занимая продвинутые темы и подталкивая себя, вы можете понять больше об основах и о том, как они используются для больших вещей.

Существует много шаблонов, которые вы можете изучить:

Компоненты высокого порядка

Умные / немые компоненты

многие другие (попробуйте профилирование)

Изучите их все, и вы узнаете, почему и где они используются. Вы будете более комфортно чувствовать себя с React.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Кроме того, не бойтесь попробовать что-то новое в своей работе — конечно, в определенных границах! Не просто экспериментируйте с личными проектами.

Люди будут задавать вопросы, и это нормально. Ваша задача — отстаивать свою работу и принимать решения с сильными аргументами.

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

Не слишком усложняйте

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

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

Иногда вы можете подумать, что, используя новейшие технологии и записывая сложный код, вы говорите миру: «Я не junior, я становлюсь middle/senior. Посмотрите, что я могу сделать!

Честно говоря, это был мой настрой в начале моей карьеры разработчика. Но со временем вы понимаете, что с кодом, который был написан без демонстрации или потому, что «он работает», легче жить.

Сотрудники могут работать над вашими проектами, и вы не единственный человек, который отвечает за разработку / исправление / тестирование .

Команда может понять, что делали другие, не проведя длинную встречу. Достаточно пару минут для обсуждения.

Когда ваш коллега отправится на двухнедельный отпуск, вы можете взять на себя их задачу. И вам не придется работать над ним в течение 8 часов, потому что это можно сделать через час.

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

Вы станете любимым игроком команды.

Рефакторинг, рефакторинг и рефактор — это нормально

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

Но не беспокойтесь, это естественный процесс обучения. Без ошибок и ошибок мы не можем что-то улучшить.

Чем больше раз мы падаем, тем легче вставать.

Но вот подсказка: убедитесь, что вы протестировали свое текущее программное обеспечение. Smoke, unit, integration, snapshot — не стесняйтесь их.

Каждый столкнулся или столкнется со сценарием, когда тест мог бы сэкономить драгоценное время.

И если вы, как и многие люди, считаете, что это пустая трата времени, просто попробуйте немного подумать.

Вам не придется сидеть со своим коллегой, объясняя, как все работает.

Вам не придется сидеть с коллегой, объясняя, почему все сломалось.

Вам не придется исправлять ошибки для своего коллеги.

Вам не придется исправлять ошибки, которые были найдены через 3 недели.

У вас будет время на то, что вам нужно.

И это довольно большие выгоды.

Если вам это нравится, вы будете процветать

За предыдущий год моя цель состояла в том, чтобы лучше справиться с React. Я хотел поговорить об этом. Я хотел, чтобы другие наслаждались этим со мной.

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

Дело в том, что если вы хотите чего-то, как-то все начинают помогать вам. И в прошлом месяце я провел свое первое выступление по React в толпе из 200 человек.

В течение этого года я стал сильнее и увереннее с React — различные модели, парадигмы и внутренние работы. Я могу обсудить что-то продвинутое и научить других тому, чего я боялся раньше.

И сегодня я до сих пор ощущаю то же волнение и наслаждение, что и год назад.

Поэтому я бы рекомендовал всем спросить себя: «Тебе нравится то, что ты делаешь?»

Если нет, продолжайте искать эту специальную пьесу, о которой вы можете поговорить часами, учитесь каждую ночь и будьте счастливы.

Потому что мы должны найти то, что ближе всего к нашим сердцам. Успех не может быть принужден, он должен быть достигнут.

Если бы я мог вернуться на год назад, это то, что я сказал бы себе, чтобы подготовиться к большому путешествию вперед. Спасибо за чтение!

Автор: Tomas Eglinskas

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS

8 бесплатных обучалок фреймворку React.js

GitBook по React на русском

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

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

Курсы по React от Tyler McGinnis

От русского языка переходим к хардкорно-английскому, а именно видеокурсам, направленным на базовое знакомство с библиотекой React. 48 занятий (не переживайте, в сумме это 287 минут), посвящённых базовым принципам работы с библиотекой, рассмотрению шаблонных примеров и решению типовых задач. Можете использовать вместе с русским учебником для подтягивания знаний английского.

Hacking with React

Электронная бесплатная книга по React, которая поможет вам практически с нулевыми знаниями погрузиться в мир веб-разработки. Начинается она с настройки библиотеки, знакомит с JSX, а далее с помощью Hacking with React вы создадите свой первый проект. Но не надейтесь найти здесь всю интересующую вас информацию по React и уж тем более по разработке веба. Данная книга только для поверхностного ознакомления. Кстати, если вы любитель почитать книги вне дома и работы, можете за нескромные 10$ скачать автономную версию учебника.

Официальный туториал по React

Если вам нужна исчерпывающая информация, единственный способ найти её — обратиться к первоисточнику, то есть к официальной странице библиотеки. Почему данный туториал не на первом месте в данном списке? Всё просто. Дело в том, что, на мой личный взгляд, он несколько избыточен для новичка. Если у вас есть опыт работы с каким-либо ещё JS-фреймворком, то официальное представление удобно и понятно. Если вы только вчера постигли основы программирования, лучше загляните сюда попозже.

Фундаментальные курсы от Egghead

Платформа Egghead предлагает видеоуроки, среди которых есть как общий вводный курс по JavaScript, так и занятия по отдельным фреймворкам, будь то Angular или React. Последний курс является третьим по объему материала, и он включает в себя 5 бесплатных разделов.

Два из них посвящено общим вопросам создания мобильных веб-приложений, два — знакомству с Redux, и ещё один раздел поведает о вопросах роутинга в React. Так как платформа выпускает бесплатные материалы исключительно для «затравки», то на полноценные знания можете рассчитывать только при оплате подписки категории Pro. Однако для получения представления о React и Redux хватит и этих коротких занятий.

GtiBook по Redux на русском

Раз уж речь зашла о Redux, который хоть и не является частью React, но определённо обитает где-то в этой же экосистеме, то вашему вниманию представлен русскоязычный учебник по этой дисциплине. Автор тот же, но материал здесь рассчитан на более искушённую публику. Здесь вы прочитаете и про webpack, и про hot module replacement, чего не было в первой части. А в результате вы вместе с автором создадите приложение для сборки фотографий из сети Вконтакте по заданным параметрам.

React и Redux с Cabin

Это минимальный туториал по созданию приложения с нуля. Начинаете с установки React, его настройки, подключаете Redux, работаете с фильтрами и получаете готовый продукт. Информация очень схожа с русскоязычной версией, но здесь больший акцент делается на гибкость и функциональность. А ещё работать здесь будете с фотографиями из Instagram.

The React Convention

Перед вами онлайн-журнал по разработке приложений с React. В силу специфики новичкам сюда лучше не соваться. Зато опытные, а точнее, «промежуточные» разработчики найдут здесь много полезного как по шаблонным проектным решениям, так и интересным вариантам применения библиотеки. В общем, всем тем, кто уже не новичок в React и Redux, но всё ещё много сомневается, обязательно периодически заходить, читать и не забывать периодически проверять обновления.

React.js практически с самого своего появления в 2013 году стал привлекать внимание массовой аудитории разработчиков. В 2017 году это официально один из двух наиболее популярных JavaScript-фреймворков (библиотек), а по некоторым данным и вовсе абсолютный лидер. В общем, если вы веб-разработчик, то вам строго рекомендуется хотя бы ознакомиться с React и его возможностями. И вам в помощь 8 абсолютно бесплатных туториалов.

GitBook по React на русском

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

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

Курсы по React от Tyler McGinnis

От русского языка переходим к хардкорно-английскому, а именно видеокурсам, направленным на базовое знакомство с библиотекой React. 48 занятий (не переживайте, в сумме это 287 минут), посвящённых базовым принципам работы с библиотекой, рассмотрению шаблонных примеров и решению типовых задач. Можете использовать вместе с русским учебником для подтягивания знаний английского.

Hacking with React

Электронная бесплатная книга по React, которая поможет вам практически с нулевыми знаниями погрузиться в мир веб-разработки. Начинается она с настройки библиотеки, знакомит с JSX, а далее с помощью Hacking with React вы создадите свой первый проект. Но не надейтесь найти здесь всю интересующую вас информацию по React и уж тем более по разработке веба. Данная книга только для поверхностного ознакомления. Кстати, если вы любитель почитать книги вне дома и работы, можете за нескромные 10$ скачать автономную версию учебника.

Официальный туториал по React

Если вам нужна исчерпывающая информация, единственный способ найти её — обратиться к первоисточнику, то есть к официальной странице библиотеки. Почему данный туториал не на первом месте в данном списке? Всё просто. Дело в том, что, на мой личный взгляд, он несколько избыточен для новичка. Если у вас есть опыт работы с каким-либо ещё JS-фреймворком, то официальное представление удобно и понятно. Если вы только вчера постигли основы программирования, лучше загляните сюда попозже.

Фундаментальные курсы от Egghead

Платформа Egghead предлагает видеоуроки, среди которых есть как общий вводный курс по JavaScript, так и занятия по отдельным фреймворкам, будь то Angular или React. Последний курс является третьим по объему материала, и он включает в себя 5 бесплатных разделов.

Два из них посвящено общим вопросам создания мобильных веб-приложений, два — знакомству с Redux, и ещё один раздел поведает о вопросах роутинга в React. Так как платформа выпускает бесплатные материалы исключительно для «затравки», то на полноценные знания можете рассчитывать только при оплате подписки категории Pro. Однако для получения представления о React и Redux хватит и этих коротких занятий.

GtiBook по Redux на русском

Раз уж речь зашла о Redux, который хоть и не является частью React, но определённо обитает где-то в этой же экосистеме, то вашему вниманию представлен русскоязычный учебник по этой дисциплине. Автор тот же, но материал здесь рассчитан на более искушённую публику. Здесь вы прочитаете и про webpack, и про hot module replacement, чего не было в первой части. А в результате вы вместе с автором создадите приложение для сборки фотографий из сети Вконтакте по заданным параметрам.

React и Redux с Cabin

Это минимальный туториал по созданию приложения с нуля. Начинаете с установки React, его настройки, подключаете Redux, работаете с фильтрами и получаете готовый продукт. Информация очень схожа с русскоязычной версией, но здесь больший акцент делается на гибкость и функциональность. А ещё работать здесь будете с фотографиями из Instagram.

The React Convention

Перед вами онлайн-журнал по разработке приложений с React. В силу специфики новичкам сюда лучше не соваться. Зато опытные, а точнее, «промежуточные» разработчики найдут здесь много полезного как по шаблонным проектным решениям, так и интересным вариантам применения библиотеки. В общем, всем тем, кто уже не новичок в React и Redux, но всё ещё много сомневается, обязательно периодически заходить, читать и не забывать периодически проверять обновления.

JavaScript-фреймворк React.js

Расширьте свои профессиональные знания и навыки разработчика, научившись использовать в работе фреймворк React.js

Записаться на курс

• Длительность 3 месяца
• 1 марта начало обучения
• Обучение на практике
• Доступ к курсу навсегда

На рынке не хватает JavaScript-разработчиков

• 10 218 компаний сейчас ищут JavaScript-разработчиков
• 70 000 рублей зарплата начинающего специалиста

Данные сайта hh.ru

Кому подойдёт этот курс

Практикующим JavaScript-разработчикам

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

Frontend-разработчикам

React.js — один из самых популярных фреймворков в мире. Вы научитесь создавать изоморфные приложения на React Redux, типизировать их с помощью Typescript и работать с различными публичными сервисами.

Чему вы научитесь

Создавать приложения с нуля

Работать с публичными API

Познакомитесь с Flux, Redux, Mobx

Профилировать свое приложение

Тестировать свое приложение

Создавать SPA и RIA приложения с нуля

Как проходит обучение

Изучаете тему

В курсе — практические видеоуроки.

Выполняете задания

В том темпе, в котором вам удобно.

Работаете с наставником

Закрепляете знания и исправляете ошибки.

Защищаете итоговый проект

И дополняете им своё портфолио.

Программа

Вас ждут 3 месяца теории и практики, которые добавят вам реальных знаний в разработке на JavaScript.

1. Введение в React

1. Что такое React. Основные преимущества
2. Основы декларативного подхода
3. Возможности React, компоненты, состояние, применения
4. Экосистема React, основные библиотеки, из чего обычно состоит React-стек
5. Разбираем проект-пример

1. Основы работы React
2. Создаем проект для React, используя Webpack
3. Подключаем typescript проекта + проводим краткий обзор конфигурации
4. Подключаем Jest, Enzyme в проект, пишем конфигурацию
5. Структурируем проект
6. Работа с CSS-модулями: принципы использования

1. Компоненты в React
2. Основы Typescript, типы, интерфейсы, классы, @types
3. Создаем Layout приложения
4. Создаем компонент новостной карточки
5. Generics
6. Состояния в Class Components и Functional Components
7. Введение в функциональный подход

1. Жизненный цикл компонента
2. Меню в новостной карточке
3. Введение в Unit-тесты и Jest
4. Тест на реакт компонент Enzyme vs Snapshots
5. Hooks
6. useContext и Context в React
7. Адаптивные и неадаптивные компоненты. Mobile first и desktop first в адаптиве. Разница в подходах
8. Дробление компонентов на вспомогательные: Text, Break и подобные. Плюсы и минусы. Специфика применения

1. Как работать с API
2. Регистрируем аккаунт разработчика на Reddit
3. OAuth2
4. Страница авторизации пользователя
5. Как структурировать API-запросы в приложении

1. Управление состоянием приложения
2. Введение в Redux
3. Устанавливаем Redux, подключаем его к приложению
4. Получаем данные с Reddit
5. Presentation Components/Container Components
6. Подключаем компонент к Store
7. Обзор отличных от Redux решений на примере Mobx

1. Работа с асинхронными запросами в Redux
2. Пишем простой logger middleware
3. Подключаем thunk к приложению. Пишем свой первый асинхронный action
4. Работа с асинхронным состоянием
5. Пишем простой loader, показываем его перед загрузкой новостей при помощи контейнера

1. Создаем сайдбар, используя более продвинутые практики
2. Роутинг в SPA и в React
3. Подключаем React Router
4. Подключаем новостную ленту к роутеру
5. Дополнительный функционал роутинга

1. Использование порталов на примере карточки поста
2. Ref и useRef React hook. Реализуем с их помощью механизма click outside для скрытия модалки по клику вне тела модального окна
3. Обратимся к API поста и отобразим вложенные комментарии, используя рекурсивный механизм
4. Экскурс в формы на примере комментария. Проблематика форм React
5. Состояние полей. Как с этим справляются. Различные подходы
6. Пара слов о библиотеках — и почему они могут стать обузой
7. Controlled и uncontrolled поля, разница подходов
8. Сохраняем состояние формы и валидируем поля. Выводим ошибки в правильный момент времени
9. Смотрим на форму с точки зрения доступности, нативных элементов и возможности работать с ней табуляцией
10. Добавляем форму комментария по кнопке для ответа на любой комментарий, отправляем данные комментария и отображаем новый комментарий в дереве или сообщение об ошибке

1. Lighthouse: как с ним работать и зачем следовать рекомендациям. Аналоги этого инструмента
2. React Profiler: как профилировать и оптимизировать приложение
3. Оптимизация приложения с помощью React.useMemo

1. Серверный и статический рендеринг. Изоморфные приложения
2. Делаем серверный рендеринг, используя express
3. NextJS
4. Переносим приложение на Next
5. Деплой приложения в Zeit

Получить полную программу курса и консультацию

Похоже произошла ошибка. Попробуйте отправить снова или перезагрузите страницу.

Ваша заявка успешно отправлена

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

Александр
Кузнецов

Ольга
Климонова

Стоимость обучения

• Рассрочка без первого взноса 1 458 ₽
• Стоимость
  со скидкой 17 500 ₽
• Первоначальная
  стоимость 25 000 ₽

Записаться на курс или получить бесплатную консультацию

Похоже произошла ошибка. Попробуйте отправить снова или перезагрузите страницу.

Ваша заявка успешно отправлена

Часто задаваемые вопросы

• Могу ли я записаться на курс, если только недавно начал изучать JS?

К сожалению, нет. Курс рассчитан на тех программистов, которые уже хорошо разбираются в веб- и frontend-разработке, так как работа в фреймворке React.js — это дополнительный навык. У вас уже должна быть база знаний, иначе вы просто не справитесь с материалами курса.

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

Курс рассчитан на 3 месяца: кто-то заканчивает раньше, кто-то — чуть позже. Здесь главное не скорость прохождения, а эффективное использование полученных навыков, поэтому лучше не торопиться и ориентироваться на заявленные 3 месяца.

Получите консультацию и курс в подарок при покупке

Мы свяжемся с вами и ответим на любые возникшие вопросы

Похоже произошла ошибка. Попробуйте отправить снова или перезагрузите страницу.

Ваша заявка успешно отправлена

Записаться на курс

Наш специалист свяжется с вами и ответит на любые ваши вопросы

Похоже произошла ошибка. Попробуйте отправить снова или перезагрузите страницу.

Ваша заявка успешно отправлена

Ваша заявка принята!

Менеджер свяжется с вами в ближайшее время

Скидка 1500 ₽ При самостоятельной оплате курса

Истекает через: 00 00

Оплатить курс со скидкой

г. Москва, Ленинский проспект,
дом 6, строение 20

React JS для начинающих: как программистам зарабатывать более 200000 рублей

React JS — что это такое и для чего используется

React JS — это библиотека JavaScript с открытым исходным кодом, предназначенная для разработки пользовательских интерфейсов одностраничных и мобильных приложений. ПО разработано компанией Facebook и массово представлено на конференции JSConf US в 2013 г. Библиотека поддерживается сообществом отдельных разработчиков и корпораций.

Пользователь Habr под ником ElianL поделился переводом статьи ReactJS For Stupid People. Автор пишет, что «Реакт» — это только уровень представления, а не полноценный фреймворк. По этой причине бессмысленны споры о том, что лучше — React или Angular. Инструмент от Facebook дает только язык шаблонов и функции для отрисовки HTML, в результате получается обычный HTML-файл.

Плюсы и минусы React

Несмотря на ошибочное понимание инструмента в IT-сообществе, React JS имеет несколько важных преимуществ. Например, React нужен, чтобы понимать, как будет отрисован компонент, глядя на исходный код. Это важно, если разрабатывается сложное приложение, особенно в команде.

Делает элементы простыми для понимания связывание JavaScript и HTML. Связывание функциональности и разметки делает процесс разработки быстрее, а код в целом лучше.

Но и минусов достаточно. React — это не фреймворк на все случаи жизни. Вся документация по инструменту непонятная и в общем плохо написана, а сам фреймворк довольно большой (сравним по размеру с Angular). Последнее особенно актуально, если учитывать то, как мало от «Реакта» получает программист.

Что нужно знать разработчику для работы с React JS

Разработчик React JS в процессе изучения библиотеки должен освоить несколько сопутствующих технологий. Это не только стандартные CSS, HTML, основы верстки и JavaScript, но и следующие технологииинструментысофт:

• сборщик приложений WebPack;
• встраиваемый язык программирования ES6 для построения основы других языков;
• менеджер состояний Redux;
• система управления версиями Git;
• менеджер пакетов NPM.

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

Обучение React

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

Курсы онлайн

Курсы обучения программированию на React JS рассчитаны на начинающих веб-разработчиков или тех, кто уже комплексно изучил JavaScript. Обучение длится 6-10 недель, стоит 30-40 тыс. руб. За это время студенты учатся:

• разрабатывать приложения;
• хранить данные;
• взаимодействовать с сервером;
• оптимизировать код;
• разделять работу с данными и приложениями;
• управлять потоками данных;
• тестировать софт;
• выбирать инструменты с учетом задачи.

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

На этапе выбора курсов стоит понимать, что React и React Native — это разные вещи. Реакт — это библиотека, позволяющая создавать простые веб-приложения. В Native инструменты верстки отсутствуют, но технология дает возможность разрабатывать приложения под мобильные платформы iOS и Android.

Можно ли пройти обучение бесплатно

Освоить React можно по официальной документации. GitBook находится в открытом доступе. В туториале есть вся теория с большим количество примеров и скриншотов, список вопросов и ответов, уроки, но документ может оказаться слишком избыточным для новичков. Если есть работы с каким-либо другим фреймворком, то официальные спецификации удобные и понятные.

Можно ли изучить фреймворк самостоятельно

Эксперт по React и JS Адам Голаб составил пошаговый план, который поможет стать разработчиком с нуля или укажет направление для развития в профессии. Новичкам он рекомендует изучать программирование в такой последовательности:

• основы HTML и CSS;
• JS, библиотека jQuery;
• общие навыки (Git, HTTP(S);
• алгоритмы и структуры данных;
• документация React на официальном сайте;
• инструменты управления задачами, диспетчеры пакетов;
• CSS-фреймворки и препроцессоры;
• управление состоянием приложения;
• библиотеки;
• тестирование;
• развертывание на серверной стороне.

После можно переходить к разработке статических сайтов, изучать мобильную среду, десктоп и виртуальную реальность.

Основы React JS в одном видеоуроке:

С чего начать работу

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

Как составить резюме

HR-специалист Вероника Ильина рекомендует руководствоваться американским подходом, т. е. отражать опыт не перечнем компаний и должностей, а писать о реальных задачах и результатах.

Начинающие программисты могут указать публичный профиль на обучающем ресурсе, где показан прогресс, ссылку на сертификаты или показать пример кода на GitHub.

Как создать портфолио

Консультант по маркетингу digital-агентства полного цикла Alamics Digital Андрей Пометун рекомендует новичкам наполнять портфолио вымышленными проектами, а после первых практических работ искать реальные заказы.

Можно выполнять проекты за 10-30% от рыночной стоимости, но относительно бесплатная работа для портфолио должна быть ограничена как временная мера.

Как пройти собеседование

PR-директор конференции ЦИПР Ирина Гатилова рассказала, как пройти собеседование, если опыта совсем нет. Стоит честно рассказать HR-менеджеру, что за плечами только обучение, но уже есть определенные знания и реализованные студенческие проекты.

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

Вакансии для разработчиков React

Аналитическая служба HeadHunter и Яндекс.Практикум исследовали рынок вакансий в сфере IT и выяснили, что Java-разработчики являются одними из самых востребованных на рынке.

Примечание: Indeed, SimplyHired и Dice — крупнейшие в США сайты для поиска работы, AngelList — поиск вакансий в стартапах, Hired — площадка для поиска разработчиков.

Сейчас на HeadHunter в поиске по всей России находится более 2,8 тыс. вакансий, от претендентов требуется знание библиотеки React. В основном это web-разработчики, frontend и fullstack-программисты. От соискателей требуется опыт работы и с другими JS-фреймворками (Vue, Angular), отличное знание JavaScript, HTML, CSS, уверенное владение Git, Jira.

Сколько можно заработать

Кадровое агентство New.HR проанализировало зарплатные ожидания и реалии, с которыми сталкиваются fullstack-разработчики, которым требуется знание React. Текущая зарплата специалистов с опытом работы до 1 года — 67500 руб., желаемая — 77500 руб., с опытом 1-3 года — 115 тыс. руб. и 147 тыс. руб. соответственно, 3-5 лет — 165 тыс. руб. и 195 тыс. руб., более 5 лет — 200 тыс. руб. и 215 тыс. руб.

В этом видео рассказывают, почему Java-программистам много платят:

Frontend developer Sarah Drasner рассказала, что выучила React всего за неделю. Для программистов с опытом это не сложно, но новички могут потратить гораздо больше времени, и это нормально. Если фреймворк будет использоваться для работы, а не только для реализации личных проектов, лучше изначально серьезно подойти к обучению