Введение и цели 0:00 Создание React-приложения для просмотра новостей. Получение новостей через Currents API. Добавление категорий, поиска новостей и пагинации в следующих видео.
Настройка проекта 0:56 Создание папки проекта на рабочем столе. Открытие VS Code и создание проекта. Установка зависимостей и удаление ненужного кода.
Создание компонентов 2:49 Создание папки компонентов и файла header.jsx. Добавление стилей и использование модулей CSS. Создание компонента для заголовка и даты.
Стилизация и отображение даты 4:33 Создание функции для форматирования даты. Импорт функции и отображение даты в заголовке. Добавление стилей для заголовка и даты.
Создание страницы Main 8:22 Создание папки ages и файла main.jsx. Импорт и стилизация компонента. Добавление контейнера для отступов.
Создание элемента новостей 11:13 Копирование и адаптация папки header. Создание компонента для баннера новостей. Добавление стилей и элементов для баннера.
Создание компонента Image 14:09 Создание компонента для изображения. Добавление стилей и проверка наличия изображения. Импорт изображения и настройка стилей.
Создание файла env 18:58 Создание файла env для переменных API. Копирование URL Currents API и вставка в src.
Создание API и установка библиотеки 19:57 Создаем файл API News GS и устанавливаем библиотеку axios. Создаем переменные const Base и копируем их. Создаем функцию Get US и добавляем Try Catch для отлавливания ошибок.
Запрос данных и обработка ответа 20:56 Используем метод Get axios для запроса данных. Добавляем дополнительные параметры API OK и APK. Возвращаем response Data на странице в компоненте Main.
Обработка ответа и отображение новостей 21:51 Добавляем useEffect для запроса данных. Получаем массив новостей и отображаем их в компоненте. Проверяем наличие новостей и показываем баннер.
Отображение новостей в списке 23:47 Создаем состояние News и функцию для изменения состояния. Отображаем первую новость и добавляем стиль для списка. Используем метод map для отображения новостей в списке.
Стилизация и отображение элементов 26:43 Добавляем стиль для списка и элементов. Создаем элемент списка и добавляем стили для title и image. Проверяем отображение новостей и корректируем стили.
Публикация и запуск приложения 31:29 Инициализируем новый репозиторий и добавляем файл в gitignore. Создаем новый проект на VS Code и импортируем его. Деплоим приложение и проверяем его работу.
Планы на будущее 34:24 Планируем добавить поиск, фильтрацию, пагинацию и другие функции. Планируем добавить страницу с погодой и калькулятор курса валют. Планируем интеграцию с Firebase и добавление новостей в избранное.
Заключение 36:22 Призываем подписываться на YouTube и Telegram-канал. Обещаем анонсы и обсуждения будущих видео. Благодарим за просмотр и обещаем новые видео.
