Полный курс по JavaScript + React – с нуля до результата [Udemy] [Иван Петриченко]
Этот курс направлен на подробное изучение JavaScript без воды, но главное – немедленное применение его на практике.
Это значит, что вы получите материал для работы и мы вместе будем создавать реальные проекты шаг за шагом.
Вторая часть курса – это изучение самой популярной библиотеки на основе JavaScript – React.js со всеми необходимыми технологиями (в том числе и Redux).
Последнее обновление курса: 08/2022
Описание
Этот курс направлен на подробное изучение JavaScript без воды, но главное – немедленное применение его на практике.
Это значит, что вы получите материал для работы и мы вместе будем создавать реальные проекты шаг за шагом.
Вторая часть курса – это изучение самой популярной библиотеки на основе JavaScript – React.js со всеми необходимыми технологиями (в том числе и Redux)
Для кого подойдет этот курс?
- Если вы ничего не знаете про программирование, но хотите начать
- Если вы новичок в JavaScript и хотите быстро его освоить и начать уже применять в работе
- Если вы начали своё обучение с JQuery или другого инструмента, но вам не хватает знаний основ
- Если вы хотите научить создавать web-приложения
- Если вы хотите освоить библиотеку React на реальных проектах
Что внутри курса?
Теория – это хорошо, но без практики результата не будет. Поэтому каждый теоретический блок заканчивается практикой, где вы будете писать приложение, интерактивные элементы на сайте и тд. Все материалы для работы будут предоставлены.
На все вопросы внутри курса отвечаю лично как можно быстрее. Так же есть телеграм канал для вопросов и обсуждений. Все обновления курса бесплатны и в автоматическом режиме.
- мы изучим основы программирования и алгоритмов
- мы изучим основы объектно ориентированного программирования
- мы изучим основные концепции и принципы JavaScript, от самых простых до самых сложных
- мы научимся работать с такими популярными технологиями как AJAX, JSON и тд
- мы научимся работать с Git и GitHub
- мы научимся работать с npm, Babel, Browserify, Webpack, Heroku, Firebase и тд
- подумаем, какой фрэймворк или библиотеку выбрать в дальнейшем. Познакомимся с React, Angular, Vue, Jquery
- мы изучим библиотеку React и создадим 4 приложения на её основе
- мы изучим различные архитектурные подходы при построении web-приложений
- мы научимся работать с Redux и интегрировать этот инструмент в наши приложения
- Ну и, конечно, закрепим всё, что проходим на реальных проектах
Что такое JavaScript и почему его нужно учить уже сейчас?
JS – это язык интерактивности на веб-страницах. Без него сейчас не обходится ни один сайт в интернете. И даже больше! Используя различные фрэймворки, JavaScript заполоняет интернет: серверная сторона (Node.js), мобильные приложения (React Native, Ionic), виртуальная реальность (React 360) и так далее. Поэтому, если вы хотите пойти по одному из этих путей – нативный JS станет для вас просто необходимой базой.
Для кого этот курс:
- Для тех, кто желает выучить JS с нуля, понять, для чего он нужен и полностью освоить все темы в нем
- Для тех, кто хочет во время обучения применить знания на реальных проектах
- Для тех, кто хочет быть готовым к прохождению собеседования на позицию Front-End разработчика
- Для тех, кто хочет научится создавать web-приложения при помощи библиотеки React
Чему вы научитесь
- Узнаете основы программирования и алгоритмов
- Узнаете основные концепции и принципы JavaScript, от самых простых до самых сложных
- Изучите такие популярные технологии как AJAX, JSON и тд
- Научитесь работать с Git и GitHub
- Научитесь работать с npm, Babel, Browserify, Webpack, Heroku, Firebase и тд
- Узнаете, какой фрэймворк или библиотеку выбрать в дальнейшем. Познакомишься с React, Angular, Vue, Jquery
- Изучите библиотеку React и абсолютно все, что с ней связано (в том числе и Redux)
- Научитесь создавать полноценные web-приложения
- Закрепите всё, что узнали на реальных проектах
Подготовка к работе
1
Как проходить данный курс
2
Условные обозначения и материалы
3
Настройка рабочего пространства
4
Про редакторы кода и учебники
5
Как работать с JSHint
Основы JavaScript
1
Что такое JS и как его подключить к странице
2
Про упражнения и дополнительные уроки
3
Переменные и строгий режим
4
Правила и типы названия переменных
5
Классификация типов данных в JavaScript
6
Разница между объектами и массивами и неочевидные синтаксические возможности
7
Простое общение с пользователем
8
Интерполяция (ES6)
9
Операторы в JS
10
Учимся работать с системой контроля версий Git и с сервисом GitHub
11
Как работать с GitHub с разных компьютеров, gitignore и Git Kraken
12
Сетевые протоколы. Подключение компьютера к аккаунту Github через SSH
13
Практика, ч.1. Начинаем создавать приложение
14
Условия
15
Логические операторы
16
Циклы
17
Цикл в цикле и метки
18
Практика, ч2. Применяем условия и циклы
19
Функции, стрелочные ф-ции (ES6
20
Еще раз про аргументы функций
21
Про важность return
22
Методы и свойства строк и чисел
23
Практика , ч3. Используем функции
24
Метод trim()
25
Callback- функции
26
Объекты, деструктуризация объектов (ES6)
27
Массивы и псевдомассивы
28
Алгоритмы в целом и в JavaScript
29
Передача по ссылке или по значению, Spread оператор (ES6-ES9)
30
Основы ООП, прототипно-ориентированное наследование
31
Практика , ч4. Используем объекты
32
Отлавливаем ошибки в своем коде при помощи консоли разработчика. Breakpoints
33
Динамическая типизация в JS
34
Замыкание и лексическое окружение
35
Задачи с собеседований на понимание основ
36
Получение элементов со страницы
37
Действия с элементами на странице
38
Практика. Задание на отработку действий со страницей
39
События и их обработчики
40
Навигация по DOM – элементам, data-атрибуты, преимущество for/of
41
Рекурсия
42
Практика. Используем события на странице проекта
43
События на мобильных устройствах
44
Async, defer, динамические скрипты
45
Ресурсы для оттачивания навыков программирования
Дополнительные основы JavaScript
1
Про дополнительную информацию по основам
2
Оператор нулевого слияния (Nullish, ??) ES11
3
Оператор опциональной цепочки (?.) ES11
4
Живые коллекции и полезные методы
5
Тип данных Symbol
6
Дескрипторы свойств и полезные методы объектов
7
Итерируемые конструкции
8
Map
9
Set
10
BigInt
JavaScript в работе
1
ClassList и делегирование событий
2
Создаем табы в новом проекте
3
Скрипты и время их выполнения. setTimeout и setInterval
4
Сборщик мусора и утечки памяти
5
WeakMap и WeakSet
6
Работа с датами
7
Создаем таймер обратного отсчета на сайте
8
Обработка прошедшей даты
9
Параметры документа, окна и работа с ними
10
Создаем модальное окно
11
Модификации модального окна
12
MutationObserver, ResizeObserver и contenteditable
13
Функции-конструкторы
14
Контекст вызова. This
15
Классы (ES6)
16
Где отслеживать информацию о новых стандартах
17
Используем классы в реальной работе
18
Rest оператор и параметры по умолчанию (ES6)
Продвинутый JavaScript
1
Локальные сервера
2
JSON формат передачи данных, глубокое клонирование объектов
3
AJAX и общение с сервером
4
Реализация скрипта отправки данных на сервер
5
Красивое оповещение пользователя
6
Promise (ES6)
7
Fetch API
8
Методы перебора массивов
9
Подробно про npm и проект. JSON-server
10
Получение данных с сервера. Async/Await (ES8)
11
Дополнительно: Что такое библиотеки. Библиотека axios
12
Создаем слайдер на сайте, вариант 1
13
Создаем слайдер на сайте, вариант 2
14
Создаем навигацию для слайдов
15
Как сохранить данные без БД. Работа с localStorage
16
Регулярные выражения
17
Создаем калькулятор на сайте, часть 1
18
Создаем калькулятор на сайте, часть 2
19
Геттеры и сеттеры (свойства объектов)
20
Инкапсуляция
21
Прием модуль, как и зачем его использовать
22
Webpack. Собираем наш проект
23
ES6 Modules
24
Собираем наш проект и фиксим баги
25
Формируем портфолио на GitHub
26
Ошибки. Как избежать “поломки” своего кода
27
Создание своих ошибок
28
Как превратить код ES6 в старый формат ES5. Babel, Core.js и полифиллы
29
Современные библиотеки и фрэймворки
30
Библиотека Jquery
31
Функции-генераторы
32
JS анимации, requestAnimationFrame
33
Web Animations API
34
Event loop, подробная работа асинхронных и синхронных операций
35
Макро и микрозадачи
36
Работаем с готовым кодом
37
Какие проекты можно придумать и реализовать самостоятельно
Библиотека React. Базовый уровень
1
Что такое реакт, зачем он нам и почему не обычный JS
2
Фундаментальные принципы Реакта
3
Create React App – создаем свое приложение
4
Работаем с JSX-препроцессором, ограничения в нем
5
Элементы и компоненты
6
Строгий режим
7
Strict Mode и React 18
8
Создание нового проекта
9
Свойства компонентов
10
Практика свойств на проекте
11
Работа со списками и алгоритм согласования
12
Состояния компонентов
13
Самостоятельное задание на работу с состояниями
14
События в React и вспоминаем this
15
Практика состояний на проекте
16
Работа с формами, управляемые и неуправляемые компоненты
17
Иммутабельность состояния и собственные события
18
Практика. Подъём состояния
19
React-фрагменты
20
Практика. Реализуем поиск и фильтры
21
Семантика и доступность контента
22
Стили в React. Inline Styles
23
Стили в React. CSS и SASS/SCSS
24
Стили в React. Динамические классы и стили
25
Стили в React. Styled Components
26
Стили в React. Готовые библиотеки компонентов со стилями
27
Поля классов и static
Библиотека React. Средний фундаментальный уровень
1
Что такое API и как работают реальные приложения
2
Новый проект и работа с сервером
3
Трансформация данных и компонент со случайным персонажем
4
Хороший тон приложения (спиннер, ошибки…)
5
Жизненный цикл компонентов
6
Практика с жизненным циклом, componentDidUpdate
7
Предохранители (Error Boundaries)
8
Пагинация данных (дозагрузка персонажей)
9
Проверка типов с помощью PropTypes
10
Вставка элементов через props.children
11
Специализация и наследование
12
Render-props паттерн
13
Что такое ref и зачем он нужен
14
Порталы
15
“Бандлинг” и выгрузка проекта на сервер
Библиотека React. Хуки и средний продвинутый уровень
1
Введение в хуки
2
useState
3
useEffect
4
useCallback
5
useMemo
6
useRef
7
Практика. Перепишем весь проект на хуки
8
Создание собственных хуков
9
Практика собственных хуков на проекте
10
Что такое batching и как он работает в React 18
11
useTransition, useDeferredValue и другие нововведения React 18
12
Навигация в приложении, React Router v5
13
React Router v6
14
Практика создания динамических путей
15
Динамические импорты и React.lazy
16
React.memo, Pure Component и оптимизация скорости работы приложения
17
React Context и useContext
18
useReducer
19
Компоненты высшего порядка (HOC)
20
Библиотеки и экосистема React
21
React Transition Group
22
Formik, Yup и работа с формами любой сложности, часть 1
23
Formik, Yup и работа с формами любой сложности, часть 2
24
Разбор домашнего задания
25
SEO-оптимизация веб-приложений, React-helmet
26
❗Принцип конечного автомата (FSM, Finite-state machine) и 1 подход к состояниям
27
Разбираем ошибки сторонних библиотек и проблему с фокусом
React + Redux
1
Основные принципы Redux. Теория
2
Основные принципы Redux. Практика
3
Чистые функции
4
Оптимизация через actionCreators и bindActionCreator
5
Добавим React в проект
6
Соединяем React и Redux при помощи connect
7
Соединяем React и Redux при помощи хуков
8
Redux devtools
9
Правило названия action и домашнее задание (мини-экзамен)
10
Разбор самых сложных моментов
11
Комбинирование reducers и красивые селекторы. CreateSelector()
12
Про сложность реальной разработки
13
Store enhancers
14
Middleware
15
Redux-thunk
16
Redux Toolkit: configureStore()
17
Redux Toolkit: createAction()
18
Redux Toolkit: createReducer()
19
Redux Toolkit: createSlice()
20
Redux Toolkit: createAsyncThunk()
21
Redux Toolkit: createEntityAdapter()
22
Подводные камни домашнего задания
23
Про разные структуры проектов и закрепление материала
24
❗️ Redux Toolkit: RTK Query
- Базовые навыки HTML, CSS (Крайне желательно пройти курс Web-разработчик, это первая часть)
- Любой редактор кода
- Желание выучить JavaScript
- Желательно базовое знание английского языка
Будьте первым, кто оставит отзыв.
Пожалуйста, войдите чтобы оставить отзыв
Связанные курсы
Создайте 3 крутых веб-сайта, изучите Back и Frond End веб разработку, сверстайте сайты с HTML5, CSS3 и Bootstrap 4 Хотели создать веб сайт, но не з...
799 ₽
82 ₽
Аналитиком может быть каждый — важно освоить инструменты. На курсе мы познакомимся с основами анализа данных. С полученными знаниями вы сможете про...
3,000 ₽
126 ₽
PHP, CSS, JS
Курс предназначен для тех, кто: Уже умеет кодить на PHP в процедурном стиле Не знает ООП или чувствует, что оно вызывает ужас Хочет понять смысл...
9,800 ₽
800 ₽
