Базовый React.js +
Vue.js

Освоите одни из самых популярных js-фреймворков на примере практических проектов и сделаете две работы в портфолио

Курс для тех, кто уже хорошо знает нативный JavaScript. Без знаний JS на курсе будет очень тяжело и непонятно. Vue.js и React.js подойдёт тем, кто хочет вырасти из позиции джуниора, работать над более серьёзными проектами и зарабатывать больше.

Практический курс

Программа курса Vue из двенадцати уроков с теорией и кучей практики. Учимся на реальном проекте

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

0 урок. Настройка рабочего пространства
Настройка редактора кода
ESlint

3 урок. Роутинг приложения. Vue-router
Практика. Настройка роутинга приложения. Вывод статической информации каждой страницы.

4 урок. Состояние компонента. Объекты data, computed
Практика. Работа с состоянием компонента.

5 урок. Обработчики событий v-on. Объект methods. Жизненные циклы компонента
Практика. Работа с обработкой событий.

6 урок. Vuex. Работа с геттерами и сеттерами
Практика. Перенос данных товара во внутреннее хранилище store.

7 урок. Директивы, циклы, условия, динамические стили и классы
Практика. Динамический вывод карточек товара

8 урок. Передача аргументов в компонент. Объект props
Практика. Создание универсального компонента карточки товара.

9 урок. Динамические страницы
Практика. Реализация страницы товара.

10 урок. Работа с формами. Валидация полей. Vuelidate
Практика. Валидация формы обратной связи.

11 Урок. JSON-server, получение данных, сохранение данных.
Практика. Получение данных с сервера и вывод ее на страницу.

12 Урок. Поиск. Фильтрация.
Практика. Реализация поиска и фильтрации товара.

Курс построен так, чтобы разобраться в основах фреймворка Vue.js на реальном проекте, который после курса вы сможете положить в своё портфолио.

Проект на Vue

Популярность поисковых запросов на тему React, Vue и Angular за последний год. Google Trends

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

Проект на React

На React пишут и в маленьких студиях, и на фрилансе, и в корпорациях — от Фейсбука, который поддерживает развитие этой библиотеки, до фрилансеров на FL.ru. Работодатели ищут фронтендеров со знанием React на постоянку в студию и на отдельные проекты на фрилансе.

React — самая популярная
js-библиотека во всём мире.
Её используют разработчики Европы и СНГ

Со знаниями React проще устроиться в компанию и продвинуться по карьере. Если освоить React, учить другие фреймворки и библиотеки вроде Vue будет в разы легче.

0 урок. Настройка рабочего пространства
Настройка редактора кода
ESlint

3 урок. Фнукциональный компонента
Подготовим проект к старту
Установим node js
Создадим проект react - create react app
Подключим styled components, google fonts

4 урок. Props
Создадим новый компонент меню
в нашем проекте
Научимся передавать свойства (props) из одного компонента в другой
Для этого добавим еще компонент
со списком продуктов

5 урок. React Hooks
Начнем работу с React Hooks
Реализуем Модальное Окно
Познакомимся с хуками в реакт для работы с состоянием компонента
Реализуем модальное окно для подробного описания продукта
Научимся передавать хуки через props,
для изменения состояние одного компонента из другого

6 урок. Закрепляем пройденное Реализуем корзину, блок заказа
В этом уроке у нас будет только реакт верстка компонентов блока заказов

7 урок. Hooks Component
Хуки отдельным компонентом
Реализуем хук по добавлению товара
в корзину

8 урок. React Hooks
Добавим хук, для смены количества товара в корзине

9 урок. React Hooks
Добавим хук и верстку для добавления топпингов к заказу и выбор типа

10 урок. React Hooks Выбор вида товара и удаление из заказа
Реализуем заказы с выбором (виды чая, газировки, кофе)
Добавим возможность удалять товар из заказа

11 Урок. FireBase auth
Подключим firebase и реализуем авторизацию
Знакомство с firebase, где мы будем хранить данные пользователей, заказов, простой backend

12 Урок. FireBase DB
Настроим базу данных Firebase

14 Урок. Firebase Gmail Nodemailer
Отправка заказа на gmail с помощью Nodemailer

Курс построен так, чтобы разобраться в основах библиотеки React и сразу работать над реальным проектом. А в работе над проектом уже разбираться в более сложных вещах вроде React Hooks.

Модуль. Основы

1

Модуль. React Hooks

2

Модуль. Firebase

3

13 урок. React Hooks Effect
Продолжаем изучать возможности хуков и как писать "грязный функционал" — побочные эффекты
Подтверждение и отправка заказа в базу данных.