Разработай 6 проектов на ReactJS (для начинающих)

• Видео посвящено разработке шести React-проектов для начинающих.  

• Цель видео – помочь лучше понять базовую часть React.  

• Проекты уникальны и могут быть добавлены в портфолио.  

• В описании есть ссылка на видео про деплой.  

• Перейдите по ссылке в описании для клонирования репозитория.  

• Установите Git, если его нет.  

• Клонируйте репозиторий с помощью команды `git clone`.  

• В репозитории есть несколько веток с проектами.  

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

• В следующем ролике будут доработаны остальные проекты.  

• По умолчанию используется ветка `account`.  

• Для каждого проекта выбирается соответствующая ветка.  

• В дальнейшем будут объяснены, как выбирать ветки для конкретных проектов.  

• Пример приложения с кнопками "плюс" и "минус".  

• Создание переменной для хранения данных.  

• Попытка увеличить счетчик с помощью JavaScript.  

• JavaScript изменяет переменную, но React не знает об этом.  

• Использование хука `useState` для обновления состояния в React.  

• Пример использования хука `useState` для увеличения и уменьшения счетчика.  

• Выбор ветки `module` для работы.  

• Описание модального окна: гифка, кнопка "закрыть", тень.  

• Задача: реализовать рендер модального окна при нажатии кнопки.  

• Два популярных способа реализации модальных окон.  

• Условный рендер: отрисовка блока по условиям.  

• Вскрытие и закрытие модального окна.  

• Создание состояния `open` для отображения или скрытия разметки.  

• Условный рендер: если `open` true, рендерится блок, если false — скрывается.  

• Открытие окна при клике на кнопку и закрытие при клике на кнопку "Закрыть".  

• Невозможность анимации открытия и закрытия окна.  

• Окно открывается и закрывается резко.  

• Использование классов для анимации отображения и скрытия окна.  

• Класс `show` для плавного отображения окна.  

• Условное добавление класса `show` при `open` true.  

• Плавное отображение и скрытие окна.  

• Возможность использования динамического контента внутри окна.  

• Перенос разметки модального окна в отдельный компонент.  

• Передача параметров `open` и `setOpen` компоненту.  

• Рендеринг модального окна с помощью условного рендера или анимации.  

• Открытие репозитория и выбор ветки `quiz`.  

• Обзор компонентов `game` и `result`.  

• Прогресс-бар и варианты ответов.  

• Массив объектов с вопросами и вариантами ответов.  

• Индекс корректного варианта.  

• Разбиение приложения на задачи для дальнейшей работы.  

• Приложение разрабатывается постепенно, не сразу весь объем задач.  

• Создаем стейт для хранения шага, на котором находится пользователь.  

• Импортируем библиотеку React для использования стейта.  

• Создаем переменную для хранения вопроса по индексу.  

• Проверяем, что возвращается из массива вопросов.  

• Передаем вопрос в компонент Game.  

• Рендерим заголовок вопроса из объекта.  

• Рендерим варианты ответов, используя массив строчек.  

• Указываем ключ для рендеринга списка.  

• Создаем функцию для обработки клика на вариант.  

• Передаем функцию в компонент Game.  

• Проверяем, какой вариант выбран, и передаем индекс в функцию.  

• Увеличиваем шаг на +1 при клике на вариант.  

• Проверяем, что приложение переходит на следующий вопрос.  

• Передаем шаг в компонент Game.  

• Вычисляем процент для прогресс-бара, деля шаг на количество вопросов.  

• Округляем результат и передаем его в компонент.  

• Проверяем, равен ли шаг количеству вопросов.  

• Если равен, рендерим компонент Result.  

• Создаем стейт для подсчета правильных вариантов.  

• Проверяем, совпадает ли выбранный вариант с правильным.  

• Передаем количество правильных вариантов в компонент Result.  

• Проверяем правильность отображения результатов.  

• Добавляем возможность перезапустить игру с начала.  

• Перезагружаем страницу при клике на "Попробовать снова".  

• Разработка приложения для списка пользователей, приглашаемых на мероприятие.  

• Функционалы: рендеринг пользователей, добавление и удаление пользователей, поиск по списку, отправка приглашения.  

• Использование фронтендерской части приложения.  

• Использование ссылки для получения списка пользователей.  

