udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
Продолжительность
21 ч 59 мин
Категория
React.jsКоличество уроков
179 Видео
Дата добавления
13 окт. 2018 г., 07:49
Язык
Русский
Дата выхода
9 окт. 2018 г., 10:47
Дата обновления
9 дек. 2019 г., 08:42
Практическая разработка коммерческих React приложений. Чтобы сделать этот курс максимально полезным, мне очень важно знать мнение первых учеников. А это невозможно сделать, не поделившись готовыми уроками уже сейчас. Этот курс снят на 70% (это означает, что несколько последних глав ещё не добавлены в курс).
Вот мой план по выпуску оставшихся глав курса:
React Router - 10 октября
Redux - 17 Октября
Продвинутый WebPack - 25 Октября
Курс создан на основе React 16.4 (июнь 2018) и затрагивает последние нововведения в экосистеме React.
Курс содержит подробное руководство по новому синтаксису JavaScript вплоть до ECMAScript 2019.
React - самая популярная библиотека для разработки веб-приложений и один из самых востребованных навыков для JavaScript разработчика в 2018 году.
Фокус этого курса - практическая разработка приложений на React. Это означает, что мы рассмотрим не только эффективное использование самого React, но и целую экосистему инструментов и библиотек, которые необходимы для создания полноценного UI приложения.
Разрабатывая реальные приложения мы изучим самые важные инструменты в экосистеме React:
React
Redux
React Router
Jest
Webpack и Babel
Поскольку ни одно UI приложение не может работать без сервера примеры из этого курса работают с реальными REST API и могут использоваться, как основа для вашего собственного проекта! А чтобы еще больше приблизить наши примеры к коммерческим продуктам, мы детально рассмотрим юнит тестирование, и эффективную упаковку при помощи WebPack.
Этот видео-курс построен на основании оффлайн курсов, проводимых автором для подготовки профессиональных JavaScript разработчиков. Его задача - дать все необходимые практические навыки для работы в команде или для самостоятельной разработки React приложений коммерческого уровня.
Посмотреть больше
- Урок 1.00:04:20Об этом курсе
- Урок 2.00:05:22Что такое React
- Урок 3.00:10:21Первое React приложение
- Урок 4.00:06:18Настройка среды разработки
- Урок 5.00:05:42Как скачать код примеров
- Урок 6.00:06:05Современный JavaScript и его версии
- Урок 7.00:02:50Введение - как использовать этот раздел
- Урок 8.00:06:11Ключевые слова let и const
- Урок 9.00:11:45Arrow-функции
- Урок 10.00:05:40Параметры по-умолчанию
- Урок 11.00:04:15Rest параметр
- Урок 12.00:04:18Spread оператор для массивов
- Урок 13.00:12:55Деструктуризация объектов
- Урок 14.00:09:27Деструктуризация массивов
- Урок 15.00:04:33Шаблонные строки (template strings)
- Урок 16.00:07:37Объекты
- Урок 17.00:03:49Оператор Object Spread
- Урок 18.00:14:20Прототипы
- Урок 19.00:09:18Классы
- Урок 20.00:07:20Свойства классов (class properties)
- Урок 21.00:11:29Модули в JavaScript
- Урок 22.00:05:01Каким будет наш первый проект
- Урок 23.00:08:09Создаём пустой React проект
- Урок 24.00:11:06React элементы
- Урок 25.00:06:32React компоненты
- Урок 26.00:14:20JSX
- Урок 27.00:04:20Упражнение - Code Review 1
- Урок 28.00:08:52Структура React проекта (часть 1)
- Урок 29.00:07:22Props - свойства компонентов
- Урок 30.00:10:32Массивы, как свойства компонентов
- Урок 31.00:10:50Коллекции и ключи
- Урок 32.00:14:37Как импортировать css
- Урок 33.00:08:10Структура React проекта - часть 2
- Урок 34.00:08:00Компоненты-классы
- Урок 35.00:11:37Обработка событий
- Урок 36.00:05:36State - состояние React компонента
- Урок 37.00:04:32Как работает setState()
- Урок 38.00:05:26Обновление состояние, зависящее от предыдущего состояния
- Урок 39.00:07:43Собственные события
- Урок 40.00:11:38setState() - удаление элемента
- Урок 41.00:14:42setState() - добавление элемента
- Урок 42.00:07:57Данные в React приложении
- Урок 43.00:15:46setState() - редактирование элементов
- Урок 44.00:09:31Работа с формами
- Урок 45.00:04:12Контролируемые компоненты
- Урок 46.00:01:54Как использовать этот раздел
- Урок 47.00:09:09Реализуем поиск
- Урок 48.00:13:08Реализуем фильтры
- Урок 49.00:03:03Каким будет наш следующий проект
- Урок 50.00:05:16Создаём пустой проект
- Урок 51.00:03:28Выбор HTTP API для браузера
- Урок 52.00:05:51Как работает Fetch API
- Урок 53.00:04:16Обработка ошибок в Fetch API
- Урок 54.00:07:21Создаём клиент для API
- Урок 55.00:06:51Создаём компоненты StarDB
- Урок 56.00:09:48Компонент, который получает данные из API
- Урок 57.00:11:28Трансформация данных API
- Урок 58.00:04:21Создаём индикатор загрузки
- Урок 59.00:08:39Логика индикатора загрузки
- Урок 60.00:08:59Обработка ошибок сети в компоненте
- Урок 61.00:05:25Работа с API - выводы
- Урок 62.00:07:07Зачем компонентам "жизненный цикл"?
- Урок 63.00:06:00Методы жизненного цикла
- Урок 64.00:02:39componentDidMount()
- Урок 65.00:08:03Используем на практике componentDidMount()
- Урок 66.00:02:08componentDidUpdate()
- Урок 67.00:07:51Используем на практике componentDidUpdate()
- Урок 68.00:02:20componentWillUnmount()
- Урок 69.00:10:41componentDidCatch()
- Урок 70.00:09:11Используем componentDidCatch() на практике
- Урок 71.00:04:07Паттерны React - введение
- Урок 72.00:09:22Использование функций
- Урок 73.00:07:15Render-функции
- Урок 74.00:06:56Свойства-элементы
- Урок 75.00:08:45Children
- Урок 76.00:09:16Практика - рефакторинг компонента
- Урок 77.00:09:43Работа с props.children
- Урок 78.00:05:17Клонирование элементов
- Урок 79.00:12:51Компоненты высшего порядка (HOC)
- Урок 80.00:12:11Рефакторинг компонентов
- Урок 81.00:08:32Композиция компонентов высшего порядка
- Урок 82.00:06:34Контекст
- Урок 83.00:09:47Использование Context API
- Урок 84.00:07:04Использование HOC для работы с контекстом
- Урок 85.00:12:26Трансформация props в компонентах высшего порядка
- Урок 86.00:12:53Обновление контекста
- Урок 87.00:10:20Рефакторинг: делаем код чище
- Урок 88.00:07:36Рефакторинг компонентов высшего порядка (опциональный урок)
- Урок 89.00:11:24Функция compose() (опциональный урок))
- Урок 90.00:06:14Свойство defaultProps
- Урок 91.00:05:00Свойство propTypes
- Урок 92.00:03:58NPM - установка дополнительных пакетов
- Урок 93.00:07:28Библиотеки prop-types
- Урок 94.00:06:57Что такое React Hooks (хуки)
- Урок 95.00:02:29Новый проект
- Урок 96.00:11:15useState()
- Урок 97.00:02:51useContext()
- Урок 98.00:11:04useEffect()
- Урок 99.00:09:33useEffect() - упражнения
- Урок 100.00:07:32Использование useEffect() для загрузки данных
- Урок 101.00:02:28Создание собственных хуков
- Урок 102.00:17:51useCallback() и useMemo()
- Урок 103.00:03:50Правила и ограничения хуков
- Урок 104.00:04:55Что такое роутинг
- Урок 105.00:04:54Основы react-router
- Урок 106.00:03:01Link
- Урок 107.00:05:30Как работает Route
- Урок 108.00:07:06Динамические пути
- Урок 109.00:06:35withRouter
- Урок 110.00:04:59Относительные пути
- Урок 111.00:08:04Опциональные параметры
- Урок 112.00:11:13Авторизация и "закрытые" страницы
- Урок 113.00:07:16Switch (обработка несуществующих адресов)
- Урок 114.00:10:15Введение в Redux
- Урок 115.00:03:33Установка библиотек
- Урок 116.00:07:04Reducer
- Урок 117.00:04:28Redux Store
- Урок 118.00:06:04Чистые функции
- Урок 119.00:05:22UI для Redux
- Урок 120.00:03:43Действия с параметрами
- Урок 121.00:03:43Action Creator
- Урок 122.00:01:59Структура проекта
- Урок 123.00:08:50bindActionCreators()
- Урок 124.00:08:48Использование React и Redux
- Урок 125.00:11:03react-redux и функция connect()
- Урок 126.00:08:06Функция mapDispatchToProps()
- Урок 127.00:04:28mapDispatchToProps в виде объекта
- Урок 128.00:02:30Наш следующий проект
- Урок 129.00:03:35Инициализация проекта
- Урок 130.00:05:29Структура react+redux проекта
- Урок 131.00:09:34Вспомогательные компоненты
- Урок 132.00:06:44Redux компоненты
- Урок 133.00:08:01Каркасc React-Redux приложения
- Урок 134.00:10:58Роутинг
- Урок 135.00:04:38Чтение данных из Redux Store
- Урок 136.00:12:04Отправка действий в Redux Store (action dispatch)
- Урок 137.00:09:38Стили (опциональное видео)
- Урок 138.00:07:49Работа с асинхронными данными
- Урок 139.00:07:02Отличия setState() и reducer
- Урок 140.00:07:45Обработка ошибок
- Урок 141.00:07:07mapDispatchToProps: аргумент ownProps
- Урок 142.00:04:21Naming Convention для действий
- Урок 143.00:03:40Компоненты-контейнеры
- Урок 144.00:10:33Подключение нового компонента к Redux
- Урок 145.00:10:07Redux: добавление элементов в массив
- Урок 146.00:13:43Redux: обновление элементов в массиве
- Урок 147.00:12:17Redux: удаление элементов из массива
- Урок 148.00:12:54Организация кода reducer'а
- Урок 149.00:11:46Store Enhancers
- Урок 150.00:09:51Middleware
- Урок 151.00:11:41Thunk
- Урок 152.00:02:59Следующие шаги
- Урок 153.00:03:09Сборка React приложения
- Урок 154.00:06:04Создаём новый проект
- Урок 155.00:04:36Установка Babel
- Урок 156.00:06:09Плагины Babel
- Урок 157.00:04:20Конфигурация Babel (.babelrc)
- Урок 158.00:06:55Babel Presets
- Урок 159.00:09:10Оптимизация сборки для конкретных браузеров
- Урок 160.00:05:55Динамический выбор браузеров (browserslist)
- Урок 161.00:04:31Файлы конфигурации browserslist
- Урок 162.00:07:33Polyfills
- Урок 163.00:03:27Работа с JSX
- Урок 164.00:02:32Организация зависимостей
- Урок 165.00:04:44Что такое WebPack
- Урок 166.00:07:31Установка WebPack
- Урок 167.00:04:31Файл конфигурации WebPack
- Урок 168.00:08:30Webpack Loader
- Урок 169.00:04:26Конфигурация loader'ов
- Урок 170.00:02:55Loader'ы для разных типов файлов
- Урок 171.00:04:44React и Babel Loader
- Урок 172.00:06:17Композиция Loader'ов
- Урок 173.00:05:12CSS препроцессоры. Sass.
- Урок 174.00:03:05Упрощение синтаксиса webpack.config.js
- Урок 175.00:06:27Плагины
- Урок 176.00:04:15HtmlWebpackPlugin: использование шаблонов
- Урок 177.00:04:49Mini CSS Extract Plugin
- Урок 178.00:08:10Wepback Dev Server
- Урок 179.00:15:46Конфигурация для production
Автор - udemy
Комментарии
Сейчас в основном хуками и функциональным программированием пользуются.
this.setState(({todoData}) => ({
todoData: [...todoData, newItem],
}));
а то Ментр ругатся будет )))
Посилання, яке необхідно добавити у функцію fetch змінилося!
https://swapi.dev/api/people/1/
const data = loading ? :
Можно ли чуточку оптимизировать код? Проверил, работает, но может я чего-то не учел?
Итак, вместо:
const spinner = loading ? : null;
const content = !loading ? : null
...
{spinner}
{content}
заменить на:
const data = loading ? :
...
{data}
Человек занимается отуплением своих учеников, а его код это - оверинжиниринг. (обертка - обертка -обертка - чтоб обертка....)
Да молодец, что рассказывает про базовые функции с примерами, но их применение это ппц.
Читайте лучше оф.доку
toggleProperty(arr, id, prop) {
const item = arr.find(element => element.id === id);
const data = {...item, [prop]: !item[prop]};
return arr.map(todo => todo.id === id ? data : todo);
}
this.setState(({todoData}) => {
return {
todoData: todoData.filter(element => element.id !== id)
}
});
если ты об этом
filter вернет новый массив не мутируя старый.
toggleProp(arr, id, propName){
const idx = arr.findIndex((el) => el.id === id);
const oldItem = arr[idx];
-------> const newItem = {...oldItem, [propName]: [!oldItem.propName]};
console.log(newItem)
const newArray = [
...arr.slice(0, idx),
newItem,
...arr.slice(idx + 1)
]
console.log(newArray)
return newArray
}
Друзья, кто сталкивался?
Unhandled Rejection (TypeError): undefined is not an object (evaluating 'this._extractId')
return {
id: this._extractId(planet),
.......}
если ее закрыть содержимое сайта показывает, но при обновлении постоянно вылазит эта ошибка, кто с этим сталкивался??
спасибо
componentDidMount() {
this.swapiService
.getAllPeople()
.then((peopleList) => {
this.setState({
peopleList
});
});
}
У меня peopleList приходит undefined после запроса к апи, а почему - понять не могу
свапи переехал сюда https://swapi.dev/documentation#people
Где найти этот исходный код?