Project 1 / Demo: https://react-tutorial-movies-2022.firebaseapp.com/
По курсу https://coursehunter.net/course/react-s-nulya-dlya-nachinayushchih-3-proekta-v-portfolio
Список фильмов, запрашиваемых по API с https://www.omdbapi.com/, в котором есть строка поиска, отправляющая соответствующий запрос, плюс фильтрация, где можно выбрать одну из категорий:
- Все
- Только фильмы
- Только сериалы
Для стилизации используется https://materializecss.com
Компоненты с состоянием изначально реализованы через классы (не современно, но для понимания и знакомства - думаю, нормально), а после, в рамках рефакторинга, переписаны на хуки.
Запросы - через нативный fetch.
Project 2 / Demo: https://react-tutorial-shop-2022.firebaseapp.com
Продолжение работы по курсу https://coursehunter.net/course/react-s-nulya-dlya-nachinayushchih-3-proekta-v-portfolio
Второй проект - магазин товаров, запрашиваемых по API с https://fortniteapi.io/, в котором есть возможность добавлять товары в корзину, просматривать её, изменять внутри нее количество товаров, а также удалять их.
Для стилизации также используется https://materializecss.com
Все компоненты изначально были связаны пропсами, но после рефакторинга они изменены на использование контекста и редьюсера.
Project 3 / Demo: https://react-tutorial-menu-2022.firebaseapp.com
Продолжение работы по курсу https://coursehunter.net/course/react-s-nulya-dlya-nachinayushchih-3-proekta-v-portfolio
Третий проект - приложение cо списком блюд, запрашиваемых по API с https://www.themealdb.com/, в котором можно перейти из общей категории на страницу списка блюд данной категории, а оттуда - в рецепт конкретного блюда с фото, описанием, списком ингридиентов, и (при наличии) видео-рецептом. Плюс реализован переход "Назад" по кнопке со всех страниц, кроме главной.
Кроме этого, на главной странице добавлен поиск по категории.
Для стилизации также используется https://materializecss.com
Для навигации и роутинга использован react-router-dom
Примечание. Дополнительная ссылка на Udemy курс по которым сделаны первые 3 проекта (так как там есть более детальное описание пройденного материала): https://www.udemy.com/course/react-from-scratch/
Project 4 / Demo: https://react-tutorial-hooks-2022.firebaseapp.com
Четвертый проект сделан по курсу https://coursehunter.net/course/react-hooks-v-detalyah и посвящен детальной работе с хуками.
В рамках курса подробно рассмотрены такие хуки как
- useState
- useEffect & useLayoutEffect
- useImperativeHandle
- useCallback
- useMemo
- useContext
- useReducer
- useDebugValue
Мной были пройдены лекции с 1 по 18, лекции с 19 и до конца (до 49) я оставила на будущее, так как материал под конец стал казаться уже порядочно сложным, а следующие в дальнейших уроках хуки - редко используемыми, поэтому я решила вернуться к изучению и закрепленю более базовых вещей.
Project 5 / Demo: https://react-tutorial-expense-2023.firebaseapp.com
Пятый проект сделан по курсу "Современный React с Нуля" https://coursehunter.net/course/sovremennyy-react-s-nulya
По урокам с 1 по 59 - разработка приложения по учету расходов с возможностью добавления нового расхода через форму, отображением диаграммы с расходами по месяцам и селектом фильтрации расходов по году. Изучены базовые концепции Реакта, такие как props, разбивка на компоненты, обработчики событий, состояния, хук useState, условный рендеринг и работа со стилями.
Project 6 / Demo: https://react-tutorial-user-list-2023.firebaseapp.com
Шестой проект также сделан по курсу "Современный React с Нуля" https://coursehunter.net/course/sovremennyy-react-s-nulya
По урокам с 72 до 87 - крошечное приложение с формой добавления новых пользователем с именем и возрастом и валидацией в модальных окнах заполнения формы. Изучены такие концепции как фрагменты, порталы и refs.
Седьмой проект также сделан по курсу "Современный React с Нуля" https://coursehunter.net/course/sovremennyy-react-s-nulya
По урокам с 88 до 105 - создание формы авторизации. Более подробно рассмотрены такие зуки как useEffect и useRefs, изучены хуки useReducer и useContext.
Восьмой проект также сделан по курсу "Современный React с Нуля" https://coursehunter.net/course/sovremennyy-react-s-nulya
По урокам с 105 до