Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/archakov06/react-beginner-projects

Last synced: about 4 hours ago
JSON representation

Host: GitHub
URL: https://github.com/archakov06/react-beginner-projects
Owner: Archakov06
Created: 2022-06-14T18:26:33.000Z (over 2 years ago)
Default Branch: counter
Last Pushed: 2024-01-06T09:08:56.000Z (11 months ago)
Last Synced: 2024-05-16T01:11:52.495Z (6 months ago)
Language: HTML
Size: 628 KB
Stars: 153
Watchers: 10
Forks: 320
Open Issues: 21
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Проекты для начинающих на ReactJS

Все проекты разработаны для бесплатного курса на канале [Archakov Blog](https://www.youtube.com/c/ArchakovBlog)

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

## Счётчик
![1660249082356](https://user-images.githubusercontent.com/12086860/184235207-2d20299a-0b9a-40e6-acf7-be582f6ecbfe.png)

**🌿 Ветка**: `counter`

**👀 Что изучим?**
1. Что такое состояние (state)
2. Хук useState
3. Как при клике на кнопку вызывать функцию

## Модальное окно
![1660249510674](https://user-images.githubusercontent.com/12086860/184235807-bfb5d74b-68dc-4903-8b15-e18f6427fcc2.png)

**🌿 Ветка**: `modal`

**👀 Что изучим?**
1. Условный рендер
2. Как делать анимированное модальное окно
3. Как передавать в модально окно контент (children)
4. Как передавать пропсы

## Quiz (опросник)
![1660249609940](https://user-images.githubusercontent.com/12086860/184236063-9f807f93-f6a4-4577-9a12-443ff1d3fd43.png)

**🌿 Ветка**: `quiz`

**👀 Что изучим?**
1. Поэтапный рендер контента
2. Прогрессбар
3. Передача пропсов для рендера результата опроса

## Список гостей (пользователей)
![1660249789449](https://user-images.githubusercontent.com/12086860/184236601-2c8d94bf-105c-4b48-982c-65a6ed4f8c51.png)

**🌿 Ветка**: `users`

**👀 Что изучим?**
1. Работа с хуком useEffect
2. Отправка запроса на бэкенд с помощью fetch и рендер этих данных
3. Скелетон с помощью библиотеки `react-content-loader`
4. Поиск пользователей
5. Рендер списка пользователей
6. Spread-оператор
7. Добавление/удаление пользователей из массива приглашений
8. Отображение информации о загрузке контента

## Конвертер валют
![1660250017350](https://user-images.githubusercontent.com/12086860/184237245-dd26fc7e-1b84-4490-b9cf-3d40a4ded550.png)

**🌿 Ветка**: currency-converter

**👀 Что изучим?**
1. Работа с хуком useEffect
2. Получение списка курса валют из отдельного API
3. Конвертация одной валюты в другую и наоборот (без бэкенда)

## Коллекция фотографий
![1660250202173](https://user-images.githubusercontent.com/12086860/184237707-4810b1d8-f20b-40cf-93ea-37d2051b87ba.png)

**🌿 Ветка**: `photos`

**👀 Что изучим?**
1. Фильтрация коллекций с помощью категорий
2. Поиск коллекций
3. Пагинация
4. Получение, пагинация через бэкенд
5. Отображение информации о загрузке контента