• Рендеринг пользователей в списке.  

• Начало разработки с запроса данных с бэкэнда.  

• Создание состояния для хранения пользователей.  

• Отправка запроса на бэкэнд с помощью функции fetch.  

• Преобразование ответа в JSON и извлечение массива пользователей.  

• Обработка ошибок с помощью catch.  

• Рендеринг скелетона при загрузке данных.  

• Использование библиотеки React Content Loader для рендеринга скелетона.  

• Передача массива пользователей в компонент.  

• Рендеринг каждого пользователя.  

• Решение проблемы с отображением пустого блока при отсутствии данных.  

• Создание состояния для отображения скелетона.  

• Изменение состояния при успешном ответе или ошибке.  

• Корректное отображение списка пользователей после завершения загрузки.  

• Преобразование статической информации в динамическую.  

• Передача свойств пользователя в компонент.  

• Проверка корректности отображения данных.  

• Передача всех свойств объекта в компонент.  

• Оптимизация кода для передачи одинаковых свойств из объекта в компонент.  

• Сокращение кода путем передачи всех свойств объекта в компонент.  

• Передача ключа для рендеринга с помощью map.  

• Использование уникального ключа для каждого объекта.  

• Создание контролируемого ввода с использованием состояния.  

• Создание нового состояния searchValue с пустой строкой по умолчанию.  

• Передача состояния и функции в компонент.  

• Рендеринг компонента с указанием функции onChange.  

• Проверка работы через консоль.  

• Фильтрация массива пользователей по введенному значению.  

• Проверка совпадения имени и почты с введенным значением.  

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

• Проблема с поиском пользователей по имени с маленькими буквами.  

• Конвертация всех значений в нижний регистр для корректного поиска.  

• Проверка работы поиска с учетом регистра.  

• Добавление пользователя в отдельный массив при нажатии на плюсик.  

• Пользователь будет потенциально приглашен на мероприятие.  

• Создаем новый массив `invites` для приглашенных пользователей.  

• При нажатии на кнопку добавляем или удаляем пользователя из массива.  

• Переходим к компоненту `Users` для обработки кликов.  

• Компонент `Users` получает метод `onClickInvitation`.  

• Определяем, добавлен ли пользователь в массив `invites`.  

• Показываем плюс или минус в зависимости от статуса пользователя.  

• Проверяем, есть ли пользователь в массиве `invites`.  

• Если пользователь есть, удаляем его, если нет, добавляем.  

• Передаем функцию `onClickInvitation` в компонент `Users`.  

• При рендере каждого пользователя проверяем наличие его ID в массиве `invites`.  

• Меняем значок плюса на минус, если пользователь есть в массиве.  

• Проверяем работу добавления и удаления пользователей.  

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

• Создаем `set` для отображения информации о приглашенных пользователях.  

• При клике на кнопку отображаем блок с информацией.  

• Запрещаем нажатие кнопки, если нет приглашенных пользователей.  

• Проверяем работу ограничения.  

• Нажатие кнопки "Назад" перезагружает страницу.  

• Проверяем корректность работы перезагрузки.  

• Реализован функционал для добавления пользователей в список приглашений.  

• Возможность фильтрации приглашенных пользователей.  

• Отображение информации о количестве приглашенных при нажатии кнопки.  

• Приложение конвертирует рубли в доллары и наоборот.  

• Идея взята с сайта РБК, но без доступа к их API.  

• Стоимость валют будет запрашиваться один раз и вычисляться на JavaScript.  

• Стоимость доллара относительно других валют будет браться с API.  

• Пример: один доллар равен 65.20 рублей.  

• Курсы валют могут отличаться в разных источниках.  

• В проекте нужно выбрать ветку "ска конвертер".  

• В проекте есть массив с четырьмя валютами и блок для их отображения.  

• Импут принимает значение валюты и возвращает его в функцию.  

• Логика приложения будет включать запрос данных и сохранение их в состоянии.  

• При первом рендере запрашиваются данные о валютах.  

• Полученные данные сохраняются в объекте состояния.  

• Проверка работы через консоль.  

• Объект состояния содержит все валюты.  

• Эти данные будут использоваться в дальнейшем.  

• Создание состояния для выбора валюты.  

• Определение валют "фром" и "ту".  

• По умолчанию выбран рубль.  

• Передача функции для сохранения выбранной валюты.  

• Дублирование логики для валюты "ту".  

• Проверка корректности работы состояния.  

• Создание функции для вычисления стоимости валюты.  

• Создание состояний "фром прайс" и "ту прайс".  

• Передача значения из ввода в функцию.  

• Деление значения из ввода на курс валюты.  

• Умножение результата на курс целевой валюты.  

• Сохранение результата в соответствующие состояния.  

• Тестирование конвертации рублей в доллары и обратно.  

• Проверка корректности работы с разными валютами.  

• Написание аналогичной логики для валюты "ту".  

• Деление курса валюты "фром" на курс валюты "ту".  

• Умножение значения из ввода на результат деления.  

• Перенос вычисленной суммы в соответствующие состояния.  

• Проверка корректности работы конвертации.  

• Создание эффектов для отображения изменений валюты.  

• Планирование дальнейших доработок для улучшения интерфейса.  

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

• Использование onChange для изменения валюты.  

• Проверка работы функции.  

• Объяснение проблемы асинхронного выполнения функции setFrom.  

• Пример некорректного отображения валюты.  

• Решение проблемы с помощью useEffect.  

• Использование useEffect для ожидания перерисовки перед выполнением вычислений.  

• Проверка работы после корректировки.  

• Аналогичные изменения для другой валюты.  

• Добавление по умолчанию одного доллара.  

• Исправление отображения суммы при первом рендере.  

• Проблема с асинхронностью при перезагрузке приложения.  

• Объяснение асинхронности изменения состояния.  

• Создание хука useRef для хранения информации о валютах.  

• Применение useRef для корректного отображения данных.  

• Фиксация суммы для удобства.  

• Демонстрация работы конвертера валют.  

• Описание функционала приложения: фильтрация по категориям, поиск, пагинация.  

• Использование сервиса MockAPI для хранения данных.  

• Альтернативный способ использования public file data JSON.  

• Создание проекта и ресурса в MockAPI.  

• Копирование данных из файла JSON.  

• Получение уникальной ссылки для работы с данными.  

• Запрос всех коллекций по умолчанию.  

• Обзор структуры проекта и кода.  

• Подготовка к разработке кода для приложения.  

• Компонент коллекции принимает название и несколько картинок.  

• Разметка компонента проста и не содержит сложной логики.  

• Рекомендуется вынести компонент в отдельный файл и экспортировать его.  

• Запрос данных по ссылке и сохранение их в состоянии.  

• Рендеринг компонента коллекции с передачей данных.  

• Использование map для рендеринга компонента.  

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

• Указание уникального ключа для коллекций.  

• Перезагрузка приложения для проверки корректности отображения.  

• Введение контролируемого ввода для фильтрации коллекций.  

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

• Проверка работы фильтрации и рендеринга коллекций.  

• Создание запроса на бэк-энд для получения коллекций по выбранной категории.  

• Определение категорий и их нумерация.  

• Написание кода для передачи выбранной категории в бэк-энд.  

• Рендеринг массива категорий из JSON.  

• Передача названий категорий в компонент.  

• Проверка отображения категорий и определение активных категорий.  

• Класс "актив" делает все категории активными.  

• Проверка категории по индексу: совпадение с индексом активирует категорию.  

• При клике на категорию она становится активной.  

• Использование документации для пагинации и фильтрации.  

• Фильтрация по категориям: поиск категорий по ID.  

• Обновление данных при изменении категории.  

• Передача категории ID в зависимости.  

• Условие для добавления категорий при наличии ID.  

• Проверка работы фильтрации в сети.  

• Проблемы с перезагрузкой при медленном интернете.  

• Создание состояния "загрузка" для отображения прогресса.  

• Фиксация состояния загрузки при смене категории.  

• Создание состояния "пейдж" для пагинации.  

• Передача пейджа и лимита данных.  

• Рендеринг фейковых элементов для пагинации.  

• Проверка индекса страницы для активации.  

• Корректировка состояния пейджа при клике.  

• Проверка корректности отображения страниц.  

• Передача пейджа и лимита в зависимости.  

• Проверка отображения коллекций на разных страницах.  

• Подтверждение корректной работы пагинации и фильтрации.